Я понимаю, что учебники и документация 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 документация в основном идентифицируем две ошибки:

Что если вы изменяете состояние напрямую, а затем вызываетеthis.setState это может заменить (перезаписать?) мутацию, которую вы сделали. Я не вижу, как это может произойти в приведенном выше коде.ТотsetState может мутироватьthis.state эффективно в асинхронном / отложенном режиме и так при доступеthis.state сразу после звонкаthis.setState вам не гарантирован доступ к окончательному мутированному состоянию. Я понимаю, что это не проблема, еслиthis.setState последний вызов функции обновления.