Vue and react in detail

1. Panorama

II. Background

1. React: Professional

• React was born in 2011 (FaxJS),
• July 3, 2013 v0.3.0
• March 30, 2016 v0.14.8
• April 9, 2016 v15.0.0
• September 27, 2017 v16.0.0, fiber was officially launched
• In 2019, react 16.8 was released to officially support hooks syntax.
• October 22, 2020 v17
  

Solving the problem:

We build React to solve one problem:building large applications with data that changes over time. React to solve one problem: building large applications with data that changes over time.

2. vue: legend

It started as a personal project in 2013, but now it has become one of the world's three major front-end frameworks and the first choice for front-end in mainland China. (Interviewer asked: Why did you learn to use Vue? Answer: Because of patriotism!)

• In 2013, Yuxi You, who worked at Google , was inspired by Angular . He extracted his favorite parts from it and developed a lightweight framework, originally named Seed .
• In December of the same year, the seed sprouted and was renamed Vue (because it is a view layer library, and vue is the French word for view ), and the version number was 0.6.0.
• On January 24, 2014, Vue was officially released to the public with version number 0.8.0.
• 0.9.0, released on 2014.02.25, has its own code name: Animatrix . This name comes from the animated version of "The Matrix". From then on, important versions will have their own code names.
• 0.12.0 was released on June 13, 2015, codenamed Dragon Ball . This year, Vue experienced a big explosion. The Laravel community (a popular PHP framework community) used Vue for the first time, and Vue also gained popularity in the JS community.
• 1.0.0 Evangelion is the first milestone in the history of Vue . In the same year, vue-router (2015-08-18), vuex (2015-11-28), and vue-cli (2015-12-27) were released successively, marking the development Vue from a view layer library to a progressive framework. Many front-end students also became Vue users from this version (vue1 is purely responsive).
• October 1, 2016 2.0.0 Ghost in the Shell was the second important milestone. It absorbed React 's Virtual Dom solution and also supported server-side rendering.
• On February 4, 2019, for a long time before the release of 2.6, Vue core team was busy with the development of vue-cli3.0 , accumulated a lot of requirements, and released the penultimate version of vue2 (released in 2020)
• September 18, 2020 vue3 is here with the mission of becoming a framework that anyone can quickly learn and is easy to approach. In the same year, a new era packaging tool, Vite, was also launched (which may replace webpack in the future)

The Vue mass base diagram is as follows:

3. Technical Thought

react is a functional concept as a whole. The components use jsx syntax, all in js , integrating html and css into javaScript . jsx syntax is relatively more flexible.

The overall idea of ​​Vue is still to embrace the classic html (structure) + CSS (performance) + JS (behavior) format. Vue encourages developers to use template and provides instructions for developers to use, such as v-if , v-show , v-for and other instructions. Therefore, when developing Vue applications, there will be a feeling of writing classic web applications (separation of structure, performance, and behavior).

Some commonplace differences and similarities in data management ( props , data vs state ), component writing, and lifecycle will not be compared here.

1. Take the similarities and differences of key as an example

1. The ultimate goal of react and vue in adding keys to lists is the same: to get the corresponding vnode node in oldVnode more accurately and quickly to improve performance. However, there are certain differences in the algorithms they implement.

1.1 react

When React renders an array, if the child component does not provide a key, it will use the loop index as the key for the first rendering by default. The source code is essentially a brute force comparison method: since the singly linked list fiber cannot use the double pointer algorithm, the double pointer optimization cannot be used on the algorithm. In general, there are two rounds of traversal. The first round of traversal: processing updated nodes. Second round of traversal: process the remaining nodes that are not part of the update.

To reduce algorithm complexity, React's diff has preset limits:

Only diff elements of the same level. If a DOM node crosses the hierarchy between two updates, React will not try to reuse it.
Two elements of different types will produce different trees. If the element changes from div to p, React will destroy div and its descendant nodes, and create new p and its descendant nodes.
First determine the key and then the type. If the two are the same, they are the same node. Update > Add/Delete

1.2 vue

vue is stronger than react in terms of diff performance. After I carefully read the source code and books, I admire it very much. Let's take an algorithm question - the longest increasing subsequence as an example: take the array [2, 11, 6, 8, 1] as an example: the final output result is [0, 2, 3], indicating that the indexes of the strongest increasing sequence are 0, 2, and 3 respectively; the corresponding values ​​are 2, 6, and 8. In other words, the longest continuously growing values ​​in this array are the three elements 2, 6, and 8 in the array.

So vue3 has put so much effort into using this method, what is the purpose? During the DOM-Diff process, Vue2 gives priority to handling special scenarios, namely head-to-head comparison, head-to-tail comparison, tail-to-head comparison, etc.

During DOM-Diff process, Vue3 finds the longest stable sequence based on the new and old node index lists of newIndexToOldIndexMap , and compares the longest increasing subsequence algorithm to find the nodes that do not need to be moved in the new and old nodes, reuse them in situ, and only operate on the nodes that need to be moved or have been patch (adding and deleting nodes, etc.), thereby maximizing the replacement efficiency. Compared with the Vue2 version, it is a qualitative improvement!

2. Macro comparison of diff

2.1 react

In react, if the state of a component changes, react will re-render this component and all its descendant components. However, re-rendering does not mean that all the previous rendering results will be discarded. react will still compare the two virtual DOMs through diff and finally patch to the real DOM. Even so, if the component tree is too large, diff will still have some overhead. react internally optimizes the diff algorithm through fiber , and externally recommends developers to use shouldComponentUpdate pureComponent to avoid the problem.

2.2 vue

The responsiveness of vue2 is implemented by Object.defineProperty, and a series of operations such as getter and setter are rewritten to implement the observer mode. Once the data changes, it will not compare the entire component tree like react, but update the component instance whose data status has changed.

3. Life cycle

3.1 react life cycle

old 15.x-16

new 16+

Other: componentDidCatch

React lifecycle naming has always been very semantic (whisper: it's really long and hard to remember)

3.2 Vue life cycle

4. Functional Programming

Both parties have made large-scale changes. Although the source codes are different, there has been progress in terms of design ideas and code simplicity.

4.1 react hooks

The original cumbersome compomentDidUpdate lifecycle => useEffect , although not exactly the same, but in most scenarios, from the developer's perspective, we are more concerned about what consequences (side effects) will occur after the data in props or state changes, eliminating the process of developers comparing the before and after values. (This should be react borrowing from vue watch )

4.2 Vue3 Combination API

vue3 combined API borrows some ideas from react hooks . It has to be said that it is better than the original. In addition, the framework itself has also done a lot of optimization work, so react cannot match it in performance.

function() {
    useEffect(()=>{
        // Trigger console.log(demo) when demo changes
    },[demo])
    
    return (
        <div>react</div>
    )
}

import {reactive, watchEffect} from 'vue'
export default {
    setup() { 
          const state = reactive({ count: 0, name: 'zs' })
          watchEffect(() => {
            console.log(state.count)
            console.log(state.name)
          })
          return {
            state
          }
    }
}

Due to the responsive mechanism inside the source code during initialization, the new APIwatchEffect does not even need to monitor who has changed to trigger the side effect, because the entire monitoring process is completed by Proxy in the vue3 source code.

Not only that, vue3 has also launched a syntax that is closer to native js, thumbs up! ! ! ! ! !

<script setup>
import { reactive, ref} from "vue";

// Progressive update: ref api
let val = ref("");
let todos = reactive([
  {
    id: 0,
    title: "Eating",
    done: false,
  },
  {
    id: 1,
    title: "Sleeping",
    done: false,
  },
]);

function addTodo() {
  todos.push({
    id: todos.length,
    title: val.value,
    done: false,
  });
  val.value = "";
}
</script>

In fact, at this point, students who are familiar with the vue technology stack must be secretly proud and say " vue yes !" Unfortunately, such a good library also has its own problems. It is a commonplace that the responsive Object.defineProperty vue2 cannot monitor the changes of array indexes and newly added property values ​​of objects. While vue3 uses Proxy Api to solve these problems, it also brings new problems. For example, reactive can only pass objects ( react useState can pass simple and complex values), while the officially recommended ref needs to get the value through .value. This really makes the community explode. For this reason, the vue team was forced to launch toRefs under pressure (students who are interested can learn about it. I have discussed it with Yibao offline before).

5. Event handling (@Click vs onClick)

5.1 vue

vue uses v-on (abbreviated as:) instruction to listen to DOM events and run some JavaScript code when triggered. v-on is usually used to receive a method name that needs to be called.

<div @click="helloShanghai">welcome</div>
<div @click="helloShanghai('hello')">welcome</div>

To access native DOM events, you can explicitly pass $event into method

<div @click="helloShanghai('hello', $event)">welcome</div>

Ordinary element addEventListener , component $on

5.2 react

Event handling for React elements is very similar to that for DOM elements, but there is a slight difference in syntax:

• React events are named using camelCase instead of pure lowercase.
• When using JSX syntax you need to pass a function as the event handler, not a string.
  

<div onClick={this.handleClick}>Click me</div>
<div onClick={this.handleClick.bind(this)}>Click me</div>
<div onClick={()=>{this.handleClick()}）}>Click me</div>
<div onClick={this.handleClick()}>Click me</div><!-- Wrong way to write>

React16 mounts synthetic events on document , and after version 17, it is root element.

6. Componentization

Vue encourages writing templates that resemble regular HTML . It is written very close to standard HTML elements, but with a few more attributes. React recommends that all your templates be written in JSX, a common JavaScript syntax extension.

7. Build Tools

React ==> Create React APP Vue ==> vue-cli

8. Others

Of course there are other comparisons, such as Vue's slots and React's props.children . Lifecycle: getDerivedStateFormProps , getSnapshotBeforeUpdate

My opinion:

1. React is recognized in mid- and back-end projects because it is more elegant than Vue in handling complex business logic or component reuse issues, but it also requires the team's overall technical strength to be stronger, and the leader's design and quality control capabilities to be better, so the development cost is higher. 2. vue is known for its more friendly and easier-to-use writing style. Its more friendly API and more user-friendly design greatly improve development costs and efficiency. 3. On the other hand, Vue has many APIs that standardize developers, but it also limits developers' divergent thinking to a certain extent; while react has fewer APIs that improve developers' creativity, but also because each react developer has a different understanding of react and produces different code styles. 4. Vue and react have become more mature in the long course of development. After careful consideration, I feel that both are very feasible no matter on the mobile side or in large-scale middle and back-end. Regarding the question of whether the framework is good or bad, in fact, we should think more about what technology stack the company team wants to use, what technology stack you like and are good at, etc.

5. Family Bucket

This is the end of this detailed article about vue and react . For more relevant vue and react content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!