Question

使用反应，我们被告知never modify this.state directly and treat it as immutable。这是有道理的。但请考虑这种情况：

export default class Example extends Component {
  constructor() {
    super();

    this.state = {
      largeArray = [values, in, here],
    }
  }

  copyAndAddElement = () => {
    const newState = [ ...this.state.largeArray ];

    newState.push({ something: 'new' });

    this.setState({ largeArray: newState });
  }

  mutateAndSet = () => {
    this.state.largeArray.push({ something: 'new' });

    this.setState({ largeArray: this.state.largeArray });
  }

  render = () => ( JSON.stringify(this.state.largeArray) )
}

也许我只是天真，但为什么不使用mutateAndSet？如果该数组中有大量数据，那么为了修改它而不是需要进行深层复制吗？

我看到的唯一问题可能是setState的异步性质，因为largeArray可能会在setState muateAndSet之前被其他函数修改执行。在我的情况下，我只是在图表中添加点，而不是从其他地方删除或修改。

如果我有一个非常大的阵列，我为什么不采取看似更高效的路线？

Answer 1

由于setState的异步行为，你不应该直接改变状态。如果你经常使用mutateAndSet插入数据，并且一次触发2个setStates，React将不知道哪个是原始数组，并且信息将丢失。

可以更快地直接修改状态然后调用setState吗？

1 个答案: