react状态管理_React状态及其管理方法

react状态管理

If you like videos better and articles there’s the corresponding video for this article. It’s my first video so do give feedback even if it’s shit :)

如果您更喜欢视频和文章，那么这里有相应的视频。 这是我的第一个视频，所以即使它很烂也要提供反馈：)

什么是国家？ (What is State?)

I’ll like to talk about how to understand state in a way that helps you make more informed decisions about managing it.

我想谈谈如何以一种可以帮助您做出更明智的管理决定的方式来理解状态。

State in reactive programming is data that dictates the configuration of the application in any moment in time.

React式编程中的状态是指示应用程序在任何时刻的配置的数据。

In simpler words, any part of the application that is subject to change has some associated data that changes it; that data is called a state. Now, this is where people stop, learn about state, and then after learning redux put everything inside redux global state. In order to understand how to better manage state, we need to know how many types of state there can be. I like to classify state in two ways and then choose the technologies that are best suited for managing those kinds of state.

简而言之，应用程序中任何可能更改的部分都有一些相关联的数据可以对其进行更改。 该数据称为状态。 现在，这是人们停下来了解状态的地方，然后在学习redux之后将所有内容放入redux全局状态。 为了了解如何更好地管理状态，我们需要知道可以有多少种状态。 我喜欢用两种方式对状态进行分类，然后选择最适合管理此类状态的技术。

根据产地分类 (Classification based on origin)

Wherefrom the state originates is an important thing to consider and can be classified into:

国家起源是一个重要的考虑因素，可以分为以下几类：

Client-side state: Any data that is generated and consumed on the client-side like UI state can be put into this category. The general rule of thumb while managing this sort of state is to see how far the components consuming it are in the component tree. We will talk about this sort of classification a bit later. A good practice to follow if you are unsure of managing this is start with local state and you if other components need it too, you can start lifting the state up the tree. Note: Never put UI state in the cache.

客户端状态：在客户端生成和使用的任何数据(如UI状态)都可以归入此类别。 管理此类状态的一般经验法则是查看消耗该状态的组件在组件树中的距离。 稍后我们将讨论这种分类。 如果不确定如何管理此问题，可以遵循的一个好习惯是从本地状态开始，如果其他组件也需要它，则可以开始将状态提升到树上。 注意：切勿将UI状态放入缓存中。

Server-side state: This is not be confused by the state that is managed between the server and the database. This state is essentially any data that is requested by the client from the server via REST/GraphQL APIs. This kind of data is not originated in the client and hence requires special treatment. We would not like to re-fetch this data from the server continuously and would like to cache it. Now if you are an expert you can certainly do it yourself with Redux/Mobx/Recoil and your own caching mechanism. But there are libraries out there that are better suited for this job, like ReactQuery/SWR if you are using REST, or Apollo if you are using GraphQL. These libraries are specialized to handle these kinds of state and optimally caches it.

服务器端状态：这不会与服务器和数据库之间管理的状态混淆。 此状态实质上是客户端通过REST / GraphQL API从服务器请求的任何数据。 此类数据不是源于客户端，因此需要特殊处理。 我们不希望连续地从服务器重新获取此数据，而是要对其进行缓存。 现在，如果您是专家，您当然可以使用Redux / Mobx / Recoil和您自己的缓存机制来自己做。 但是有一些库更适合此工作，例如，如果您使用的是REST，则为ReactQuery / SWR；如果您使用的是GraphQL，则为Apollo。 这些库专门处理这些状态并对其进行最佳缓存。

基于距离的分类 (Classification based on distance)

Now, this is something every developer at some point and another makes a mistake in. I too was guilty in putting everything in the global state. It’ll create unnecessary files, folder and boilerplate for simple things like updating a counter that is used in a single component. You’ll generally want to keep the data close to where you are consuming it. Now that we all agree redux is bad (JK :P) let’s move on to classifying it.

现在，这是每个开发人员在某个时候都犯下的错误，另一个错误。我对将所有内容置于全球状态也感到内gui。 它将创建不必要的文件，文件夹和样板，以完成诸如更新单个组件中使用的计数器之类的简单操作。 通常，您通常希望将数据保持在使用位置附近。 现在我们都同意redux不好(JK：P)，让我们继续对其进行分类。

地方政府 (Local State)

This will be the state that you’ll need and use the most. It’s generally the state that is required by one component and is very easy to handle.

这将是您最需要和最常使用的状态。 通常，这是一个组件所要求的状态，并且非常容易处理。

Counter using the state 计数器

Here we have the Counter component using a count state variable whose value is 5. In order to update/change the value, we’ll use two methods; one using the useState hook and another using useReducer.

在这里，我们有一个Counter组件，它使用一个值为5的count状态变量。为了更新/更改该值，我们将使用两种方法： 一个使用useState挂钩，另一个使用useReducer。

N

ñ

Example using useState:

使用useState的示例：

Link to code in the playground: