javascript - 直接修改state然后调用setState是不是更快？

Question

使用 React，我们被告知 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 中的 code> 实际执行。就我而言，我只是向图表添加点，而不是从其他地方删除或修改。

如果我有一个非常大的数组，为什么我不应该采取看似性能更高的路线？

Answer 1

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