"单一事实来源"是什么意思？
Whi*_*gon 6 javascript reactjs
我读过这篇文章.在"受控组件"部分中,有一句话:
我们可以通过使React状态成为"单一事实来源"来将两者结合起来.
"单一事实来源"是什么意思？
xs0*_*xs0 10
通常，在 HTML + JS 中， 的状态/值<input>是由浏览器控制的，而不是 javascript。如果您还在 javascript 中保留此类输入的值（出于任何原因），则意味着至少有“两个事实来源”——浏览器认为该值是什么，以及您的代码认为该值是什么。
使用 React “受控组件”，这两个状态/值始终匹配，因为 React 始终确保浏览器的 ( <input>'s) 值等于您从 javascript 提供的值（使用value属性），因此有效地，只有一个“真相之源”离开..
特别是在您链接的文章中,它讨论了"受控"和"不受控制"的组件.
基本上,当您想要实现"单一事实来源"时,您希望使组件可控制.
默认情况下,输入字段不可控,这意味着它将从DOM呈现数据,而不是状态.
但是,如果您使输入听取状态(因此使其可控),除非您更改状态,否则它将无法更改其值.
你会注意到的第一个效果是,一旦你为它添加了value属性,当你输入时,什么都不会改变.如果你添加onChange改变状态的方法,它将是只能听一个事实来源的完全可控组件; state,而不是DOM事件.
-
这也与单向数据绑定有关.这意味着只有一个地方代表应用程序状态,您的UI会监听它.只有当这个地方的数据发生变化时,听力界面才会发生变化.
-
这也许有用:https://redux.js.org/docs/basics/DataFlow.html
在React-Redux应用程序中,当您的Redux是单一事实来源时,这意味着在UI中更改数据的唯一方法是调度redux操作,这将改变redux reducer中的状态.而你的React组件会观察这个减速器,如果减速器发生变化,那么UI也会自行改变.但从来没有其他方式,因为Redux状态是单一的事实来源.
这就是它在Redux世界中的样子:
一个实际的例子是你有Redux商店,其中包含你想要显示的项目.要更改要显示的项目列表,不要在store以外的任何其他位置更改此数据.如果改变了,那么与之相关的其他一切也应该改变.