有谁知道为什么要将react无状态组件用于大型组件，并定义变量等方法。我最近加入了一个项目，使用了这种方法。我很困惑。
我想最好使用小组件，但仍然
也许有一些合乎逻辑的解释，比如性能等等。
简单代码示例：
const myComponent = ({p1, p2, p3}) => {
const buttonProps = {
className: 'button',
onClick: () => { console.log('clicked'); }
};
const getButtonName = () => 'Submit';
const getButton = () => {
return (
<button ...buttonProps>{getButtonName()}<button>
);
}
/* a lot of defined objects like above */
return (
<div>
{getButton()}
</div>
);
}
主要问题是为什么使用getButton（）等方法而不是创建MyButton组件。我想这很容易理解，调试等。
无状态组件表示is没有状态，示例中的React组件将被视为功能组件。至于模式本身，它也可以在类组件中实现-它不是只针对功能组件的。
例如，上面的代码可以像下面的代码一样编写，它将产生相同的精确结果：
class MyComponent extends React.Component {
render() {
const buttonProps = {
className: `button`,
onClick: () => {}
}
const getButtonName = () => `Submit`
const getButton = () => {
return (
<button {...buttonProps}>{getButtonName()}</button>
)
}
return (
<div>{getButton()}</div>
)
}
}
我不知道上下文，所以很难弄清楚为什么事情是这样做的——最好询问负责选择以这种方式编写组件的开发人员来弄清楚原因。
不幸的是，或者幸运的是，React并不固执己见，人们可以随心所欲，这可能会导致并不总是好的“奇怪”模式。
您提供的代码片段创建了不必要的抽象，这些抽象乍一看并不清晰——我必须弄清楚getButton是做什么的，然后转到getButtonName查看在按钮元素中呈现了什么，然后然后我必须搜索按钮道具来找出传递了什么道具。
如果您确实需要返回组件的可重用函数，那么为什么不以“React”的方式执行呢？
function Button({ children, ...rest }) {
const defaultProps = {
className: `button`,
onClick: () => {}
}
const props = { ...defaultProps, ...rest }
return (
<button {...props}>
{children}
</button>
)
}
然后，回到您的示例，可以在以下示例中使用：
// by the way, start with an uppercase when naming React components
const MyComponent = ({ p1, p2, p3 }) => {
return (
<div>
<Button>I am a button #1!</Button>
<Button
onClick={() => console.log(`HelloWorld`)}
>
I am a button #2 with a custom `onClick` handler!
</Button>
</div>
)
}
这种方法更好、更简洁，因此正如您在评论中所建议的，getButton应该作为实际的React组件编写。
在React中，可以有基于类的组件，也可以有基于函数的组件（功能组件）。
功能组件通常更容易测试和理解，而且更轻。
React世界的趋势是基于功能的组件。在过去一年左右的时间里，情况甚至更加如此，引入了钩子（即useState，use效应等）。）这允许您拥有一个简单的功能组件，但可以访问赋予基于类的组件额外的能力。
基于类的组件本身没有什么问题，但是趋势远离它们，所以听到你说你加入了一个不使用它们的项目，我并不感到惊讶。
您可能对2018年的一个React Conf视频感兴趣，该视频介绍了钩子：React Conf 2018相关部分大约在11:30开始。
扩展React的有状态组件。组件有很多额外的功能。基本上，您正在导入所有内置的变量和函数以进行响应。组件，例如生命周期功能。如果您不需要它们，那么无状态只是创建了一个更轻的组件。例如，当您的组件装载时，有状态组件将调用componentDidMount（），而无状态组件甚至没有componentDidMount（）。
编辑：回答你更具体的问题：这个函数是一个组件，一个功能组件，是为了可重用而设计的，但是在功能组件的呈现函数中，这个组件不能用
