javascript - ReactJS - 组件外部的全局状态

Question

我一直在阅读和观看有关 Redux 的视频，并看到很多关于在组件中或使用 Redux 管理状态的争论。我没有看到关于使用标准全局变量完全在组件之外管理状态的任何内容。

例如，我可以设置一个全局状态变量，如下所示:

let state = {
   player:  {
       username: "BillyBob",
       score: 100
   }
}

然后在 React 组件中，我可以有这样的东西:

incrementScore() {
    state.player.score += 1
    props.update()
}

然后在 App.js 中，我可以这样:

update() {
    this.forceUpdate()
}

我意识到我仍然需要通过树向下传递更新函数，但我至少能够在组件级别设置函数，而不必担心将多个状态和函数传递给子组件。

我是 React 新手，但我能想到的唯一缺点是无法要求 propTypes。我还有什么遗漏的吗？

编辑:根据我澄清问题的要求，我应该考虑上述实现是否有任何重大缺点，甚至会影响相对简单的应用程序？

Answer 1

如果你看看 redux 的实现或其他一些状态管理库(例如 mobx 或 mobx-state-tree )，基本上它们都将组件外部的状态作为独立对象维护。

但是，为了有效地检测更改并触发重新渲染，他们实现了 HOC，它是 connect在redux和inject在mobx ，HOC(高阶组件)的作用是将您的组件包装在另一个可以访问全局 state 的组件中。 ，并通过组件的 props 传递组件所需的状态部分。这样，组件仅在其所需的数据发生变化时重新渲染。

与这些流行的库方法相比，您提出的解决方案存在一些问题。

第一个是使用 forceUpdate基本上，您最不想做的事情就是调用 forceUpdate在应用程序的根节点上，考虑一下当有人输入输入并且整个应用程序重新渲染每个按键时的场景。

第二个将传递 update如果您只有 1 或 2 个嵌套组件，那么功能会下降到多个子级别，但随着应用程序的增长，这将是一个大问题。随着应用程序的增长和状态变得更加复杂，拥有单个 update 可能不是最好的主意。控制整体的功能state对象。