功能组件嵌套 vs. props

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。这意味着每次 MyReactList 渲染时，都会为 MyReactElement 分配一个新的内存位置。因为函数是通过它们的内存地址进行比较的，并且由于 MyReactElem 在每次渲染时都会被放入一个新的内存地址，所以 React 会认为当前的 MyReactElem 是与 MyReactElem 完全不同的组件最后渲染。这会导致卸载之前的 MyReactElem（丢失所有状态）和装载当前的 MyReactElem（初始化）而不是重新渲染。

如果你保持状态，你就会失去它，这显然会导致严重的错误。但即使你不这样做，重新挂载的反应比重新渲染要昂贵得多。

功能组件嵌套 vs. props

functional components nesting vs. props

functional-programming

inner-classes

reactjs