javascript - 在 React 的状态中使用 Set 数据结构

Question

是否可以在React中使用ES6的Set数据结构？

例如，如果我有一个由不同项目组成的 list ，并且我想维护每个项目的选中状态。我想写这样的东西:

export default class Checklist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Set()
    }
  }

  addItem(item) {
    //...?
  }

  removeItem(item) {
    //...?
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

我知道 Set 本质上是可变的，React 在更新组件时执行浅比较，因此它期望传递不可变对象(immutable对象)并将其保存在状态中，这一事实可能存在问题。但是，有没有办法在状态中保存并维护一个Set对象呢？

Answer 1

由于仅当状态属性被替换且未发生突变(浅比较)时，React 才会识别状态更改，因此您必须从旧集合创建一个新集合，并将更改应用于它。

这是可能的，因为new Set(oldSet) !== oldSet。

const oldSet = new Set([1, 2]);
const newSet = new Set(oldSet);

console.log(oldSet === newSet);

<小时/>

如何在类组件中使用 Set:

export default class Checklist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Set()
    }
    
    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addItem(item) {
    this.setState(({ checkedItems }) => ({
      checkedItems: new Set(checkedItems).add(item)
    }));
  }

  removeItem(item) {
    this.setState(({ checkedItems }) => {
      const newChecked = new Set(checkedItems);
      newChecked.delete(item);
      
      return {
       checkedItems: newChecked
      };
    });
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

<小时/>

如何通过 useState() Hook 使用集合。

该示例添加 1-5 之间的随机整数，然后删除相同范围内的随机数。

const { useState } = React;

const Comp = () => {
  const [state, setState] = useState(() => new Set());

  const addItem = item => {
    setState(prev => new Set(prev).add(item));
  }

  const removeItem = item => {
    setState(prev => {
      const next = new Set(prev);

      next.delete(item);

      return next;
    });
  }

  return (
    <div>
      <button onClick={() => addItem(Math.ceil(Math.random() * 5))}>Add</button>
      <button onClick={() => removeItem(Math.ceil(Math.random() * 5))}>Remove</button>
      <div>
        {Array.from(state)}
      </div>
    </div>
  );
}

ReactDOM
  .createRoot(root)
  .render(<Comp />);

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

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