Creating a Class component

import React from 'react'
class B extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <div>hi</div>
    }
}
export default B
Copy the code

Props(External data)

Initialize the

Class B extends React.Component {// Initialization must write a full constructor(props) {super(props); } render(){} }Copy the code

Read this. Props. XXX

class B extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    return <div onClick={this.props.onClick}>
      {this.props.name}
      <div>
        {this.props.children}
      </div>
    </div>
}
Copy the code

Related hooks (no longer used)

/ / used to detect the change of the props componentWillReceiveProps (nextProps nextContext) {the console. The log (' props has changed); }Copy the code

role

1. Accept external data

   You can only read but not write

   External data is passed by the parent component

2. Accept external functions

   Call this function when appropriate

   This function is typically a function of the parent component

State (internal data)

Initialize the

class B extends React.Component { constructor(props) { super(props); this.state = { user: {name:'frank', age:18} } } render() { /* ... * /}}Copy the code

Read this. The state

// this.state.xxx.yyy
{this.state.user.name}
{this.state.user.age}
Copy the code

Write this. SetState (????? ,fn)

this.setState(newState,fn) this.setState({x: This.setstate ((state,props)=>newState,fn) this.setState((state,props)=>newState,fn) ({x: state.x + 1}))Copy the code

Note that setState does not change this.state immediately. It will update this.state after the current code runs, triggering a UI update.

At write time: setState automatically merges the new state with the old state.

The life cycle

The official documentation

Constructor () – state shouldComponentUpdate() – return false prevent update render() – Create virtual DOM componentDidMount() – Component already appears on the page ComponentDidUpdate () – Group companion updated componentWillUnmount() – Component will die

Constructor ()

The official documentation

Initialize the props

Initialize the state

It’s called bind this

Render (rendering)

The official documentation

Purpose Display view

return (<div>... </div>) // virtual DOMCopy the code

There can only be one root element

If there are two root elements, wrap them with < react. Fragment>

< react. Fragment /> Can be shortened to <>

skills

Render can say if.. .else

Render (){if(this.state.n % 2 === =0){return <div> even </div>}else {return <div> odd </div>}}Copy the code

Render can say, okay? Expression:

{this.state.n % 2 === 0 ? <div> even </div> : <div> odd </div>}Copy the code

Render cannot write for loop directly in render, need to use array

Render can say array.map (loop)

render(){
 return this.state.array.map(n=><div>{n}</div>)
}
Copy the code

ComponentDidMount (Component mounted)

The official documentation

use

The code executed after the element is inserted into the page relies on the DOM

For example, if you want to get the height of a div, you’d better write it here

Here you can make AJAX requests to load data (official recommendation)

The first rendering executes this hook

  componentDidMount() {
    const div = document.getElementById('xxx')
    const {width} = div.getBoundingClientRect()
    this.setState({width})
  }
Copy the code

shouldComponentUpdate

The official documentation

It allows us to manually determine whether component updates are needed, and we have the flexibility to set the return value based on the application scenario to avoid unnecessary updates

Returning true does not block UI updates

Returning false prevents UI updates

onClick = () => { this.setState(state => ({ n: state.n + 1 })) this.setState(state => ({ n: } shouldComponentUpdate(nextProps, nextState, nextContext) {return nextstate.n! == this.state.n; }Copy the code

This hook can take the built-in function react. pureComponent

The PureComponent compares each key of the new state to the old state and each key of the new props to the old props before render. If all keys have the same value, no render is performed; Render if any key value is different.

class App extends React.pureComponent {
 ...
}
Copy the code

ComponentDidUpdate (Component updated)

The official documentation

use

Execute code after view update

AJAX requests can also be made here to update data (see documentation)

The first rendering does not execute this hook

Here setState might cause an infinite loop,

Unless you put it in if

If shouldComponentUpdate returns false, this hook is not fired

ComponentWillUnmount (Component will die)

The official documentation

Components that execute code unmount when a purpose component is about to be removed from the page and then destroyed are not mounted again

For example,

If you’re listening for Window Scroll in componentDidMount, then you need to unlisten for componentWillUnmount

If you create a Timer in componentDidMount, then you need to cancel the Timer in componentWillUnmount

If you create an AJAX request in componentDidMount, you need to cancel the request in componentWillUnmount

Hook motion diagram

Source: Hungry Man Valley

This article is the original article, the copyright belongs to myself and hunrengu, must indicate the source of reprint