「前端架构」使用React进行应用程序状态管理 React是管理应用程序状态所需的

文章插图
React是管理应用程序状态所需的全部内容
管理状态可以说是任何应用程序中最难的部分。这就是为什么有这么多的状态管理库可用，而且每天都有更多的库出现（甚至有些库是建立在其他库之上的。。。 npm上有数百个“更简单的Redux”的摘要）。尽管状态管理是一个很难解决的问题，但我认为，使之如此困难的一个原因是我们经常过度设计解决问题的方法。
有一个状态管理解决方案，我个人一直在使用React ，随着React钩子的发布（以及对React上下文的大量改进），这种状态管理方法已经大大简化。
我们经常把React组件当作乐高积木来构建我们的应用程序，我想当人们听到这些时，他们会认为这不包括状态方面。我个人解决状态管理问题的方法背后的“秘密”是考虑应用程序的状态如何映射到应用程序的树结构。
redux如此成功的原因之一是react redux解决了支柱钻井问题。事实上，通过简单地将组件传递到某种神奇的connect函数中，就可以在树的不同部分共享数据，这一点非常棒。它对reducer/action creators/etc.的使用也很棒，但我相信redux的普遍存在是因为它解决了开发者的道具钻削痛点。
这就是我只在一个项目中使用redux的原因：我经常看到开发人员把他们所有的状态都放到redux中。不仅是全局应用程序状态，还包括本地状态。这会导致很多问题，尤其是当您维护任何状态交互时，它涉及到与reducer、action creator/type和dispatch调用的交互，这最终导致必须打开许多文件并在头脑中跟踪代码，以确定发生了什么以及它对代码库其余部分的影响。
很明显，对于真正全局的状态来说，这是很好的，但是对于简单状态（比如模态是开放的还是表单输入值状态），这是一个大问题。更糟糕的是，它的规模并不是很好。应用程序越大，这个问题就越难解决。当然，您可以连接不同的reducer来管理应用程序的不同部分，但是间接遍历所有这些action creator和reducer并不是最佳的。
将所有应用程序状态都放在一个对象中也会导致其他问题，即使您没有使用Redux 。当一个反应<提供程序上下文>获取一个新值，使用该值的所有组件都将更新并必须呈现，即使它是只关心部分数据的函数组件。这可能会导致潜在的性能问题。（React reduxv6也尝试使用这种方法，直到他们意识到它不能正确地与hooks一起工作，这迫使他们在v7中使用不同的方法来解决这些问题。）但我的观点是，如果您的状态在逻辑上更为分离，并且位于React树中更靠近它的位置，那么就不会出现这个问题。
这是真正的关键，如果您使用React构建应用程序，那么您的应用程序中已经安装了状态管理库。你甚至不需要npm安装（或纱添加）它。它不需要为用户额外增加字节，它与npm上的所有React包集成，而且React团队已经对它进行了很好的记录。它自己反应。
React是一个状态管理库当您构建React应用程序时，您将组装一组组件，以组成一个组件树，从开始，到、和结束。您不需要在一个中心位置管理应用程序呈现的所有低级复合组件。相反，你让每个单独的组件来管理它，它最终成为构建UI的一种非常有效的方法。你也可以用你的状态来做这件事，而且很可能你今天也会这样做：
function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount(c => c + 1) return {count}}function App() { return }
请注意，我在这里所说的一切也适用于类组件。钩子只是让事情变得简单一点（特别是我们马上要讨论的上下文）。
class Counter extends React.Component { state = {count: 0} increment = () => this.setState(({count}) => ({count: count + 1})) render() { return {this.state.count} }
“好吧， Kent ，在一个组件中管理一个状态元素是很容易的，但是当我需要跨组件共享状态时，您会怎么做？例如，如果我想这样做呢：“
function CountDisplay() { // where does `count` come from? return The current counter count is {count}}function App() { return ( )
“计数是在中管理的，现在我需要一个状态管理库从访问该计数值并在中更新它！”
这个问题的答案和反应本身一样古老（旧？）在我记事的时候，我就在文档里写了很久：提升状态
“提升国家”合法地回答了React中的国家管理问题，这是一个坚如磐石的答案。以下是如何将其应用于这种情况：