reactjs - React 是如何实现双向数据绑定(bind)的？

Question

我见过examples展示了如何在 React 中实现双向绑定(bind)，但没有解释此功能在内部的实际功能。

在此codepen example摘自 React 网站，如果注释掉第 11 行:

handleChange(event) {
  // this.setState({value: event.target.value});
}

您会注意到，即使在用户直接修改输入框之后，React 如何通过确保 View 不会以与数据模型不一致的方式更新来强制执行 2 向绑定(bind)。但它是如何做到的呢？

鉴于如何event.target.value用户刚刚输入的输入在 handleChange 范围内但在 View 中仍然变为空，这意味着在某个时刻该值已被 React 重置。另外，它并不是简单地将值重置为空，而是根据最新的数据模型，可以通过对代码进行以下更改来测试:

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

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);

  this.counter = 0;
}

handleChange(event) {
  if (this.counter < 3) {
    this.setState({value: event.target.value});
    this.counter++;
  }
}

这一次，输入框前三次发生变化，然后根据上次模型状态重置。

我的猜测如下:

1. HTML 元素根据用户输入进行修改。
2. “onchange”事件处理程序被触发。
3. 状态未更新。
4. 由于状态未更新，React 会将组件的缓存虚拟 DOM 表示与用户刚刚更改的真实 DOM 元素进行比较。
5. React 更新 Real-DOM 元素的属性，使其与其 Virtual-DOM 表示形式保持一致。

如果状态发生改变，那么缓存的 Virtual-DOM 表示就会被“弄脏”，这会触发虚拟元素的重新渲染。然而，我上面描述的流程的其余部分仍然适用，这意味着不会创建新的 HTML 节点，并且只会更新现有节点的属性(假设元素类型，例如 <input> )不改变)。

这是我对此功能的内部机制的最佳猜测。如果我错了，请告诉我，如果错了，问题的真正答案是什么。

谢谢!

Answer 1

这是一个很好的问题，如果有人在我的答案中发现任何错误，我会尽最大努力，请指出它们，我很乐意进行编辑更正。深入研究 React 源代码，我得出的结论是:

1. HTML 被修改并在 DOM 中调用事件

2. React 将事件/合成事件调度放入 EventPropagators.js 内

3. 事件按顺序出队(该事件对状态没有影响)

4. 在事件循环结束时，react 使用 restoreTarget 来恢复受控组件以表示 ReactControlledComponent.js 中的状态。 :

Use to restore controlled state after a change event has fired.

We perform this translation at the end of the event loop so that wealways receive the correct fiber here

这就是奇迹发生的地方。 restoreTarget 是组件的 state，因此 React 此时会触发常规 render() 来重绘 restoreTarget我想它会通过其标准的虚拟 DOM 与真实 DOM 协调算法。

根据您的示例，执行handleChange()(有或没有状态更改)，然后重绘restoreTarget并呈现一个准确表示状态的组件count = 3 的那一刻。