我知道React教程和文档毫无疑问地警告说，状态不应该直接变异，所有事情都应该通过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}>inc</button>
                </div>
        );
    }
});

export default App;

我全都遵循以下约定，但我想进一步加深对ReactJS实际工作方式的理解，以及可能出现问题的地方或上述代码的优缺点。

this.setState文档下的注释基本上标识了两个陷阱：

1. 如果您直接更改状态，然后再调用this.setState它，则可能会替换（覆盖？）所做的更改。我看不到上面的代码中如何发生这种情况。
2. 这setState可能会this.state以异步/延迟的方式有效地进行更改，因此，this.state在调用后this.setState立即访问时，不能保证您访问最终的更改状态。我知道，如果this.setState更新功能的最后一次调用不是问题，