React series (1) – Scaffolding projects React series (2) – React basics (3) – DOM manipulation

The React lifecycle can be divided into four phases:

• Init(initialization phase) : Setup props and state
• Mounting(DOM Mounting stage) : componentWillMount -> Render -> componentDidMount
• Updating:
  1. props: componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
  2. states: shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate
• Unmounting(DOM Unmounting) : componentWillUnmount

Introduction to the

1. ComponentWillMount: Triggered when a component is about to be mounted
2. ComponentDidMount: Triggered when a component is mounted
3. ShouldComponentUpdate: Whether to update the component trigger
4. ComponentWillUpdate: Triggered when data is about to be updated
5. ComponentDidMount: Data updates are triggered
6. ComponentWillUnmount: Triggered when a component is about to be destroyed
7. ComponentWillReceiveProps: parent component changed props triggered by value

Ps: Some functions have changed their names in Act17.0

Flow chart (found online)

• GetDefaultProps: Sets the default props, which is used in ES5 React writing
• GetInitialState: Sets the default state. It is mainly used in ES5 React writing

Copy the code

Initialization (initialization)

Components inherit from the base class react.component.render () and lifecycle functions, so function components do not have lifecycle functions. For example: The Test class inherits the react.component.super (props) calls the constructor() and also passes the props of the parent component to the props of the child component (props is a one-way data flow, which means that the child component cannot modify the props data directly). Constructor is used to do some component initialization, such as defining state

import React from 'react';

class Test extends React.Component {
    constructor(props) {
        super(props);this.state = {
            count: 1}}render() {
        return (
            <div>{this.state.count}</div>)}}Copy the code

Mounting (DOM mount)

ComponentWillMount -> render -> componentDidMount ps: In Act17.0 and later, componentWillMount was renamed to UNSAFE_componentWillMount.

• ComponentWillMount: Called before the DOM is mounted, only once
• ComponentDidMount: Called after the DOM is mounted, only once

import React from 'react';

class Test extends React.Component {
    constructor(props) {
        super(props);this.state = {
            count: 1}}In act17 and above, componentWillMount is called UNSAFE_componentWillMount
    componentWillMount() {
        console.log('componentWillMount');
    }
    
    componentDidMount() {
        console.log('componentDidMount');
    }
    render() {
        console.log('render');
        return (
            <div>{this.state.count}</div>)}}Copy the code

Results:

Updating (update)

shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate ps: In 17.0 and above componentWillUpdate was renamed to UNSAFE_componentWillUpdate

• ShouldComponentUpdate (nextProps, nextState): Use this method to determine if the component needs to be rerendered.return falseComponents do not need to be rendered.
• ComponentWillUpdate: Called before the component is rerendered, before the DOM is generated. (Change to UNSAFE_componentWillUpdate)
• ComponentDidUpdate: called after DOM is mounted, when the DOM has been generated.
• ComponentWillReceiveProps: component from the parent component calls before receiving new props. (change to UNSAFE_componentWillReceiveProps)

import React from 'react';

class Test extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            date: new Date()}}UNSAFE_componentWillMount() {
        console.log('componentWillMount');
        setInterval(() = > {
          this.setState({ date: new Date()})// Update the time every second
        }, 1000);
    }
    
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true // Returns true, the component needs to be re-rendered
    }
    
    UNSAFE_componentWillUpdate() {
        console.log('componentWillUpdate');
    }
    
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    
    render() {
        return (
            <div>
                {this.state.date.toLocaleTimeString()}
            </div>)}}Copy the code

Result: Each update triggers these functions

Unmounting(Unmounting)

This phase typically involves unbinding certain events, such as clearing timers in the current component, clearing some caches in the REdux, and so on

import React from 'react';

class Test extends React.Component {
    
    constructor(props) {
        super(props);
    }
    
    componentWillUnmount() {
        // Do some cleanup
    }
    
    render() {
        return()}}Copy the code