Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about how to analyze React state management, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

What is the essence of state management

The discussion of React state management scheme in the community has never stopped, especially since the birth of Hooks, a variety of "novel" state management solutions have emerged one after another. In order to look at this problem more rationally, we might as well forget those specific frameworks / libraries and talk about what "state management" at the abstract level means.

❝

It is very difficult to define something abstract. For example, when we discuss "what is a book", some people may think that a book is a printed book made of paper, but some people think that a handwritten manuscript can also be regarded as a book. and some people will think that a collection of words in electronic products can also be regarded as a book in a broad sense. The definition of the concept of empty talk is meaningless, and the boundaries of many concepts are vague. instead of wasting time fighting for a "boundary" that we all agree on, it is better to find a rough definition first. after all, we just want to use the discussion of the definition to reflect on reality.

❞

In my personal opinion, state management has two main functions:

"sharing of data"

In React applications, it is not easy to share some data gracefully among components, and various state management tools have given their own standard scheme for "data sharing"logical organization".

State is not only the stacking of data items, but also the organization of the logic between data items and the interaction logic between data and other system modules. for example, A needs to change when the user clicks the button. B needs to change when A changes (it may be synchronous or asynchronous)

I don't know if this is the original intention of redux or mobx, but this is really my "pain point requirement" for state management tools.

So next, we might as well discuss these two aspects respectively:

Data sharing: local or global?

Since you want to share data, the simplest and most crude solution is to make it "global" directly (as redux does), so many people have gradually formed a perception that there are two kinds of states in React applications, one is this.state / useState, the other is global (global). However, the antonym of "internal state" is never "global state", but "shared state". The overall situation is only a way of sharing and cannot become itself.

At present, there are two reliable ways to share state among components, one is the "global state sharing" just mentioned, and the other, which I prefer, is "local state sharing". React provides a very simple and easy-to-use Context API for sharing data in a component tree, and the idea of local state sharing roughly comes from this, sharing data within a component tree rather than the entire application.

But what good can it do?

"autonomy"

A component tree can close the logic, reduce the global dependence and interference, and even be very beneficial to the encapsulation of components.

The state of local sharing can also have the ability of multiple instances like components (trees), which can break the "life cycle" of global singletons on many logical scenarios.

The local state follows the creation and destruction of the component tree, clean and easy to maintain. The most common scenario is to keep the life cycle of the shared state synchronized with the life cycle of the page.

Of course, there are voices of opposition:

"not standard enough"

The local state is flying everywhere, which is easy to change the logic, and troubleshooting problems will also become very difficult. "it requires a certain cognitive cost."

The local state is not as intuitive as the global state, although it is flexible, it also increases the cost of use.

In fact, it is not difficult to find that the "local" in the local state can be large or small, whether it is wrapped around a component (although no one will really write code like this), or wrapped around the entire application, it can be called "local". Therefore, accurately speaking, the global state is only a "subset" and a "special case" of the local state. The mode of local state is only to get rid of the shackles, not mutually exclusive with the global state.

Logical organization: what exactly has Hooks changed?

I think the real pain point in state management is how the "logic attached to data" is organized, while Hooks provides a complete set of management logic solutions, from state to side effects to performance optimization to asynchronism.

In the past, the logical organization ability of the internal state of the component was very weak, so many people turned to pulling the state externally (such as redux), because the external state manager could better organize the business logic. Even more extreme, an attempt is made to place the entire application state in the redux, while state retention is not allowed within the React component.

But the birth of Hooks has greatly improved the logical organization ability of the internal state of the component, which I think is as good as or even stronger than the flux pattern. If we can organize all the internal and shared states of the component in Hooks, we no longer need to worry about where a piece of data should be stored, because we only need to care about one thing: who needs this data? Is it just this component itself, or is it between multiple components?

Hooks is not born for state management, but it can profoundly change the whole ecology. Just like smartphones are not made for shopping, but they can subvert people's consumption and lifestyle.

Do we really need state management?

The reason why state management has been specially emphasized by people, to some extent, is precisely because it is out of place and needs to be studied alone and paid special attention to. If you make a bold guess, I would think that in the near future, the word "state management", which we were keen to discuss, will more mean "state sharing" or even disappear. The state composition of a React application will also change from "states within components + states in the state manager" to "states within components + shared states between components".

After reading the above, do you have any further understanding of how to parse React state management? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.