在没有状态的情况下使用 React

Question

我正在构建一个应用程序的 UI，我正在探索更新 UI 而不必使用状态。以下断言大致正确吗？

'我们不需要状态，因为它所做的只是在状态发生变化时自动调用组件上的渲染方法。我们自己调用相关组件的render方法也可以达到同样的效果。

我们仍然可以获得 React 的所有相同优势（虚拟 DOM、渲染、绘画优化等）'

Answer 1

技术上正确的是您不需要使用 React 的内部组件状态来构建 React 应用程序。当然，数据需要存在于某处，因此您需要一种机制可以将所有数据传递到top-level组件（在那里它会滴入所有其他组件) 当数据改变时。

这是 flux 背后的基本思想（以及许多其他旨在提供 outside-of-React 状态存储的模式）。您有一个或多个商店并且商店在其数据更改时提供更改事件。然后该数据通过 props 传递到应用程序。

function render(data) {
  ReactDOM.render(
    <Application data={data} />,
    containerNode
  )
}

myDataStore.on('change', render);

然而，在实践中，由于 JavaScript 的工作方式，很难高效地执行此操作。像上面这样的代码会使 React re-render 每次 myDataStore 更改时整个组件树，如果没有好的 shouldComponentUpdate 钩子，这可能是一个性能问题。使用不可变值有助于更轻松地实现好的 shouldComponentUpdate 方法。

在使用 outside-of-React 数据存储的大型 React 应用程序中，您通常会看到以下内容的组合：

一个或多个 "container" components 负责从商店获取数据并将其传递给他们的 children。有时将容器放在组件树最顶部 other 的某个位置是有意义的（例如，一个应用程序中可能有多个容器）
可重用/"presentational" 不挂接到数据存储但提供一些其他好处（例如黑盒样式或交互式小部件）的组件。在这些情况下，将任何 non-application-specific 状态保留在组件本身内通常是有意义的。

在没有状态的情况下使用 React

Using React without States

javascript

optimization

dom

state

reactjs