Vue vs React, syntax differences

This is the fifth day of my participation in Gwen Challenge

preface

In a leading project, I used React for a few days without permission because of my personal preference.

So I want to make some comparisons between Vue and React.

Listen to props change state

This is really not a happy option. In Vue, just use watch to listen for hooks directly, or listen for specific properties through the updated or beforeUpdate lifecycle.

But in Act17 the componentWillUpdate hook is gone. (Smile)

Updating state with componentUpdated hook will continue to trigger componentUpdated, directly overflow stack (smile)

Finally, I found a way to solve this cycle of death. No other properties are modified

// React
  state = {
      type: false.name: 'test'
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    // Note: This lifecycle is triggered every time you modify props or state, so make a conditional judgment
    if (!Array.isArray(props.list) && ! prevState.type) {// the return object is used to modify state
      return { type: nextProps.list.type};
    }
    // If the value does not reach the expected value, do not modify it to avoid unexpected situations
    return null;
  }
  // console.log(this.state) {type: 'all ', name: 'test'}
Copy the code

// Vue
watch{
    type(new, old){
        this.type = new;
    },
    name{ // Deep listening, suitable for objects/arrays
        handle(new, old){
            this.name = new;
        },
        deep: true}}Copy the code

Iterate over groups and objects

In Vue, happiness is done with the V-for attribute

But in React, iterating over groups is different from iterating over objects

// React
<div className="box">
    { // go through the number group
        arr.map(item= > {
            return (<div> 略</div>)})} {// Iterate over the object
        Object.keys(obj).map(item= > {
            return (<div> 略</div>)
        })
    }
</div>
Copy the code

// Vue
<div v-for="item in data">
    / /... slightly
</div>
Copy the code

Render HTML content

// react
<div dangerouslySetInnerHTML={{__html: content}}></div>
Copy the code

// Vue
<div v-html="content"></div>
Copy the code

Set the route alias (without exposing eject)

React Setting the route alias is a bit more cumbersome, requiring downloading two dependencies and modifying the scripts section of package.json

If you just configure route aliases, there is no need to expose all configuration files through the eject command, which is much simpler than other tutorials

The @components alias format is just my personal habit, I can remove the @ sign and configure a personalized alias

// react
// Install customize-cra react-app-rewired
// create config-overrides. Js in root directory
const { override, addWebpackAlias } = require("customize-cra")
const path = require("path");

module.exports=override(

   // Introduce plugin write configuration
  addWebpackAlias({
    "@" : path.resolve(__dirname, "src"),
    "@utils": path.resolve(__dirname, "src/utils")}))// 2. Modify package.json and restart
  "scripts": {
    "start": "react-app-rewired start"."build": "react-app-rewired build"."test": "react-app-rewired test"."eject": "react-scripts eject"
  },
Copy the code

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: true.chainWebpack: (config) = > {
    config.resolve.alias
      .set(The '@', resolve('src'))
      .set('@utils',resolve('src/utils'))}};Copy the code

Call methods and pass parameters

// react
/ / 1
<div onClick={() = > this.click(id)} ></div>
/ / 2
<div onClick={this.click.bind(null, id) ></div>
Copy the code

// Vue
<div @click="click(id)"></div>
Copy the code

Obtaining Route Parameters

// react
componentDidMount(){
    // index/:home index/1
    this.props.match.params.home
}
Copy the code

// Vue
    this.$route.query.home   // /index? home=1
    this.$route.params.home  // /index/:home /index/1
Copy the code

The life cycle

This is actually not really want to write, but since it is going to mention the grammatical differences between the two, it has to come

React17 declaration period, no graph, make do?

class A extends React.Component {
  // Used to initialize state
  constructor() {}
  / / used to replace ` componentWillReceiveProps `, this function will be initialized and ` update ` is invoked
  // Because this function is static, we can't get 'this'
  // If the comparison 'prevProps' is needed, maintain it separately in' state '
  static getDerivedStateFromProps(nextProps, prevState) {}
  // Determine whether a component needs to be updated
  shouldComponentUpdate(nextProps, nextState) {}
  // called after the component is mounted
  // You can request or subscribe in this function
  componentDidMount() {}
  // To get the latest DOM data
  getSnapshotBeforeUpdate() {}
  // The component is about to be destroyed
  // You can remove subscriptions, timers, etc
  componentWillUnmount() {}
  // called after the component is destroyed
  componentDidUnMount() {}
  // called after component update
  componentDidUpdate() {}
  // Render component functions
  render(){}}Copy the code