background

A few days ago, I wrote a post on how to build a React WebApp using the React Bucket. Then I discovered Mobx. Then settle down and take a look at its documentation. I found it interesting, so I refactored the project with Mobx. The older version was built with the React Family bucket, which is react+ Redux, on github’s old-Verson branch. You can also have a look.

The source address

Portal if you can, I hope you star, give me some encouragement. Thank you ~

Development experience

  • First, Redux is powerful. The idea of a single data stream allows us to decouple data from the UI. To modify the UI, we can only initiate an action to reducer, and reducer produces some new states after a series of operations, which will make the UI updated. However, there is a pain, we need to write too much, we need to write at least one actionType, one actionCreator, one reducer, and of course create a store. If I had an asynchronous operation, I would have to write a little more, which would make my development a bit boring. I don’t know about you guys, but SOMETIMES WHEN I think about writing so much stuff, I get a little undermotivated.
  • Then there is the question of performance optimization. Every react component has a shouldComponentUpdate function, but it always returns true by default. Any time the state and props change, a render occurs. But sometimes you don’t need an update. Although it is possible to introduce immutable js to create JS immutable data, add some judgment in shouldComponentUpdate. But, uh, well, I find it tricky to introduce, and a little hard to insert into an existing project.
  • In the end, MOBx solves both of my problems better. Mobx is easy to write, watch it for an afternoon and start coding. And the original code can be modified relatively quickly. Because the UI is decoupled from the data. All you have to do is make changes in the link between store and UI and Store. Also, if Mobx lets you stop using setState, you can avoid the asynchronous update of setState. Mobx detects the data being observed and rerenders the UI whenever the data changes. Of course, there are a lot of good things that people understand differently. I won’t go into mobx here. After all, I’m only at a useful stage.

The last

And finally, I’ll show you a demo

demo

And, of course, welcome star and Fork portal