使用没有状态的React

Question

我正在构建应用程序的UI,我正在探索更新UI而不必使用States.以下断言是否粗略正确？

'我们不需要状态,因为当状态内的某些东西发生变化时,它所做的就是在组件上自动调用render方法.我们可以通过在相关组件上调用render方法来实现相同的实现.

我们仍然会实现做出反应的所有相同的好处(虚拟DOM,渲染,画的优化等) "

Answer 1

从技术上讲,您不需要使用React的内部组件状态来构建React应用程序.当然,数据需要住的地方,所以你需要,可以通过所有的数据到顶级组件(在那里将逐步应用到所有其它组件)当数据变化的机制.

这是flux(和许多其他设计用于提供React状态外存储的模式)背后的基本思想.您有一个或多个商店,商店在数据更改时提供更改事件.然后该数据通过道具传递到应用程序.

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

myDataStore.on('change', render);

然而,在实践中,由于JavaScript的工作原理,可能很难做到这一点.像上面这样的代码会使React在每次myDataStore更改时重新呈现整个组件树,并且没有好的shouldComponentUpdate钩子,这可能是性能问题.使用不可变值有助于更轻松地实现好的shouldComponentUpdate方法.

您通常会在使用React外部数据存储的较大React应用程序中看到以下内容的组合:

• 一个或多个"容器"组件,负责从商店获取数据并将其传递给子项.有时将容器放在除组件树顶部之外的其他位置是有意义的(例如,您可能在一个应用程序中有多个容器)
• 可重用/"表示"组件,它们不挂钩到数据存储中,但提供一些其他好处(例如黑盒子样式或交互式小部件).在这些情况下,将任何非特定于应用程序的状态保留在组件本身中通常是有意义的.