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

Question

我正在尝试了解某些 "magical" 行为的根本原因，我发现我无法完全解释，并且阅读 ReactJS 源代码时并不明显。

当同步调用 setState 方法以响应输入上的 onChange 事件时，一切都按预期进行。输入的 "new" 值已经存在，因此 DOM 实际上并未更新。这是非常可取的，因为这意味着光标不会跳到输入框的末尾。

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

显然，在异步情况下，某些东西正在干预 "reset" 将输入返回到其先前的 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方法中登录，打印出实际DOM节点的当前value。

在 "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 的 Controlled Component 概念，因此忽略用户对 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'
- 反应使 input.value 'Hello'.

稍后...

你setState({value: 'HelXlo'})
虚拟DOM表示输入值应该是'HelXlo'
- 反应使 input.value 'HelXlo'
- 浏览器将光标跳到末尾（这是设置 .value 的副作用）

魔法？

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

Answer 2

这不完全是一个答案，而是一种缓解问题的可能方法。它为 React 输入定义了一个包装器，通过本地状态 shim 同步管理值更新；并对传出值进行版本化，以便仅应用从异步处理返回的最新值。

它基于 Stephen Sugden (https://github.com/grncdr) 的一些工作，我针对现代 React 进行了更新，并通过对值进行版本控制进行了改进，从而消除了竞争条件。

不美:)

http://jsfiddle.net/yrmmbjm1/1/

var AsyncInput = asyncInput('input');

以下是组件需要如何使用它：

var AI = asyncInput('input');

var Test = React.createClass({
    // the controlling component must track
    // the version
    change: function(e, i) {
      var v = e.target.value;
      setTimeout(function() {
        this.setState({v: v, i: i});
      }.bind(this), Math.floor(Math.random() * 100 + 50));
    },
    getInitialState: function() { return {v: ''}; },
    render: function() {
      {/* and pass it down to the controlled input, yuck */}
      return <AI value={this.state.v} i={this.state.i} onChange={this.change} />
    }
});
React.render(<Test />, document.body);

这里有另一个版本试图减少对控制组件代码的影响：

http://jsfiddle.net/yrmmbjm1/4/

最终看起来像：

var AI = asyncInput('input');

var Test = React.createClass({
    // the controlling component must send versionedValues
    // back down to the input
    change: function(e) {
      var v = e.target.value;
      var f = e.valueFactory;
      setTimeout(function() {
        this.setState({v: f(v)});
      }.bind(this), Math.floor(Math.random() * 100 + 50));
    },
    getInitialState: function() { return {v: ''}; },
    render: function() {
      {/* and pass it down to the controlled input, yuck */}
      return <AI value={this.state.v} onChange={this.change} />
    }
});
React.render(<Test />, document.body);

¯\_(ツ)_/¯

Answer 3

使用 defaultValue 而不是 value 为我解决了这个问题。我不确定这是否是最佳解决方案，例如：

发件人：

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

收件人：

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

JS Bin 示例

http://jsbin.com/xusefuyucu/edit?js,output

Answer 4

如前所述，这将是使用受控组件时的一个问题，因为 React 正在更新输入的值，而不是相反（React 拦截更改请求并更新其状态以匹配）。

FakeRainBrigand 的回答很好，但我注意到，更新是同步的还是异步的并不完全是导致输入以这种方式运行的原因。如果您正在同步执行某些操作，例如应用掩码来修改返回值，它也可能导致光标跳到行尾。不幸的是（？）这就是 React 在受控输入方面的工作方式。但它可以手动解决。

有一个 great explanation and discussion of this on the react github issues, which includes a link to a JSBin solution by Sophie Alpert [手动确保光标保持在应有的位置]

这是使用 <Input> 组件实现的，如下所示：

var Input = React.createClass({
  render: function() {
    return <input ref="root" {...this.props} value={undefined} />;
  },
  componentDidUpdate: function(prevProps) {
    var node = React.findDOMNode(this);
    var oldLength = node.value.length;
    var oldIdx = node.selectionStart;
    node.value = this.props.value;
    var newIdx = Math.max(0, node.value.length - oldLength + oldIdx);
    node.selectionStart = node.selectionEnd = newIdx;
  },
});

Answer 5

我在使用 Reflux 时遇到了同样的问题。状态存储在 React 组件之外，这与将 setState 包装在 setTimeout.

内产生类似的效果

@dule 建议，我们应该让我们的状态改变同时同步和异步。所以我准备了一个 HOC 来确保值的变化是同步的——所以包装遭受异步状态变化的输入是很酷的。

注意：此 HOC 仅适用于具有类似于 <input/> API 的组件，但我想如果有的话，让它更通用是很简单的这样的需要。

import React from 'react';
import debounce from 'debounce';

/**
 * The HOC solves a problem with cursor being moved to the end of input while typing.
 * This happens in case of controlled component, when setState part is executed asynchronously.
 * @param {string|React.Component} Component
 * @returns {SynchronousValueChanger}
 */
const synchronousValueChangerHOC = function(Component) {
    class SynchronousValueChanger extends React.Component {

        static propTypes = {
            onChange: React.PropTypes.func,
            value: React.PropTypes.string
        };

        constructor(props) {
            super(props);
            this.state = {
                value: props.value
            };
        }

        propagateOnChange = debounce(e => {
            this.props.onChange(e);
        }, onChangePropagationDelay);

        onChange = (e) => {
            this.setState({value: e.target.value});
            e.persist();
            this.propagateOnChange(e);
        };

        componentWillReceiveProps(nextProps) {
            if (nextProps.value !== this.state.value) {
                this.setState({value: nextProps.value});
            }
        }

        render() {
            return <Component {...this.props} value={this.state.value} onChange={this.onChange}/>;
        }
    }

    return SynchronousValueChanger;
};

export default synchronousValueChangerHOC;

const onChangePropagationDelay = 250;

然后可以这样使用：

const InputWithSynchronousValueChange = synchronousValueChangerHOC('input');

通过将其设为 HOC，我们可以让它适用于输入、文本区域，也可能适用于其他方面。也许这个名字不是最好的，所以如果你们有任何改进的建议，请告诉我:)

有一个反跳的 hack，因为有时，当输入非常快时，错误会再次出现。

Answer 6

我们有类似的问题，在我们的例子中，我们必须使用异步状态更新。

所以我们使用默认值，和将 key 参数添加到与输入反映的模型关联的输入中。这确保对于任何模型，输入将保持与模型同步，但如果实际模型更改将强制生成新输入。

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

In ReactJS, why does `setState` behave differently when called synchronously?

javascript

reactjs

同步

异步

魔法？