用数组与集合反应 PureComponent 状态

Question

我希望能够使用状态为 Set 对象的 PureComponent，并在每次更新该集合的大小时实现重新渲染。

目前，以下不起作用：

class App extends React.PureComponent {
  state = {
    items: new Set()
  };

  addItem = () => {
    this.setState(({ items }) => ({ items: this.state.items.add(Math.random()) }));
  };

  render() {
    return (
      <div>
        <div>Total Items {this.state.items.size}</div>
        <button onClick={this.addItem}>Add item</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

注意，当使用数组时，它可以工作：

class App extends React.PureComponent {
  state = {
    items: []
  };

  addItem = () => {
    this.setState(({ items }) => ({ items: [...items, Math.random()] }));
  };

  render() {
    return (
      <div>
        <div>Total Items {this.state.items.length}</div>
        <button onClick={this.addItem}>Add item</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

要使第一个 sn-p 工作需要什么？

Answer 1

从Using a Set data structure in React's state获得解决方案

以下将起作用，因为您的状态值被替换为新的 Set 而不是改变原始值。

class App extends React.PureComponent {
  state = {
    items: new Set()
  };

  addItem = () => {
    this.setState(({ items }) => ({ items: new Set(items).add(Math.random()) }));
  };

  render() {
    return (
      <div>
        <div>Total Items {this.state.items.size}</div>
        <button onClick={this.addItem}>Add item</button>
      </div>
    );
  }
}

使用 PureComponent 的区别在于：

... 只是对对象进行浅层比较。如果这些包含复杂的数据结构，则可能会为更深层次的差异产生假阴性。

因为你已经在 setState 回调中改变了你的状态值，所以 React 会认为在执行浅比较时没有任何变化。