reactjs - 在 React 中，你可以改变 this.state 但后面跟着一个 this.setState() 吗？

Question

据说we should never mutate this.state ，但我认为这意味着“永远不要直接改变 this.state，而是总是使用 this.setState() 来改变它。

但是，如果我们直接对其进行变异，但在后面加上 this.setState() 会怎样？ ?

以下代码实际上有效。为什么屏幕上的数字会更新(即使是 componentDidUpdate() 也被调用了)——这是运气，不应该依赖？

是否行

this.setState({ numbers: this.state.numbers })

实际上告诉 React numbers被修改，因此，检查任何更新的值？或者 React 应该忽略它，因为如果 React 把它当作 numbers指的是自己，这意味着什么都没有改变。没有 key在列表项中，所以我认为默认是条目的索引用作键。所以键没有改变，意味着列表项没有改变，为什么屏幕上的列表更新了？

仅仅更新一个数组元素，看起来太复杂了。似乎有两种可以接受的方法:

Immutability Helpers

this.setState({ numbers: newNumbersArray })

是否有任何官方文档描述如何完成它，而不是博客文章或 a Stack Overflow question that is full of different opinions ?在 Vue.js 中，似乎 all it takes is numbers.splice() to replace an array element就是这样。

与 this.state后跟一个 this.setState() ，并且没有 key ，我们可以指望它工作吗？

class App extends React.Component {

  state = {
    numbers: [2, 4, 6]
  };

  clickHandler() {
    this.state.numbers[1] = Math.random();
    this.setState({ numbers: this.state.numbers });
  }

  componentDidUpdate() {
    console.log("In componentDidUpdate()");
  }

  render() {
    return (
      <div>
        <ul>{this.state.numbers.map(a => <li>{a}</li>)}</ul>
        <button onClick={this.clickHandler.bind(this)}>Click Me</button>
      </div>
    );
  }

}

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

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

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

Answer 1

简短(但可能不完整)的答案:直接改变状态可能会导致错误，因为您绕过了生命周期过程。你用setState没关系紧接着，因为 setState是异步的，理论上可以允许在您的直接突变和 setState 之间发生其他状态更改。 .实际上，它可能适用于简单的组件，但一旦您的应用程序增长，它可能会变成一场噩梦。

以下是您尝试过的几种方法:

clickHandler() {
  const copy = [...this.state.numbers]; // or this.state.numbers.slice();
  copy[1] = Math.random();
  this.setState({ numbers: copy });
}

选择:

clickHandler() {
  this.setState({ numbers:
    [
      ...this.state.numbers.slice(0, 1),
      Math.random(),
      ...this.state.numbers.slice(2, arr.length)
    ]
  });
}

当然还有更多方法，但仅举几例......