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

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

例如，我可以设置如下全局状态变量：

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

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

然后在React组件中，我可以有如下内容：

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

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

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

update() {
    this.forceUpdate()
}

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

我是个新手，但我能想到的唯一缺点是不能要求道具类型。我还缺什么吗

---

编辑：根据我澄清问题的请求，我是否应该考虑上述实现是否存在任何可能影响相对简单的应用程序的主要缺点？

坚持redux，不要让自己的事情复杂化：）

坚持redux，不要让事情复杂化：）

如果您查看

redux

或其他一些状态管理库的实现（例如

mobx

或

mobx状态树

），基本上所有这些库都将组件外部的状态作为一个独立对象进行维护

然而，为了有效地检测更改并触发重新渲染，他们实现了一个HOC，它是

redux

中的

connect

和

inject

在

mobx

中，HOC（高阶组件）所做的是将您的组件包装到另一个可以访问全局

状态的组件中，并通过组件的道具传递组件所需的状态部分。这样，组件仅在其所需的数据更改时重新渲染

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

第一种是使用
forceUpdate
，基本上，你最不想做的事情就是在你的应用程序的根节点上调用
forceUpdate
，想想有人输入一个输入，然后整个应用程序重新呈现每一次击键的场景

第二个是将一个
update
函数向下传递给多个级别的子级，如果您只有一个或两个嵌套组件就可以了，但如果您的应用程序增长，这将是一个大问题。随着应用程序的增长和状态变得越来越复杂，使用一个
update
函数来控制整个
state
对象可能不是最好的主意。
如果您查看
redux
或其他一些状态管理库的实现（例如
mobx
或
mobx状态树
），它们基本上都将组件外部的状态作为独立对象进行维护

然而，为了有效地检测更改并触发重新渲染，他们实现了一个HOC，它是
redux
中的
connect
和
inject
中的
mobx
，HOC是什么（高阶组件）方法是将您的组件包装在另一个可以访问全局
状态的组件中，并通过其道具传递组件所需的部分状态。这样，组件仅在其所需的数据更改时重新呈现

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

第一种是使用
forceUpdate
，基本上，你最不想做的事情就是在你的应用程序的根节点上调用
forceUpdate
，想想有人输入一个输入，然后整个应用程序重新呈现每一次击键的场景

第二个是将
update
函数向下传递给多个级别的子级，如果您只有1或2个嵌套组件就可以了，但随着应用程序的增长，这将是一个大问题。随着应用程序的增长和您的状态变得更加复杂，使用单个
update
函数来控制ole
状态
对象。
React的存在是为了解决创建一个用户界面的问题，该用户界面由几个独立的部分组成，这些部分可以并行开发，并且可以无缝地相互交互

如果要使用全局名称空间定义状态，则要绕过React的大多数关键功能，例如：

1.生命周期方法

2.虚拟DOM

3.受控部件

4.渲染优化

简言之，您最终将承担运行React的所有间接成本，同时失去它的好处

学习一个新的框架或范式的“窍门”是理解如何定义问题，使其通向阻力最小的路径。这可以通过引入约束，然后在该约束内解决问题来实现

通过使用普通JavaScript进行状态管理，您并没有给React和Redux一个公平的机会。
React的存在是为了解决创建一个用户界面的问题，该界面由几个独立的部分组成，这些部分可以并行开发，并且可以无缝地相互交互

如果要使用全局名称空间定义状态，则要绕过React的大多数关键功能，例如：

1.生命周期方法

2.虚拟DOM

3.受控部件

4.渲染优化

简言之，您最终将承担运行React的所有间接成本，同时失去它的好处

学习一个新的框架或范式的“窍门”是理解如何定义问题，使其通向阻力最小的路径。这可以通过引入约束，然后在该约束内解决问题来实现

通过在statema中使用香草JavaScript