父元素的入队React更新是否也总是更新子元素吗？

Posted 2021-04-05

考虑到子组件需要使用父组件的道具来建立其状态的一部分的情况，如果父组件中的多个更新被排队，子组件将收到所有这些更新，并且子组件的状态会相应地反映这些更改？还是孩子只会收到用于重新渲染组件的最终更新？

[这不是我的用例，只是一个简单的示例]例如，假设父母不断覆盖state.num中存储的数字。父母将state.num作为道具传递给孩子。

{ // this is a React event handler and thus setState calls should batched
  this.setState({num: 1});
  this.setState({num: 2});
  this.setState({num: 3});
}

getDerivedStateFromProps中的子项将接收到的每个props.num附加到自己的state.numArray上，以构建所有更改的数组。

  static getDerivedStateFromProps(props, state) {
    // comparisons and other stuff here
    return {
      numArray: [...state.numArray, props.num]
    };
  }

使用此设置，子级会从父级那里收到每个覆盖的值（子级numArray是否为[1, 2, 3]）？还是重新呈现所有组件时（父级num为num，子级3为numArray），它将仅收到最终的父级[3]值吗？

答案

将状态映射到道具只是...越野车，而不是理想情况。 Here's a great article如果要阅读。相反，您应该只在子组件中使用道具，如果需要更新它们，请在父组件中对其进行更新，然后将新更新的道具传递给子组件。