[双语对照]react 状态管理的前世,今生和未来

译者注：

其实这篇文章并没有太多的干货，但是它提供了时间维度的视角让我们去观察状态管理是怎么发展；这段简短的历史可以作为我们选择状态管理的参考资料，也可以作为一个技术雷达帮我们发现一些技术广度上的盲点。

而我自知翻译仓促和语言能力匮乏，所以留下原文供大家参考；如果有更好的翻译建议和批评可以偷偷告诉我。

全文最有价值的部分可能就是未来部分“关于状态管理如何选择”的部分，不想看水文的可以直接划到最下面。

原文地址 https://leerob.io/blog/react-state-management

React was introduced in May 2013. Its paradigm shift was that your UI was a function of your state. Given some component state, React can determine what your component will look like. React is built upon the idea of state. However, state has long been one of the most difficult parts of building a React application.

自2013年5月面世以来，React 给前端带来了新的编程范式：UI 是状态的函数。给定组件一个状态，React 就能决定这个组件的样子。React 就是基于状态的概念来开发的。但是长久以来状态管理是使用 React 开发应用时最头痛的问题。

Let's imagine state management in React as a rugged tool belt. You've used this tool belt for years, slowly adding new tools as needed. Each tool serves a very specific purpose. You don't use your hammer to screw in bolts. As a craftsman, you've learned the right time and place to use each tool.

如果把 React 中状态管理比喻成一个工具箱，里面有一些你已经使用多年的老工具，而且你也会根据不同需要逐渐添加新的工具。每种工具用来解决一个特定的问题。作为代码匠，你知道在不同情况下使用不同工具来解决问题，绝不会用榔头来拧螺丝。

State management with React is a rugged tool belt, but not everyone has the prior experience to know which tool to reach for. This post will explain the past, present, and future of state management to help you make the correct decision for your team, project, or organization.

React的状态管理是一个重要的工具箱，但是并不是每个人都有如何筛选工具的经验。这篇文章就是想和大家厘清状态管理的前世，今生和未来，来帮助大家在团队、项目和组织中选择合适的状态管理工具。

名词解释 Glossary

Before we begin, it's critical you understand some of the terms commonly used. These aren't the canonical names. A few different variations of each float around, but the underlying ideas are the same:

在文章正式开始前，我们先定义下常用的几个名词解释。这些定义并不是专业定义，实际使用的时候也会有些变化，但是背后的概念是一样的。

UI State State used for controlling interactive parts of our application (e.g. dark mode toggle, modals).

UI 状态 - 用来控制如何应用（如主题设置，模态窗口）如何交互的状态。

Server Cache State – State from the server, which we cache on the client side for quick access (e.g. call an API, store the result, use it in multiple places).

远程缓存状态 - 将服务端的状态缓存在客户端，以便方便使用。（比如，调用一个 API，然后将结果保存，然后在各个组件中使用）

Form State The many different states of a form (e.g. loading, submitting, disabled, validation, retrying). There's also controlled & uncontrolled form state.

表单状态 - 表单的各种状态（例如：加载中，提交中，按键不可用，字段校验失败，重试等等），这些状态也分为受控状态和非受控表单状态。

URL State - State managed by the browser (e.g. filter products, saving to query parameters, and refreshing the page to see the same products filtered)

URL 状态 - 由浏览器管理的链接状态（例如：一个过滤功能，将过滤参数存储在 URL 中，这样刷新页面还是能看到相同的列表结果）[译者：其实就是路由状态管理]

State Machine - An explicit model of your state over time (e.g. a stoplight goes from green → yellow → red, but never green → red).

状态机 - 明确定义状态随时间变化的模型，比如红绿灯的状态机：从绿灯-> 黄灯-> 红灯，但是不能直接从绿灯直接变成红灯。

前世 past

React's component model helped create reusable, composable applications. Each component had its own local state. As web apps became more complex, new solutions emerged to more easily share logic between components.

React的组件模型让我们能够构建出可复用、可组合的应用。每个组件都有自己的独立状态。当 Web 应用变得越来越复杂，一些新的管理方案应运而生，来解决组件之间如何方便共享复用逻辑的问题。

时间线

To help you understand how state management has evolved over time, here's a rough timeline of popular state management solutions in React. This list is heavily focused on UI State. This list is not comprehensive, but is enough to give context.

为了帮大家更好地理解状态管理发展的历史，我梳理了React 中状态管理库的流行趋势。这些列表主要是 UI 的状态管理的库，所以不是很全