REACT：变量中的JSX与函数中的JSX以及单独的组件中的JSX
要在较大的组件中呈现较小的组件/JSX，可以遵循多种方法。例如，请考虑以下内容：
方法1：
function BigComponent(props) {
const renderSmallComponent1 = () => <div>{props.a}</div>;
const renderSmallComponent2 = () => <div>{props.b}</div>;
return (
<div>
{renderSmallComponent1()}
{renderSmallComponent2()}
</div>
)
}
方法二：
function BigComponent(props) {
const smallComponent1 = <div>{props.a}</div>;
const smallComponent2 = <div>{props.b}</div>;
return (
<div>
{smallComponent1}
{smallComponent2}
</div>
)
}
方法3：
function SmallComponent1({ a }) {
return <div>{a}</div>;
}
function SmallComponent2({ b }) {
return <div>{b}</div>;
}
function BigComponent(props) {
return (
<div>
<SmallComponent1 a={props.a} />
<SmallComponent2 b={props.b} />
</div>
)
}
我只是想了解这三个方面的区别
- 开发经验，
- 框架如何处理它们，
- 有没有性能优化，
- 所有这些组件的运行时行为是否都有差异？
- 在某些情况下使用哪一个更好？
以下是我的理解：
- 在方法3中，所有
SmallComponent都是在另一个组件中呈现的Reaction组件，因此它们有一个组件生命周期，而在方法1和2中，它们是简单的JSX，没有生命周期，所以它们不会作为Reaction组件挂载/卸载 - 在方法2中，我们会急于计算JSX，因为它直接是一个变量，而在方法1中，只有在Render中调用函数时才会计算它。因此，如果我们有任何条件渲染，那么急切的求值可能只是浪费。
其他几篇有用的文章：
- https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f
- https://kentcdodds.com/blog/dont-call-a-react-function-component
更新：观察结果1似乎不正确，因为它们全部3仍将呈现为Reaction组件，因此将具有组件生命周期。因此Reaction将装入/卸载它们。
更新2：不，观察%1是正确的，方法%1和%2都被视为BigComponent的一部分的常规JSX，并且它们没有被视为具有生命周期的反应组件。
更新3： 还有另一种方法方法4：
function BigComponent(props) {
const SmallComponent1 = () => {
return <div>{props.a}</div>;
}
const SmallComponent2 = () => {
return <div>{props.b}</div>;
}
return (
<div>
<SmallComponent1 />
<SmallComponent2 />
</div>
)
}
这类似于方法3，但在通过开发工具进行调试时，方法3与方法4在执行方面略有不同。
解决方案
方法二：
function BigComponent(props) {
const smallComponent1 = <div>{props.a}</div>;
const smallComponent2 = <div>{props.b}</div>;
return (
<div>
{smallComponent1}
{smallComponent2}
</div>
)
}
- 如果您希望将大UI分成多个小UI，此方法将为您提供最佳性能，因为
- 它仍然只是一个大的UI组件。
- Reaction只需解析变量引用。
- 重新呈现时，BigComponent、SmallComponent1和SmallComponent2一起呈现为单个单元。
- SmallComponent1和SmallComponent2不能有自己的状态、生命周期和挂钩。
- SmallComponent1和%2需要在每次更改BigComponent1和2状态时重新初始化。因此，如果这些小组件的结果来自昂贵的计算，最好用
useMemo()包装它们。
方法3：
function SmallComponent1({ a }) {
return <div>{a}</div>;
}
function SmallComponent2({ b }) {
return <div>{b}</div>;
}
function BigComponent(props) {
return (
<div>
<SmallComponent1 a={props.a} />
<SmallComponent2 b={props.b} />
</div>
)
}
Reaction需要解析引用并在解析引用后执行函数。
它是将Reaction的实际子组件组合成一个大组件。
允许子组件拥有自己的
hooks。子组件不会重新初始化，但如果更改了BigComponent状态，则会重新呈现。
如果小组件根据父级中的道具更改更新其自身状态，则SmallComponent1和SmallComponent2有可能在BigComponents呈现上多次重新呈现一次。
如果每个SmallComponent都应该使用多个状态为BigComponent的道具，则将SmallComponents保留在BigComponent之外确实可以提供良好的开发体验。
希望通过以上几点也能理解方法1和方法4。
注意：如果您的应用程序逻辑使用ref或DOM元素来维护呈现的焦点或锚点，则存储在变量和子组件中的子组件作为函数会变得很棘手。