Pourquoi ne puis-je pas modifier directement un état du composant, vraiment?

Je comprends que Réagir la documentation et les tutoriels avertir dans des termes sans équivoque que l'état ne doit pas être directement muté et que tout doit passer par setState.

J'aimerais comprendre pourquoi, exactement, je ne peux pas juste changer directement de l'état et ensuite (dans la même fonction) appel this.setState({}) juste pour déclencher la render.

E. g.: Le code ci-dessous semble fonctionner parfaitement:

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;

Je suis tout de même pour les conventions suivantes, mais je voudrais améliorer mon mieux comprendre comment ReactJS fonctionne réellement et ce qui peut aller mal ou est-il sous-optimale avec le code ci-dessus.

Les notes sous le cette.setState de la documentation essentiellement d'identifier les deux pièges:

  1. Que si vous muter état directement et appelez ensuite la this.setState cela peut remplacer (écraser?) la mutation que vous avez fait. Je ne vois pas comment cela peut arriver dans le code ci-dessus.
  2. Que setState peut muter this.state efficacement dans un asynchrone /différé façon et donc, lors de l'accès à this.state droite après l'appel de this.setState vous ne sont pas garantis pour accéder à la finale muté de l'état. - Je que, par ce n'est pas un problème si this.setState est le dernier appel de la fonction de mise à jour.
  • Consultez le notes sous setState de documentation. Il couvre certaines des bonnes raisons.
  • J'ai mis à jour ma question d'examiner également les notes que vous avez mentionné.
  • a part le fait que vous pensez que vous avez le contrôle, vous êtes tout simplement en court-circuitant le cadre du flux de travail. Javascript permet de le faire, il suffit de garder à l'esprit qu'une fois que vous briser le modèle, le cadre n'est pas plus responsable de votre état de cohérence.
  • Ce n'est pas une question de "ne peut" muter état directement, c'est une question de "ne devrait pas".
  • Étrange, cela a été demandé il y a 4 mois et toujours pas de réponse, est-ce une question difficile à répondre ? Je ne peux pas vraiment trouver une réponse à cela à l'aide de google...
  • J'ai posé une question similaire, stackoverflow.com/questions/40213254/...
  • puis il devenir Anuglar1.