This is my participation 8 The fourth of the yuegengwen challenge 20 God , Check out the activity details :8 Yuegengwen challenge

First , Let's use an example to lead to ： Counter

1. Mount stage

• constructor Constructors
• componentWillMount About to mount
• componentDidMount The mount is finished
• render Rendering

We are in the hook of each life cycle A print , Look at their execution order .

class Count extends React.Component {
    constructor(props) {
        console.log("count-constructor")
        super(props)
        //  Initialization status 
        this.state = {
            count: 0
        }
    }
    //  About to mount 
    componentWillMount() {
        console.log("componentWillMount")
    }
    // The mount is finished 
    componentDidMount(){
        console.log("componentDidMount")
    }
    // +1  Button callback  
    add = () => {
        // Get the original state 
        const { count } = this.state
        //  Update status 
        this.setState({ count: count + 1 })
    }
    render() {
        console.log("count-render")
        return (
            <div> <h1> The current sum is {this.state.count}</h1> <button onClick={this.add}> Am I +1</button> </div>
        )
    }
}
 Copy code 

The order of execution is as follows ： You can see the warning in the figure ,componentWillMount Has been abandoned . But you can still use .

2. to update

There are three ways to update ：

2.1 setState

In the previous article , We said setState Update meeting call render. But in fact, I have experienced shouldComponentUpdate（ No, the component should be updated ）、componentWillUpdate Two processes .

• shouldComponentUpdate

We haven't written before shouldComponentUpdate This hook function ？ Why is it updated ？ This hook has a return value , The default return value is true, Only his return value is true, To execute down . When we write this hook function ourselves , And the return value is false When . It won't go down .️ There must be a return value true/false.

 shouldComponentUpdate(){
        console.log("shouldComponentUpdate")
        return true
    }
 Copy code 

• componentWillUpdate The hook that the component will update
• componentDidUpdate Hook after component update

2.2 forceUpdate

Force update , That is, I don't want to use setState Also update the status . And setState The difference is ： Not pass shouldComponentUpdate.

We added a new button , Click the button to start force Callback function . Use... In callback functions forceUpdate.forceUpdate and setState Both need this.

force =()=>{
        this.forceUpdate()
    }
    render() {
        console.log("count-render")
        return (
            <div> <h1> The current sum is {this.state.count}</h1> <button onClick={this.add}> Am I +1</button> <button onClick={this.death}> The destruction </button> <button onClick={this.force}> Force update </button> </div>
        )
    }
 Copy code 

Click force update , We found that the following three hooks were executed .

The complete code of the above two methods

class Count extends React.Component {
    constructor(props) {
        console.log("count-constructor")
        super(props)
        //  Initialization status 
        this.state = {
            count: 0
        }
    }
    //  About to mount 
    componentWillMount() {
        console.log("componentWillMount")
    }
    // The mount is finished 
    componentDidMount() {
        console.log("componentDidMount")
    }
    // +1  Button callback  
    add = () => {
        // Get the original state 
        const { count } = this.state
        //  Update status 
        this.setState({ count: count + 1 })
    }
    //  The callback to unload the component 
    death = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    //  The component is about to unload and call 
    componentWillUnmount() {
        console.log("componentWillUnmount")
    }
    //  Controls the of component updates “ valve ”
    shouldComponentUpdate() {
        console.log("shouldComponentUpdate")
        return true
    }
    //  The hook that the component will update 
    componentWillUpdate() {
        console.log("componentWillUpdate")
    }
    //  Hook after component update 
    componentDidUpdate() {
        console.log("componentDidUpdate")
    }
    force = () => {
        this.forceUpdate()
    }
    render() {
        console.log("count-render")
        return (
            <div> <h1> The current sum is {this.state.count}</h1> <button onClick={this.add}> Am I +1</button> <button onClick={this.death}> The destruction </button> <button onClick={this.force}> Force update </button> </div>
        )
    }
}
 Copy code 

2.3 Parent component render

First, let's write two new components , Let them form a father son relationship .

class A extends React.Component {
    render() {
        return (
            <div> A <B /> </div>

        )
    }
}
class B extends React.Component {
    render() {
        return (
            <div>B</div>
        )
    }
}
ReactDOM.render(<A />, document.getElementById('root'))
 Copy code 

stay A Components ( Parent component ) Of state Define a variable in carName, And in A Add buttons and changes to components carName Callback function for . most important of all , I don't want to A Show the car name in the component , I want to put B Component .

class A extends React.Component {
    state ={carName:"BM"}
    changeCar = ()=>{
        this.setState({carName:"AD"})
    }
    render() {
        return (
            <div>  I am a A Components  <button onClick={this.changeCar}> Change </button> <B carName={this.state.carName}/> </div>

        )
    }
}
 Copy code 

B Components ( Child components ), Just through props Receive parent component A, From the value of the

class B extends React.Component {
    render() {
        return (
            <div> I am a B Components , What was received was {this.props.carName}</div>
        )
    }
}
 Copy code 

Then it leads to the hook componentWillReceiveProps （ The component will receive props）

class B extends React.Component {
    componentWillReceiveProps(){
        console.log("componentWillReceiveProps")
    }
    render() {
        return (
            <div> I am a B Components , What was received was {this.props.carName}</div>
        )
    }
}
 Copy code 

The second reception props

We just entered the page , The parent component has passed... To the child component props. But this hook does not perform . When we click the button to update , Just executed this hook .

3. The destruction

Click the button to destroy the component , We are componentWillUnmount Print in hook function . When the button is clicked , Execute this print .

death =()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }
    //  The hook that the component will unload 
    componentWillUnmount(){
        console.log("componentWillUnmount")
    }
    render() {
        console.log("count-render")
        return (
            <div> <h1> The current sum is {this.state.count}</h1> <button onClick={this.add}> Am I +1</button> <button onClick={this.death}> The destruction </button> </div>
        )
    }
 Copy code