如何在React 16中从setState()返回null来优化组件更新

2023-10-03 04:58:27

在React 16中，为了防止不必要的DOM更新，允许你决定是否让.setState()来更新状态。在调用.setState()时返回null将不再触发更新。本文将通过重构一个mocktail（一种不含酒精的鸡尾酒）选择程序来探索它是如何工作的，即使我们选择相同的mocktail，也可以避免不必要的DOM更新。

背景

在React中，当组件的状态发生变化时，组件将重新渲染。然而，并非所有的状态变化都应该导致重新渲染。例如，如果你有一个包含一组复选框的组件，当用户点击一个复选框时，你可能只想更新该复选框的状态，而不想重新渲染整个组件。

为了防止不必要的重新渲染，React 16引入了.setState()方法。.setState()方法允许你更新组件的状态，而无需触发重新渲染。要做到这一点，只需在调用.setState()时返回null即可。

示例

为了演示如何使用.setState()来防止不必要的重新渲染，我们将重构一个mocktail选择程序。这个程序允许用户从一系列mocktail中进行选择。当用户选择一个mocktail时，程序将显示该mocktail的详细信息。

在重构之前，我们的程序如下所示：

class MocktailSelector extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedMocktail: null
    };
  }

  handleMocktailSelect = (mocktail) => {
    this.setState({
      selectedMocktail: mocktail
    });
  };

  render() {
    const { mocktails } = this.props;
    const { selectedMocktail } = this.state;

    return (
      <div>
        <h1>Mocktail Selector</h1>
        <ul>
          {mocktails.map((mocktail) => (
            <li key={mocktail.id}>
              <button onClick={() => this.handleMocktailSelect(mocktail)}>{mocktail.name}</button>
            </li>
          ))}
        </ul>

        {selectedMocktail && (
          <div>
            <h2>{selectedMocktail.name}</h2>
            <p>{selectedMocktail.description}</p>
          </div>
        )}
      </div>
    );
  }
}

在这个程序中，当用户点击一个mocktail时，handleMocktailSelect()方法被调用。这个方法更新组件的状态，将selectedMocktail设置为选定的mocktail。这会导致组件重新渲染，即使选定的mocktail没有改变。

为了防止不必要的重新渲染，我们可以修改handleMocktailSelect()方法，使其在选定的mocktail没有改变时返回null。

handleMocktailSelect = (mocktail) => {
  const { selectedMocktail } = this.state;

  if (selectedMocktail === mocktail) {
    return null;
  }

  this.setState({
    selectedMocktail: mocktail
  });
};

现在，当用户点击一个mocktail时，handleMocktailSelect()方法会检查选定的mocktail是否与选定的mocktail相同。如果相同，则该方法将返回null，这将防止组件重新渲染。