Question

我对React很陌生，我对架构和设计模式有疑问。我已经完成了我的第一个项目（如果有人感兴趣，则是interactive turing machine sequencer。我发现自己经常声明嵌套函数，例如

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

}

如果我没记错的话，第二版应该使用明显更少的内存？我是否应该完全嵌套这样的功能组件？我的想法是在范式下工作的，应该从最小的上下文中声明每个限定符，但是那可能是错误的，因为我不确定它还有什么其他含义，如果有人可以给我一些提示，如果嵌套的功能组件是，我将不胜感激。曾经是个好主意，那是什么时候。

Answer 1

嵌套功能组件不是一个好主意。为什么不？因为每次MyReactList渲染，它都会重新声明MyReactElement。这意味着每次MyReactElement渲染时，都会为MyReactList分配一个新的内存位置。由于函数是按其内存地址进行比较的，并且由于MyReactElem被放入每个渲染的新内存地址中，因此react会认为当前的MyReactElem是与MyReactElem完全不同的组件。最后渲染。这会导致前一个MyReactElem的卸载（丢失所有状态）和当前MyReactElem的装载（初始化），而不是重新渲染。

如果保持状态，则会丢失状态，这显然会导致令人讨厌的错误。但是，即使您不这样做，重新安装的反应也要比重新呈现的代价高得多。

功能组件嵌套与道具

1 个答案: