我正在构建应用程序的 UI，并且正在探索无需使用状态即可更新 UI。以下断言是否粗略正确？
'我们不需要状态，因为它所做的就是在状态中的某些内容发生变化时自动调用组件上的渲染方法。我们可以通过自己调用相关组件上的 render 方法来实现相同的实现。
我们仍然会获得 React 的所有相同好处（虚拟 DOM、渲染、绘画优化等） '
在没有状态的情况下使用 React
IT技术
javascript
dom
optimization
reactjs
state
2021-04-29 22:40:29
1个回答
从技术上讲，您不需要使用 React 的内部组件状态来构建 React 应用程序是正确的。当然，数据需要存在于某处，因此您需要一种机制，当数据发生变化时，可以将所有数据传递到顶级组件（它将向下传输到所有其他组件）。
这是flux（以及许多其他旨在提供react外状态存储的模式）背后的基本思想。您有一个或多个存储，并且存储在其数据更改时提供更改事件。然后这些数据通过 props 传递到应用程序中。
function render(data) {
ReactDOM.render(
<Application data={data} />,
containerNode
)
}
myDataStore.on('change', render);
然而，在实践中，由于 JavaScript 的工作方式，很难高效地做到这一点。像上面这样的代码会使 React 在每次myDataStore更改时重新渲染整个组件树，如果没有好的shouldComponentUpdate钩子，这可能是一个性能问题。使用不可变值有助于更容易地实现好的shouldComponentUpdate方法。
您通常会在使用外部 React 数据存储的大型 React 应用程序中看到以下内容的组合：
- 一个或多个“容器”组件，负责从存储中获取数据并将其传递给其子组件。有时，它是有道理的容器放在某处其他比组件树的最顶端（例如，你可以有一个应用程序中几个容器）
- 可重用/“展示性”组件不挂钩到数据存储，但提供一些其他好处（例如黑盒样式或交互式小部件）。在这些情况下，将任何非特定于应用程序的状态保留在组件本身内通常是有意义的。