как наиболее эффективно обновить родительское состояние, если обновлено его ссылочное состояние

Question

Я использую Reactjs для своего проекта. если у меня есть такие состояния:

state = {
   child:menuList
   parent1:{
     key1:'some value',
     key2:'some value'
   }
   parent2:{
     key1:'some value',
     key2:'some value'
   }
   parent3:{
     key1:'some value',
     key2:'some value'
   }
}
componentDidMount(){
   const {child} = this.state;
   let {parent1,parent2,parent3} = this.state
   parent1.key3=child;
   parent2.key3=child;
   parent3.key3=child;
   this.setState({
       parent1,
       parent2,
       parent3
   })


}

дочернее состояние является ссылкой на parent1, parent2 и parent3

Если я обновлю дочернее состояние следующим образом: this.setState({child:menuList2}), будут ли автоматически обновляться parent1, parent2 и parent3?

Если нет, то какой самый эффективный способ обновить состояние parent1, parent2 и parent3, если обновлено дочернее состояние

Answer 1

Согласно приведенному выше коду ваше состояние child будет присвоено parent1, parent2 и parent3 как key3 каждый раз, когда ваш компонент монтируется. В случае обновления компонента и изменения дочернего состояния у ваших parent1, parent2 и parent3 не будет нового состояния дочернего элемента, поскольку компонент уже смонтирован.

Лучшим способом решения этой сложной проблемы состояния будет использование инфраструктуры управления состояниями, например, redux и разделение компонентов между презентационными и контейнерными компонентами. Вы можете быстро прочитать эту ссылку , чтобы понять ее подробно.

Другой возможный способ сделать это - извлечь код из вашего монтируемого объекта в другую функцию, и вы можете использовать жизненный цикл componentDidUpdate, чтобы обновить своего родителя, когда ребенок не совпадает с предыдущим состоянием. Итак, ваш код будет выглядеть примерно так:

state = {
   child:menuList
   parent1:{
     key1:'some value',
     key2:'some value'
   }
   parent2:{
     key1:'some value',
     key2:'some value'
   }
   parent3:{
     key1:'some value',
     key2:'some value'
   }
}
componentDidMount(){
   this.updateParent();
}

componentDidUpdate(prevProps,prevState) {
    const { child } = this.state;
    const prevChild = prevState.child;
    if(prevChild !== child) {
        this.updateParent();
    }
}

updateParent() {
    const {child} = this.state;
    let {parent1,parent2,parent3} = this.state
    parent1.key3=child;
    parent2.key3=child;
    parent3.key3=child;
    this.setState({
        parent1,
        parent2,
        parent3
    })
}

Имейте в виду, чтобы проверить условие в componentDidUpdate, иначе ваш компонент перейдет в бесконечный цикл рендеринга. Если вы используете React 16.3.0 или выше, вы можете взглянуть на getDerivedStateFromProps и новые жизненные циклы для достижения этой цели.