React JS 中没有显式的数据绑定答案

【问题标题】：No explicit Data binding in React JSReact JS 中没有显式的数据绑定
【发布时间】：2021-01-19 21:55:08
【问题描述】：

Tom Occhino 在他的演讲中说，“没有显式数据绑定”，尤其是在 React.js 中。

观看演示视频here 并转到他之前所说的 7:30 分钟。

为什么 React JS 中有“无显式数据绑定”？

【问题讨论】：

“显式数据绑定”是什么意思？
我不明白你的意思。如果方法在实例上下文之外使用，至少需要“绑定”，例如事件处理程序。不清楚你在说什么变量。
我不能；除了使用bind“手动”或通过箭头函数来确保正确的this上下文之外，这不是我熟悉的术语。不过，那是 JS，而不仅仅是 React。这就是为什么我问你这是什么意思。
@DaveNewton 例如stackoverflow.com/questions/45490004/…
@JaredSmith 所以“显式绑定”只是双向数据绑定？ IMO“显式绑定”是正交的；方向性似乎是一个不同的概念。 ¯_(ツ)_/¯

【解决方案1】：

首先我要告诉你，这是一个非常古老的视频，如果你正在学习 React，我完全建议你找一个真正的视频，因为从那时起，React 发生了很大的变化。如果您已经知道 react tho，那么很高兴了解它的根源以及它是如何/为什么在幕后以这种方式工作的。

现在，关于“显式数据绑定”。我认为本演示文稿中该术语的重点是将 React 与其他需要“将数据源显式绑定到 dom 节点”以进行双向交互的框架进行比较。也就是说，如果 dom 更改（用户输入）相应地更改数据（更新变量）并且如果数据更改（假设 ajax 调用带来了一些远程数据）相应地更改 dom（更新 dom 节点中的文本）。

在其他框架中你需要用一些代码声明这个绑定，双方的事件都会触发对方的变化。

那么，为什么他会说 react 没有这种绑定，因为您可以看到信息双向流动的相同行为。

嗯，从概念上讲，同样的事情正在发生，任何一端的变化都会引发另一端的变化。但是，如何实现这一点会发生变化。
在反应中，没有一种方法可以在变量发生变化时特别更新一个输入 dom 节点。相反，会触发整个重新渲染，计算将插入 dom 的新标记。此标记（包含 html 的字符串）将具有表示为 value="data" 的新数据的输入，从而改变您在 dom 中可以看到的内容。但是当变量改变时执行的代码与dom节点完全没有关系（它们之间没有绑定）。
反之，当您设置事件侦听器以在输入更改时更改变量时，react 不会将任何事件侦听器绑定到该 dom 节点，而是在最顶部的节点上有一个事件侦听器，以侦听任何更改如果事件源是您感兴趣的输入，则通知您相应的整个 dom 树。但请注意，在您想要听到更改的确切节点中没有事件侦听器，因此在dom 节点和你的代码。

那是说。如果您是 javascript 框架的新手，我认为这并不重要，甚至可能会有点困惑。因此，如果还不清楚这个概念，请不要太努力去理解它，除非您将此行为与您熟悉的另一个框架进行比较。只要继续练习，一旦你写了一些反应表单，上面的解释对你来说就会很自然而明显。

【讨论】：

感谢您提供大量信息。这是一个很好学的答案。我很感激。让我知道我是否从您的回答中理解了足够多的内容。如果任何输入 dom 节点发生变化，React 会重新渲染整个 DOM，这与其他框架不同，它只渲染输入 dom 节点发生变化的那些 dom 节点（显式数据绑定）。这使得 React 不同于其他框架。
嗯，从概念上讲有点。从字面上看，不是真的。在每个渲染上替换整个 dom 将非常昂贵且缓慢。因此，React 内部有算法来智能地决定 dom 中发生了什么变化，并且只替换需要替换的内容。要深入了解这是如何决定的，请阅读 react 的虚拟 dom、React 的渲染和纯组件。
再次感谢，我会继续了解这个概念。