Why does react use class and arrow functions to have the same effect?

1. 

import React from "react"

const Demo = () => {
  return (
    <div>sd</div>
  )
}


export default Demo

2. 

import React from "react"

class List extends React.Component {
    render() {
        return (
        <div>sd<div>
        )
    }
}
export default List
React.js
Mar.04,2021

when it comes to components, it is necessary for us to talk about three ways of writing React components :

1, ES5- React.createClass (original createClass)

early React uses this method to build a component, which accepts an object as a parameter, must declare a render method in the object, and render returns a component instance. At this stage, it is not recommended to use the createClass method to create a component. Based on es5, plus bloated, this self-binding leads to slightly poor performance, is doomed to be eliminated. The approximate code is as follows: 

var React = require('react');
var ReactDOM = require('react-dom');
var MyComponent = React.createClass({
    getDefaultProp:function() {
        return {};
    },
    getInitialState: function() {
        return {};
    },
    render: function() {
        return (
            <div>ES5- React.createClass</div>
        );
    }
 });

2, ES6-

from version v0.13, it is officially recommended to use ES6's class syntax to create stateful components, that is, we can create components using class MyComponent extends React.Component {.}. The approximate code is as follows: 

class MyComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <div>ES6- React.Component</div>
        )
    }
}
Characteristics of

React.Component:
(1) React.createClass initiates state, through the getInitialState function while React.Component declares state directly in constructor.
(2) the this of React.createClass is automatically bound, while React.Component needs to be bound manually.

3, stateless functional writing (pure component SFC)

both React.createClass and React.Component can be used to create stateful components, but since v0.14, stateless components have been officially proposed-Stateless Component. This method does not require the management state state, data to be passed in directly through props, which is also in line with the idea of React one-way data flow, while improving the readability of the code and greatly reducing the amount of code. The approximate code is as follows: 

const MySFC= (props) => (
    <div>
        // props
    </div>
);

Features of stateless components:
(1), components will not be instantiated, overall rendering performance will be improved
(2), methods that components cannot access the lifecycle

the first is a stateless component, and the second is a stateful

pull, of course, both are functions in nature, and return returns dom nodes after they are executed.

on the face of it, there is nothing wrong with you to write like this, but you don't understand the essential difference.
1 is a function that returns the dom of return when executed. You can also return something else, not necessarily a dom element; what's the difference between
2 and 1 in React, you know? The sd in 1 cannot be controlled by the state of react. The value of sd in 2 can be controlled by the state of this component.

to put it bluntly, 2 has all the lifecycles and hooks of React.

the first way to write is for stateless components. Stateless components have only props, but no state and a series of lifecycle functions. Therefore, stateless components update and render faster! If your component does not have state and lifecycle control, it is recommended to use this way of writing!

The second way of writing

is the general way of writing react components, including props,state and a number of lifecycle functions. You can control the state of the component and each life cycle.

Previous: Why the data of the component cannot use the value in state in vuex, and what should I do if I want to use it?

Next: The problem with js setting scroll bar

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu