Takes on State

React is a bit unique in state management. While it has top-notch tools like useState and Context, you rely more on yourself when it comes to responsive global state. David Ceddia's "React State Management Library and How to Choose" article discusses the various options well. I say it is "maverick" because all other major JavaScript frameworks have their own recognized global state implementations.

In my opinion, the concept of state is crucial for front-end development. It's like a component. It's just a clever way to develop digital products. State is our own abstraction of events happening on the website. It can be whether the sidebar is on or off, a list of comment data, details of logged in users, or anything else we need to draw and make a functional UI.

This is why the concept of native web components not trying to handle state at all still surprise me. I don't have enough knowledge to understand why, but as an observer, I can see developers working hard to find the best way to make state work inside and across web components. Recently, I met Evan You's @vue/lit . This is a miniature framework for web components that solves templates and rerendering problems using lit-html, then combines Vue's responsive state. To me, this looks cool.

Evan's idea reduces the total size of the library used to be about 6kb. So how small can we do here? In the article "Using JavaScript Module System for State Management" written by Krasimir Tsonev, they did not use any libraries at all (it could be said that a small library was created along the way). The state manager can be just a module we import and use, essentially an object containing values, variograms, and listeners. This reduces the overhead of state management to almost zero, but at the cost of abandoning efficient re-rendering, better templates, and lifecycle capabilities that can be obtained with more powerful libraries.

Speaking of not using any libraries at all, Leo Bauza's article "How does Viget use JavaScript?", they introduce the native pattern they use to add functionality on top of HTML. It seems that all functions are applied through data-* attribute, each data attribute has its own JavaScript module (class) to handle that particular function. There does not seem to be a global state process here, but they do handle the state manually within the module.

I found all of these things interesting. In my job, I bet I am fairly typical. If this is a small project, I might do it myself. If it was a medium-sized but less impactful project, I might choose a novel—and maybe even experimental— approach. But once what I do becomes huge and far-reaching, I find it more comfortable to choose from a large player, even if that sometimes means heavier libraries. ?

The above is the detailed content of Takes on State. For more information, please follow other related articles on the PHP Chinese website!