将 React 子组件保存在状态值中如何高效？答案

【问题标题】：How can saving React Child Components inside state value be efficient?将 React 子组件保存在状态值中如何高效？
【发布时间】：2018-11-21 15:41:04
【问题描述】：

我正在做一些需要动态添加反应子组件的项目。虽然这项任务似乎很容易完成，但我担心我的方法的效率。我在网上冲浪，发现了几个与我的设计模式相同的解决方案。尽管如此，我还是怀疑自己的效率。

下面是我的例子：

class Container extends Component{

    constructor(props){
      super(props)
      this.state = {
         children: []
      }
      this.addChild = this.addChild.bind(this)
    }

    addChild(){
      this.setState({
        children: [...this.state.children, 
                   <div> 
                      <h1> My number is {this.state.children.length} </h1>
                   </div>]
      })
    } 

    render() {
      return
            <div>
                <button onClick={this.addChild}> Add child </button>
                {this.state.children.map( child => child)}
            </div>
    }
}

这个例子很简单。但是当你有一个复杂的结构，其中组件有其他改变状态的组件，有事件监听器和深层结构时，组件的状态值将包含大量代码，并且该组件将重新渲染所有内容每次添加。在 第 100 次添加时，它将使 99 次不必要重新渲染。

当然，我可以使用 Vanilla JS 或 JQuery 来附加新组件，但我认为这不是明智的决定。我想保持一致性并使用 React 工具解决问题。

你的想法是什么？你会建议什么模式？

【问题讨论】：

您可以查看PureComponent 概念并尝试围绕它组织您的代码。这是一个工作示例：stackoverflow.com/a/50463828/4312466
@JordanEnev 谢谢！

标签： javascript reactjs design-patterns ecmascript-6

【解决方案1】：

好的，我自己刚刚找到了这个问题的答案。虽然 React 会在每个 state change 上调用 render function，但它不会 >重新渲染不必要的组件。

【讨论】：

【解决方案2】：

3 年后，我发现这种方法很糟糕。应该将 状态值 存储在数组中并在渲染函数中对其进行迭代。不仅代码看起来更清晰，而且内存使用量也会减少。

【讨论】：

是的，现在人们不使用 Class 组件了?