This is the 22nd day of my participation in the August More Text Challenge

Let’s start with a graph, the new version of the life cycle graph

Check the React version

I can see it’s 17, and I think it’s 18 now.

Let’s use the counter from the previous article as an example

class Count extends React.Component {
    constructor(props) {
        console.log("count-constructor")
        super(props)
        // Initialization state
        this.state = {
            count: 0}}// To mount
    componentWillMount() {
        console.log("componentWillMount")}// The mount is complete
    componentDidMount() {
        console.log("componentDidMount")}// +1 button callback
    add = () = > {
        // Get the original state
        const { count } = this.state
        // Update the status
        this.setState({ count: count + 1})}// Unload the component's callback
    death = () = > {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))}// The component will unload the call
    componentWillUnmount() {
        console.log("componentWillUnmount")}// Control module updated "valve"
    shouldComponentUpdate() {
        console.log("shouldComponentUpdate")
        return true
    }
    // The hook that the component will update
    componentWillUpdate() {
        console.log("componentWillUpdate")}// The component's updated hook
    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}>I + 1 point</button>
                <button onClick={this.death}>The destruction</button>
                <button onClick={this.force}>Forced to update</button>
            </div>)}}Copy the code

Old version life cycle

Let’s look at the old version of the life cycle diagram again

Three hooks have changed their names

We’ve also seen these hook functions in older versions. So what’s so bad about the new version? Although, there is no impact on the page

But you can see that a warning has been given in the console.

ComponentWillMount has been renamed UNSAFE_componentWillMount

ComponentWillUpdate has been renamed UNSAFE_componentWillUpdate

Forget to a componentWillRecieveProps hook, the hook is received will trigger when props, so we could write a child component. And reference the component in

class B extends React.Component {
    componentWillReceiveProps(){
        console.log("componentWillReceiveProps")}render() {
        return (
            <div>I'm component B and I'm going to receive {this.props. CarName}</div>
        )
    }
}
ReactDOM.render(<Count carName="BM"/>.document.getElementById('root'))
Copy the code

You can see, there are also a warning (remember componentWillRecieveProps when receives the second props will print, namely update will execute)

How do you remember which hook changed its name? Hook with Will in other names except componentWillUnmount. Both require UNSAFE_

Add two hooks

We start with the comparison at mount time:

  1. Both the new and old ones start with constructor
  2. New without componentWillMount, getDerivedStateFromProps appears in this position
  3. Next to the old and new is render
  4. React updates the DOM and ref. The old version is also updated, but not drawn. This part is out of our hands.
  5. The next thing we’re going to do is componentDidMount

When unloading:

  1. Old mounts and updates eventually go to componentWillUnmount. Actually, the new ones are also listed separately.

Update:

  1. CommentWillReceiveProps is gone and replaced with getDerivedStateFromProps. GetDerivedStateFromProps spans both mount and update.

  2. Both new and old will pass through the “valve” shouldComponentUpdate

  3. Older versions of Render and componentDidUpdate have no other hooks. The new version adds getSnapshotBeforeUpdate

The last

The new version deprecates three hooks and adds two more. We will learn more about the use of these two hooks in the next article.