我正在构建应用程序的 UI,并且正在探索无需使用状态即可更新 UI。下面的断言粗略地正确吗?
“我们不需要状态,因为它所做的只是当状态中的某些内容发生变化时自动调用组件上的渲染方法。我们可以通过自己调用相关组件的 render 方法来实现相同的实现。
我们仍然会实现 React 的所有相同优势(虚拟 DOM、渲染、绘画优化等)'
It is 技术上更正您不需要使用 React 的内部组件状态来构建 React 应用程序。当然,数据需要存活某处,因此您需要一种机制,可以在数据更改时将所有数据传递到顶级组件(在那里它将渗透到所有其他组件)。
这是 Flux 背后的基本思想(以及许多其他旨在提供 React 外部状态存储的模式)。你有一个或多个stores当数据发生变化时,商店会提供更改事件。然后该数据通过 props 传递到应用程序中。
function render(data) {
ReactDOM.render(
<Application data={data} />,
containerNode
)
}
myDataStore.on('change', render);
然而,在实践中,由于 JavaScript 的工作方式,很难高效地做到这一点。像上面这样的代码会让 React 每次重新渲染整个组件树myDataStore
改变,并且没有好的shouldComponentUpdate
钩子,这可能是一个性能问题。使用不可变的值有助于更轻松地实现良好的效果shouldComponentUpdate
方法。
在使用 React 外部数据存储的大型 React 应用程序中,您通常会看到以下内容的组合:
- 一个或多个“容器”组件 https://medium.com/@learnreact/container-components-c0e67432e005负责从商店获取数据并将其传递给他们的孩子。有时将容器放在某个地方是有意义的other比组件树的最顶层(例如,一个应用程序中可能有多个容器)
- 可重用/“演示”组件不挂接到数据存储中,但提供一些其他好处(例如黑盒样式或交互式小部件)。在这些情况下,将任何非应用程序特定的状态保留在组件本身内部通常是有意义的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)