javascript - 防止 React 组件不必要的重新渲染

Question

我有一个 PureComponent，它呈现另一个组件并实现其 onClick 回调:

class ColorPicker extends React.PureComponent {
  render() {
    console.log('ColorPicker being rendered');
    const fields = this.props.colors.map((color, idx) => {
      const fieldProps = {
        key: `${idx}`,
        color,
        /*onClick: () => { // PROBLEM HERE
          this.props.colorPicked(color);
        }*/
      };
      return <ColorField { ...fieldProps}/>;
    });
    return (
      <div className="bla-picker">
        <div>{`Refresh seed: ${this.props.seed}`}</div>
        {fields}
      < /div>
    );
  }
}

此组件有一个小问题:每当重新呈现 ColorPicker 时，嵌套的 ColorField 也需要重新呈现，因为它们的 onClick 属性每次都会更改。每当呈现组件时，使用 lambda 函数都会创建该函数的新实例。

我通常通过将 onClick 的实现移到 render 方法之外来解决这个问题，例如:onClick: this.handleClick。但是，我不能在这里这样做，因为 onClick 处理程序需要捕获 color 变量。

解决此类问题的最佳做法是什么？

这是一个 jsfiddle试试看；作为一个片段:

class ColorField extends React.PureComponent {
  render() {
    console.log('ColorField being rendered');
    const divProps = {
      className: 'bla-field',
      style: {
        backgroundColor: this.props.color
      },
      onClick: this.props.onClick
    };
    return <div { ...divProps}/>;
  }
}
class ColorPicker extends React.PureComponent {
  render() {
    console.log('ColorPicker being rendered');
    const fields = this.props.colors.map((color, idx) => {
      const fieldProps = {
        key: `${idx}`,
        color,
        /*onClick: () => { // PROBLEM HERE
          this.props.colorPicked(color);
        }*/
      };
      return <ColorField { ...fieldProps}/>;
    });
    return (
      <div className="bla-picker">
        <div>{`Refresh seed: ${this.props.seed}`}</div>
        {fields}
      < /div>
    );
  }
}

class Layout extends React.PureComponent {
  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      seed: 1
    };
  }
  render() {
    const pickerProps = {
      colors: ['#f00', '#0f0', '#00f'],
      colorPicked: (color) => {
        console.log(`Color picked: ${color}`);
      },
      seed: this.state.seed
    };
    return (
      <div>
        <div
          className="bla-button"
          onClick = {this.btnClicked}
        >
          {'Click Me'}
        </div>
        <ColorPicker { ...pickerProps} />
      </div>
    );
  }
  btnClicked = () => {
    this.setState({ seed: this.state.seed + 1 });
  };
};

ReactDOM.render( <
  Layout / > ,
  document.getElementById("react")
);

.bla-button {
  background-color: #aaa;
  padding: 8px;
  margin-bottom: 8px;
}

.bla-picker {}

.bla-field {
  width: 32px;
  height: 32px;
}

<div id="react">
</div>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

只要 onClick 保持注释掉，只有 ColorPicker 会在种子更改时重新呈现(请参阅 console.log 的输出) .一旦 onClick 被输入，所有的 ColorField 也会被重新渲染。

Answer 1

您可以在 ColorField 组件中实现 shouldComponentUpdate，例如:

class ColorField extends React.Component {
  shouldComponentUpdate(nextProps) {
    return this.props.color !== nextProps.color;
  }

  render(){
    const { color, onClick } = this.props;
    console.log('Color re-rendered');
    return (
      <div 
        className="color"
        onClick={onClick}
        style={{ 
          backgroundColor: color,
          height: '50px',
          width: '50px',
        }} 
      />
    )
  }
}

Example here

请注意，在第一个解决方案中，我们可以只使用 React.Component，因为我们自己实现了 shouldComponentUpdate。