Каков наилучший способ сравнить множество prevProps и nextProps в Reactjs?

Question

Дочерний компонент получает много обновленных реквизитов от своего родительского компонента. Я хочу обновить дочерний компонент, если в реквизитах есть какое-либо обновление. В настоящее время я делаю это, используя метод жизненного цикла. componentWillReceiveProps который работает, как ожидалось.

componentWillReceiveProps(nextProps){
    if(this.props.scale_length !== nextProps.scale_length){
      const {scale_height,scale_breadth} = this.props
      this.setState({
        torsoScale: new 
            THREE.Vector3(nextProps.scale_length,scale_height,scale_breadth)
      });
    }
if(this.props.scale_breadth !== nextProps.scale_breadth){
      const {scale_height,scale_length} = this.props
      this.setState({
        torsoScale: new 
            THREE.Vector3(scale_length,scale_height,nextProps.scale_breadth)
      });
    }

...
}

Но я буду получать 8+ реквизита в будущем. Как я буду продолжать это. Спасибо.

Answer 1

Я хочу обновить дочерний компонент, если в подпорках есть какое-либо обновление.

Это то, что React делает по умолчанию! Вы должны работать с его обычными обновлениями компонентов, а не пытаться бороться с ним и решить, стоит ли обновлять вещи самостоятельно.

Ты можешь использовать getDerivedStateFromProps для этого, но, возможно, есть и лучшие способы, такие как вычисление вектора непосредственно в render метод.

Вот статья с большим количеством подробностей: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html