我知道，在React组件中，渲染组件总是很好的，而不是使用渲染某些JSX的函数。我的意思是
这样做：
export default function App() {
const [count, setCount] = useState(0);
const someRenderFunction = () => <p>Hey</p>;
return (
<div className="App">
{someRenderFunction()}
<button
onClick={() => {
setCount((c) => c + 1);
}}
>
Increment{" "}
</button>
<p>{count}</p>
</div>
);
}
不鼓励。渲染函数应该导出到它自己的组件中，如下所示：
const HeyComponent = () => <p>Hey</p>
export default function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<HeyComponent />
<button
onClick={() => {
setCount((c) => c + 1);
}}
>
Increment{" "}
</button>
<p>{count}</p>
</div>
);
}
但我从未真正理解过这种重构的好处。我尝试放置检查重新渲染行为、卸载行为。仍然没有看到任何区别。有人能详细解释一下为什么这种重构是必要的/有益的吗？
这都是关于components的，因此组件应该是可重用的，并且应该遵循DRY原则，在您的情况下，这似乎很简单，正如您所说，如果virtual dom中的组件没有任何更改，则会阻止someRenderFunction()被重新呈现，因此最佳实践是始终使用<X />语法，或者在某些情况下，const Y = <X />也更可读。测试是创建更多组件并使它们更加解耦的另一个原因。想象一下，这里需要将props传递给someRenderFunction()，这样就失去了将道具传递为<X prop={PROP}/>的jsx特性。
两者的实际区别在于返回JSX的函数不是组件，因此它没有自己的状态。在函数中使用useState时，状态更改将导致App被重新渲染。
第二种方式比第一种方式更好的两个原因是：
- 定义
<p>Hey</p>JSX的函数(在第一种方式中命名为someRenderFunction，在第二种方式中称为HeyComponent(以第二种方法移动到组件App之外。到目前为止，还没有任何好处，但如果您以后想扩展someRenderFunction/HeyComponent，使其具有可挂接的正常组件生命周期，那么将其移出App将是至关重要的。例如，如果您希望函数/组件跟踪其自身的状态，第一种方法将导致每次App渲染时重置someRenderFunction的状态。有关此问题的更多信息，请访问此处：https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md，此处：https://stackoverflow.com/a/64211013/693855. HeyComponent将被视为有效的组件，而someRenderFunction则不会，因为组件名称需要以大写字母开头(此处提到https://reactjs.org/docs/components-and-props.html#rendering-a部分底部注释中的组件(。如果你在函数中使用了钩子，而React没有将其视为有效的组件，那么它将破坏"钩子"；钩子规则"；由React设置(https://reactjs.org/docs/hooks-rules.html#only-来自react函数的调用钩子(。我不确定这是否会导致任何错误，但React对此表示反对——如果你有"；react hook/rules of hook"；ESLint规则已启用(来自https://www.npmjs.com/package/eslint-plugin-react-hooks)，您会看到这样的错误：ESLint: React Hook "useState" is called in function "someRenderFunction" that is neither a React function component nor a custom React Hook function.(react-hooks/rules-of-hooks)
呈现组件的代码是最佳实践。使用Components，我们可以将状态值传递给子组件，并可用于显示数据。相同的组件可以在其他地方重复使用。
如果你只需要显示一个小函数，如果它显示恒定的信息，它也可以使用。