基于全局状态更改重新渲染单个子组件，而无需重新渲染兄弟姐妹

Question

我有一个包含许多子组件的 React 父组件（数千个 SVG 元素，重新渲染成本很高）。子组件基于全局状态显示信息；某处是应该以特殊方式显示的那些子组件的列表。由于其他地方需要此列表，因此它不能是每个子节点的本地状态信息，因为它不是子节点私有的。

遵循此处的建议：https://reactjs.org/docs/lifting-state-up.html 我将状态提升到父组件。但是，一次只改变一个孩子；例如，用户可能会单击 SVG 元素来调整其显示属性（这些属性存储为孩子的道具）。但是，由于状态存储在父级中，因此在父级上调用 setState 会触发整个父级组件（包括其所有数千个子级）的昂贵重新渲染，即使它们中的大多数没有更改。

所以我不确定如何在 React 中正确执行此操作并获得良好的性能。 （我找到了 forceUpdate 方法，以及许多永远不要使用它的警告。）我想我想做的是以某种方式更新孩子的道具，但从文档中，我能看到的唯一方法父级更新单个子级的道具，是为了调用父级的render() 方法，这意味着它也在重新渲染所有未更改的兄弟姐妹，这是我想要的昂贵案例避免。

有没有办法让一个点击处理程序，存储在父级或其他地方，可以访问全局状态，改变这个状态，更新它影响的单个子组件的道具，然后只告诉那个孩子重新渲染？

对不起，我没有包含任何源代码；这实际上是用 Dart 而不是 JS 编写的，但我认为问题出在底层 React 库级别。

Answer 1

您必须使用shouldComponentUpdate()、React.PureComponent 或React.memo()（如果您使用的是 React > v16.6.0 和功能组件）。你想要这样的东西：

父组件

class Parent extends Component {
  state = {
    color1: "red",
    color2: "blue"
  };

  changeState = () =>
    this.setState((state, props) => ({
      color1: state.color1 === "red" ? "yellow" : "red",
      color2: state.color2
    }));

  render() {
    return (
      <>
        <Child color={this.state.color1} />
        <Child color={this.state.color2} />
        <button onClick={this.changeState}>Change State</button>
      </>
    );
  }
}

每次单击Change State 时，父级将在红色和黄色之间切换color1 状态属性。然后，您可以通过一些选项来优化您的应用。

shouldComponentUpdate()

class Child extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.color !== this.props.color) return true;
    return false;
  }
  render() {
    return (
      <div style={{ backgroundColor: this.props.color }}>I am a child</div>
    );
  }
}

React.PureComponent

class PureComponentChild extends React.PureComponent {
  render() {
    return (
      <div style={{ backgroundColor: this.props.color }}>I am a child</div>
    );
  }
}

React.memo()

const FunctionalChild = React.memo(props =>
  <div style={{ backgroundColor: props.color }}>I am a child</div>
);

欲了解更多信息，请查看shouldComponentUpdate()、React.PureComponent 和React.memo()