时间戳

首页 > 解决方案 > ReactJS - 组件之外的全局状态

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

问题描述

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

例如，我可以像这样设置一个全局状态变量：

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

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

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

然后在 App.js 中，我可以有这个：

update() {
    this.forceUpdate()
}

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

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

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

标签： javascriptreactjsredux

解决方案

如果您查看redux那里的一些其他状态管理库的实现（例如mobxor mobx-state-tree），基本上它们都将组件外部的状态作为独立对象维护。

但是，为了有效地检测更改并触发重新渲染，他们实现了一个 HOC，它connect位于 inredux和injectin 中mobx，HOC（高阶组件）所做的是将您的组件包装在另一个可以访问 global 的组件中state，并传递该部分您的组件通过其道具要求的状态。这样，组件只有在它需要的数据发生变化时才会重新渲染。

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

首先是使用forceUpdate，基本上，您可能想做的最后一件事是调用forceUpdate应用程序的根节点，考虑当有人输入输入并且整个应用程序重新呈现每一次击键时的场景。

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

推荐阅读