React Update process

The React version introduced here is 16.x.

React is a data Immutable app, which is designed to discover and update itself via re-render rather than by collecting dependencies. React is a way to teach immutability by saying it is a local way. It is important to remember immutability when reacting.

React requires us to update data using setState and setXXX (value) of useState in hook to trigger the update.

The React update process is as follows:

SetState -> re-render (beginWork recursion & completeWork return) -> commit -> before mutation -> mutation -> layout

In the above process, beginWork and completeWork are not in order, please see the picture below (the picture is from Teacher Ka’s React technology reveal) :

There are a lot of knowledge points like Fiber, life cycle trigger, data update, etc., but I won’t go into details here.

Vue update process

Vue is best known for its responsive updates. With the template to eat, let a person can not help issuing: really fragrant!

The version of Vue described here is 2.x.

As you can see from the diagram, Vue triggers the dependency collection by firing the getter for Data through the first render operation, creating watcher for the corresponding Data, and notifys each Watcher when the Data changes, that is, when the setter is fired. On the next tick, the data is updated. For a more detailed knowledge of how data binding works, you can look at data binding from a source point of view here. MarkDown.

It is important to note here that Vue triggers Data dependency collection by rendering, which means that updating Data that is not used in the template will not trigger the update.

<template>
	<p>
    {{txtA}}
  </p>	
	<p>
    {{+new Date()}}
  </p>	
	<div @click="changeA">
   	changeA
  </div>
	<div @click="changeB">
   	changeB
  </div>
</template>

<script>
	export default {
    data() {
      return {
        txtA: 'hello',
        txtB: 'hi'
      }
    },
    methods: {
      changeA() {
        console.log('changeA~');
        this.txtA = 'world';
      },
      changeB() {
        console.log('changeB~');
        this.txtB = 'guy';
      }
    }
  }
</script>
Copy the code

As shown in the code above, when txtA is assigned a new value, the timestamp of the page will change, but when txtB is assigned a new value, the timestamp will not change, that is, the update is not triggered.

Ideally, however, a variable that is not used in the template should not update the view when its value changes.

Add to the Vue initialization and update process:

The initial process

// Initialize props, methods, data, computed, and watch
initState(vm) 
Copy the code

Template -> parse -> (AST) -> optimize -> generate -> (vNode) -> Patch -> map to the real DOM

Update process

Watcher -> vNode -> Patch -> Map to the real DOM

React vs Vue

React and Vue update processes React and Vue update processes React and Vue update processes React and Vue update processes

  1. The means of obtaining data updates and the granularity of updates are different
    • VueWith dependency collection, when the data is updated,VueKnowing exactly what data was updated,Each component has its own rendering Watcher, which handles view updates for the current component, so the corresponding component can be updated precisely, so the granularity of the update is component-level.
    • ReactIt recurses all the subcomponentsre-renderNow, whether it’s new or not, at this point, it’s new. Then throughThe diff algorithmTo determine which part of the view to update. So,ReactUpdate granularity is a whole.
  2. Whether the page needs to be rendered or not is handled differently for updating data
    • Only rely on the collected data to update,VueI’m going to re-render the page
    • As long as the data is updated (setState.useStateAnd so on to trigger the update), will be to re-render the page (can be usedshouldComponentUpdate/ PureComponentImprove)

reference

Deep into the responsivity principle

Take a look at data binding from a source code perspective. MarkDown

Template to DOM(Vue. Js source view).markdown

Immutable; React; Immutable

BeginWork and completeWork

Interviewer: What is the difference between Vue and React in the granularity of updates to components?