如何在状态值中保存 React 子组件是有效的？

Question

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

下面是我的例子：

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 工具解决问题。

你怎么看？ 你会建议什么模式？

Answer 1

好的，我自己已经找到了这个问题的答案。 尽管React在每次状态 更改时都调用render 函数 ，但它不会重新渲染不必要的组件。

Answer 2

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