Как эффективно сохранить дочерние компоненты 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 вызывает рендеринг функция для каждого состояния изменения , он не повторно рендерит ненужные компоненты.