Mobx-react

This article is the fifth in the Mobx source code interpretation series

This series uses the newer mobx version, V5.13.0

Mobx source code interpretation issue, welcome to discuss

Technical premises

Before reading, you are expected to have some knowledge or practice of the following techniques, otherwise it may affect your understanding of this article

  1. ES6 decorator: decorator

  2. ES6 proxy: proxy

  3. ES6 Reflect: Reflect

  4. Define Object attributes: Object.defineProperty

  5. Implement the simple observer mode

  6. Implementing a simplified VERSION of MVVM (optional)

To prepare

The purpose of,

  1. This article is the last of the mobx source code interpretation series, a short five articles, the entire MOBx can only speak about the general, source code enthusiasts please dig deep treasure

  2. Last post on Mobx-React: don’t make it easy to connect Mobx to React since hooks were introduced in React

  3. Mobx-react 6 works with Mobx-React lite to handle function Components

Second, the feed

  1. How did Autorun bury a hole in reaction

  2. In fact, the most direct answer is: view function execution result, other places (library) also need to use

On the source code

A response to MOBx: Observer

Start with Mox-React-Lite

  1. Observer of the function component

The baseComponent component is passed in an Observer, and a layer is wrapped with useObserver and returned

So the core of the link function component is: useObserver

  1. useObserver

UseForceUpdate: reexecutes the function component using hooks. This. ForceUpdate: reexecutes the function component using hooks

The new Reaction and onInvalidate pass is forceUpdate, and the track is executed in useObserver, which calls fn (view) and render each time. Reaction collects dependent Observables from components and returns their values for view rendering

Use closures to render the FN rendering return for React

On the other hand, an Observable that a component depends on triggers onInvalidate (forceUpdate), which walks through the function component to bind a new dependency

So why not pass the view directly in the Reaction constructor, because fn will execute react and render will be rendered by state, so you can’t rely on Mobx to execute the view for you

All MOBx has to do is notify re-rendering, i.e. call forceUpdate, which is our original understanding of Mobx-React

When data changes, onInvalidate calls track, and track calls view to collect dependencies and update views. To put it bluntly, Autorun does not have the ability to re-execute Autorun like forceUpdate

  1. useForceUpdate

It is useState, which hooks should have guessed

Create a useState and return setTick to forceUpdate every time you execute setTick

UseUnmount is easier, no more

  1. Use: Observer as component

Use the useObserver package to get children

Connect the class component

The Mobx-React project handles the class component in the same way.

  • ForceUpdate is passed in the Reaction constructor

  • When track is called, the view is executed and the result is returned to React using the closure

  1. observer class

Check whether it is the forwardRef function first and connect it with the Observer component mentioned above

The mox-React-Lite export observer can be used for normal function components

  1. makeClassComponentObserver

Simply hijack props and State to get the GET and set agents and submit reportObserved and reportChanged (see Article 3)

Then get the baseRender and pass in makeComponentReactive

ComponentWillUnmount was also overwritten to call reaction. Dispose

  1. makeComponentReactive

No more talking. Look at the picture

The last

  1. Annotated mobx source code

  2. Welcome to discuss in the Mobx source code Interpretation issue

  3. Recommended: Minbx: Mini Mobx for learning to use, welcome pr: Minbx project address

  4. Code word is not easy, like to remember ❤️ oh

Ps: The whole series is over. Those who have been paying for a long time should give a thumbs-up and leave a comment

PPS: I wish you all the best. If you have any questions, please see ~~