在ReactJS中，为什么setState在同步调用时表现不同？

Question

我试图了解某些“魔术”行为的根本原因，但我无法完全解释，而从阅读ReactJS源代码中看不出来。

当setState响应onChange输入中的事件而同步调用该方法时，所有操作均按预期进行。输入的“新”值已经存在，因此DOM实际上并未更新。这是非常理想的，因为这意味着光标不会跳到输入框的末尾。

但是，当运行具有完全相同结构但setState 异步
调用的组件时，输入的“新”值似乎不存在，从而导致ReactJS实际触摸DOM，这将导致光标跳至DOM的末尾。输入。

显然，value在异步情况下有某种干预将输入“重置”回其先前状态，而在同步情况下则没有。这个机械师是什么？

同步示例

var synchronouslyUpdatingComponent =
    React.createFactory(React.createClass({
      getInitialState: function () {
        return {value: "Hello"};
      },

      changeHandler: function (e) {
        this.setState({value: e.target.value});
      },

      render: function () {
        var valueToSet = this.state.value;

        console.log("Rendering...");
        console.log("Setting value:" + valueToSet);
        if(this.isMounted()) {
            console.log("Current value:" + this.getDOMNode().value);
        }

        return React.DOM.input({value: valueToSet,
                                onChange: this.changeHandler});
    }
}));

请注意，代码将登录该render方法，并打印出value实际DOM节点的当前值。

在“ Hello”的两个L之间键入“ X”时，我们看到以下控制台输出，并且光标停留在预期的位置：

Rendering...
Setting value:HelXlo
Current value:HelXlo

异步示例

var asynchronouslyUpdatingComponent =
  React.createFactory(React.createClass({
    getInitialState: function () {
      return {value: "Hello"};
    },

    changeHandler: function (e) {
      var component = this;
      var value = e.target.value;
      window.setTimeout(function() {
        component.setState({value: value});
      });
    },

    render: function () {
      var valueToSet = this.state.value;

      console.log("Rendering...");
      console.log("Setting value:" + valueToSet);
      if(this.isMounted()) {
          console.log("Current value:" + this.getDOMNode().value);
      }

      return React.DOM.input({value: valueToSet,
                              onChange: this.changeHandler});
    }
}));

与上面的内容完全相同，但对的调用setState位于setTimeout回调中。

在这种情况下，在两个L之间键入X将产生以下控制台输出，并且光标跳至输入的末尾：

Rendering...
Setting value:HelXlo
Current value:Hello

为什么是这样？

我了解React的受控组件的概念，因此用户对的更改value被忽略是有意义的。但看起来value实际上已更改，然后显式重置。

显然，调用setState同步确保其生效 之前 复位，同时呼吁setState在其他任何时间发生 后 复位，迫使重新绘制。

这实际上是怎么回事吗？

JS Bin示例

http://jsbin.com/sogunutoyi/1/

Answer 1

这是正在发生的事情。

同步

• 你按X
• input.value是’HelXlo’
• 你打电话 setState({value: 'HelXlo'})
• 虚拟dom表示输入值应为“ HelXlo”
• input.value是’HelXlo’
  • 不采取行动

异步

• 你按X
• input.value是’HelXlo’
• 你什么都不做
• 虚拟DOM表示输入值应为“ Hello”
  • react使input.value为“ Hello”。

稍后的…

• 您 setState({value: 'HelXlo'})
• 虚拟DOM表示输入值应为“ HelXlo”
  • 反应使输入值``HelXlo’‘
  • 浏览器将光标跳到末尾（这是设置.value的副作用）

魔法？

是的，这里有些魔术。在事件处理程序之后，React调用将同步呈现。这是避免闪烁所必需的。