Question

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

例如，如果我有一个由不同项组成的清单，我想保持每个项目的检查状态。我想写这样的东西：

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在更新组件时会执行浅层比较，所以它期望不可变对象在状态下传递和保持。但是，有没有办法在状态中保持和维护一个Set对象？

Answer 1

由于只有在状态属性被替换且没有变异（浅比较）时，react才会识别状态更改，因此您必须从旧的Set创建一个新的Set，并将更改应用于它。

这是可能的，因为新的Set（oldSet）！== oldSet。

import random
import time

print("Anfangs Buchstaben immer groß schreiben!")

time.sleep(2)

outcomes2 = ("Stein")

Runde = 0

while True:

 Player = input("Deine Wahl: ")

 for i in range(1):
    outcomes = print(random.choice(outcomes2))

 if outcomes == Player:
    print("draw")
    Runde + 1
    continue

这就是你在班上使用它的方式：

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

Answer 2

state只是一个常见的对象，你可以随心所欲地拥有它。您可以覆盖shouldComponentUpdate生命周期方法以自行实现它。您可以使用自己的逻辑来确定组件是否需要更新。您甚至不需要嵌套您的集合，您可以直接将其设置为state：

this.state = new Set();

在React状态下使用Set数据结构

2 个答案: