My old employer Vue wrote it for two and a half years as an intern, during which I just learned React, but didn’t write much. The new owner wrote the Demo online preview in React + Typescript for a month and a half.

Here is a brief summary of the difference between vUE and VUE. If you are also in the React phase of VUE, welcome to add V for communication scan code plus V

You are welcome to comment in the comments section 🤓

One, horizontal contrast

1. Vue official comparison

Vue official vs React

2. Personal understanding

General H5, or some do not big systems, preferred Vue. Because Vue is simple, the development efficiency is relatively high. At the same time, the volume of Vue packets is smaller, which is very important in the case of large differences in mobile network.

Like some backend systems that will get bigger and bigger, use React. More solutions, later also more convenient iteration and maintenance. (I had the honor to develop a big Vue project, webpack hot update 3mins+)

Ii. Core ideas

Vue’s early position was to make front-end development as easy as possible (which has to do with the fact that Vue is an indie developer). So Vue advocates flexibility and ease of use (progressive development experience), variable data, and two-way data binding (dependency collection).

React’s early slogan was Rethinking Best Practices. Backed by Facebook, React has had a lot of attention and users from the start, and what React is trying to do is to change the way front-end development is done in a better way (in fact, compared to the early days when jquery dominated the front end, which it did). So React promotes functional programming (pure components), immutable data, and unidirectional data flow. The biggest benefit of functional programming is its stability (no side effects) and testability (the same input, the same output), so often people say React is suitable for large applications, the fundamental reason is its functional programming.

Because of their different core ideas, Vue and React have different external manifestations (from the perspective of development).

The difference between Vue and React

Iii. Life cycle

Vue

Vue Life cycle official diagram

React

Click on the React life cycle to jump to the official website for interpretation

Comprehensive comparison

The life cycle is basically around mount, update, uninstall three aspects

  • Vue provides more, but commonly used:created/mounted/destroyed
  • The React new version scrapped some of the usual:componentDidMount/componentDidUpdate/componentWillUnmount, Hooks do not

Iv. Data flow

Vue

Bidirectional binding, unidirectional data flow: Vue 2.x implements bidirectional binding through v-Model, which is equivalent to the synsyntax sugar of onChange, so you can ignore the controlled components

<input v-model="value" />
Copy the code

React

One-way data flow: Everything is Props, mainly in the form of onChange/setState(). This update data needs to be updated so you need to pay attention to how the controlled components are written in React

// The props value cannot be modified
<input value={this.props.value}/>

// Call setState on onChange to modify the data. You need to call setState to modify the bound data
<input value={this.state.value} onChange={this.onChange}/>
Copy the code

The controlled components

Five, components,

1. Package components

Vue

/ / the parent component
<template>
  <div class="father">The parent component<Child :text="text"></Child>
  </div>
</template>
<script>
import Child from './Child'
export default {
  name: 'Father'.components: {
    Child
  },
  data() {
    return {
      text: 'Parent data received'}}}</script>

/ / child component
<template>
  <div class="child">
    <p>{{ text }}</p>
    <p>{{ children }}</p>
  </div>
</template>

<script>
export default {
  name: 'child'.props: ['text'].data() {
    return {
      children: 'Child component own data'}}}</script>
Copy the code

React

import React, { useState, useEffect } from "react";

function Child({ onClick }) {
  const [list, setList] = useState<number[]>([]);
  useEffect(() = > {
    setList([1.2.3]);
  }, [onClick]);

  return (
    <div>
      {list.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
    </div>
  );
}

function Father() {
  const show = () = > {
    return [4.5.6];
  };

  return (
    <div>
      <Child onClick={show}></Child>
    </div>
  );
}

export default Father;

Copy the code

2. Component communication

Vue

  • props/emit
  • provide/inject
  • Vuex (two-way data binding, responsive)
  • event bus

React

  • Props. (Son gives props to fatherprops.function)
  • context
  • Redux (unidirectional data flow)

3. Component nesting

Vue: slot slot

// index.vue
<template>
  <Test>
    <div>Slot text</div>
  </Test>
</template>;
import Test from "./test";

// test.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>;
Copy the code

React: props.children

/ / the parent component
import Test from "./test";

<Test>
  <div>Components are nested</div>
</Test>;

/ / child component
import * as React from "react";

const Test: React.FC<any> = (props) = > {
  return (
    <>
      <div>Test props. Children</div>
      <div>{props.children}</div>
    </>
  );
};

export default Test;
Copy the code

6. Overall feeling

1. Some differences

  • vue It's simpler and more convenientOnce you’re familiar with the API, it’s faster to implement some simple features. React is a little bit moreNative JSI prefer to write Classhooks.
  • Familiar with thehooksIn the future, it’s very free to write, don’t worry about the fixed vUEoptions api
  • React has greater advantages in the middle and background, supported by large factories, better ecology, more functions of component libraries and more solutions
  • Vue 2.x is not typescript friendly,react + typescriptMore comfortable, both write up the style gap is larger.
  • React JSX is still not proficient enough to write,OnClick, style, classNameWait, no.V-if, V-for, All in JS. Vue arguesHTML, JS, and CSS are separatedOf course, vue can also be written as JSX
  • Vue’s prop must be inThe props field for the child component. React prop is not mandatory, it is used directly, if TS is used, it is still declared

2, learning,

  • Many people say that vue turn React is very simple, a week skilled. I’m more of a dish. Feel comfortable orThere are costs, but it is not very difficult, the most important thing is to do more, do not understand why to dig deep
  • Read through the React website and tap on the examples to understand them and take notes.
  • B Station React technology family barrelLearning videos, you don’t have to tap,Let's go through it quicklyAfter all, they’re not white anymore. And then build your own project,To achieve something that interests you
  • After the basics,Look up 20, look for a variety of blog posts to read, do not understandOnce again,To study
  • conclusionMy own learning results, I have learned React for a while, I will sort it out later and send it out
  • To improve proficiency, use the company’s component library (zent) write it yourself, interested brother reference below: online preview:Junjie learning systemMaking the source code:Based on React + typescriptwelcomestart

3. Resource recommendation

  • React Chinese Documents
  • React life cycle diagram
  • React + TypeScript practices byte frontend
  • “React Advanced” React API interpretation + Basic Practice
  • React Hooks summary of the Harrow Technical team
  • Learn the React Hooks series – useRef
  • React+TS+Redux+Antd developed an enterprise background management system B station video from zero
  • B Station React technology family barrel video

Vii. Reference articles

  • “Vue” versus “React” — difference in usage
  • Some experiences from Vue to React
  • Vue turn React guide, just read this article
  • Understand the difference between Vue and React

Eight, the last