我对 React 还很陌生,我有一个关于架构和设计模式的问题。我已经完成了我的第一个项目(交互式图灵机测序仪 http://reactiveturing.herokuapp.com/如果有人感兴趣的话。我发现自己经常声明嵌套函数,例如
function MyReactList(props){
const items = []
for (let i=0; i<20;i++){
function MyReactElem(props){
return <div>
<h1>{getHeadingFromSomewhereUsingIndex(i)}</h1>
{getTextFromSomewhereUsingIndex(i)}
</div>
}
items.push(<MyReactElement></MyReactElement>)
}
return items
}
经过仔细检查,我意识到这可能完全没有意义,因为它 100% 相当于:
function MyReactList(props){
function MyReactElem(props){
return <div>
<h1>{getHeadingFromSomewhereUsingIndex(props.index)}</h1>
{getTextFromSomewhereUsingIndex(props.index)}
</div>
}
const items = []
for (let i=0; i<20;i++){
items.push(<MyReactElement index={i}></MyReactElement>)
}
return items
}
如果我没有记错的话,第二个版本应该使用更少的内存?
我是否应该嵌套这样的功能组件?我的想法是在这样的范式下工作:每个限定符都应该从尽可能小的上下文中声明,但这也许是错误的,因为我不确定它还有什么其他含义,如果有人能给我一些提示,如果嵌套的功能组件是曾经是一个好主意,当情况确实如此时。
嵌套函数组件不是一个好主意。为什么不?因为每次MyReactList
渲染,它将重新声明MyReactElement
。这意味着将在内存中分配一个新位置MyReactElement
每次MyReactList
呈现。因为函数是通过它们的内存地址进行比较的,并且因为MyReactElem
每次渲染都会被放入一个新的内存地址,react 会认为当前MyReactElem
是一个完全不同的组件MyReactElem
最后渲染的。这会导致卸载之前的MyReactElem
(丢失所有状态)和当前的安装量MyReactElem
(初始化)而不是重新渲染。
如果你保留状态,你就会丢失它,这显然会导致严重的错误。但即使你不这样做,重新挂载的反应比重新渲染的成本要高得多。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)