javascript - 为什么我不能直接修改组件的状态，真的吗？

Question

我知道 React 教程和文档在 no uncertain terms 中发出警告该状态不应该直接改变，一切都应该通过 setState .
我想明白为什么我不能直接改变状态然后(在同一个函数中)调用 this.setState({})只是为了触发 render .
例如:下面的代码似乎工作得很好:

const React = require('react');

const App = React.createClass({
  getInitialState: function() {
    return {
      some: {
        rather: {
          deeply: {
            embedded: {
              stuff: 1,
            },
          },
        },
      },
    },
  };
  updateCounter: function () {
    this.state.some.rather.deeply.embedded.stuff++;
    this.setState({}); // just to trigger the render ...
  },
  render: function() {
    return (
      <div>
        Counter value: {this.state.some.rather.deeply.embedded.stuff}
        <br></br>
        <button onClick={this.updateCounter}>Increment</button>
      </div>
    );
  },
});

export default App;

我完全支持遵循约定，但我想进一步了解 ReactJS 的实际工作方式以及可能出错的地方，或者上面的代码是否不是最理想的。
this.setState documentation下的注释基本上确定两个问题:

如果你直接改变状态然后随后调用 this.setState这可能会替换(覆盖？)您所做的突变。我在上面的代码中看不到这种情况是如何发生的。

那个setState可能会变异 this.state以异步/延迟方式有效地访问 this.state拨打电话后立即this.setState您不能保证访问最终的变异状态。我明白了，如果 this.setState，这不是问题是更新函数的最后一次调用。

Answer 1

The React docs for setState 有话要说:

NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate(). If mutable objects are being used and the logic cannot be implemented in shouldComponentUpdate(), calling setState() only when the new state differs from the previous state will avoid unnecessary re-renders.

基本上，如果你修改 this.state直接，您会创建一种情况，这些修改可能会被覆盖。

与您的扩展问题 1) 和 2) 相关， setState()不是立即的。它根据它认为正在发生的事情对状态转换进行排队，这可能不包括对 this.state 的直接更改。 .由于它是排队而不是立即应用，因此完全有可能在两者之间修改某些内容，从而覆盖您的直接更改。

如果不出意外，您最好考虑不直接修改 this.state可以看作是一种很好的做法。您可能个人知道您的代码与 React 交互的方式不会发生这些覆盖或其他问题，但是您正在创造一种情况，其他开发人员或 future 的更新可能会突然发现自己遇到奇怪或微妙的问题。