Home >Web Front-end >JS Tutorial >Comprehensive understanding of react life cycle (with code)

Comprehensive understanding of react life cycle (with code)

不言forward: 2019-04-03 10:05:562743browse

This article brings you a comprehensive understanding of the react life cycle (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The life cycle of a React component is divided into three parts: instantiation, existence and destruction.

Instantiation phase

When the client renders, the following is called in sequence

getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount()

Server-side rendering

getDefaultProps()
getInitialState()
componentWillMount()
render()

Note: componentDidMount() will not be rendered on the server side;

getDefaultProps

For each component instance, this method will only be called once, and the component class In all subsequent applications, getDefaultPops will not be called again, and the object returned can be used to set default props values.

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: 'pomy',
            git: 'dwqs'
        }
    },
    
    render: function(){
        return (
            <p>Hello,{this.props.name},git username is {this.props.dwqs}</p>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

You can also set props when mounting the component.

var data = [{title: 'Hello'}];
<Hello data={data} />

Or call setProps (generally no need to call) to set its props

var data = [{title: 'Hello'}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});

But setProps can only be called on child components or component trees. Don't call this.setProps or modify this.props directly. Treat it as read-only data.

React provides a way to verify props through propTypes. propTypes is a configuration object used to define attribute types:

var survey = React.createClass({
    propTypes: {
        survey: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    },
    
    //...
})

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class BetterImage extends Component{...}

BetterImage.PropTypes={
  src: PropTypes.string,
  center: PropTypes.bool,
  loadingImage: PropTypes.string,
  defaultImage: PropTypes.string,
  onLoad: PropTypes.func,
  onError: PropTypes.func,
  onComplete: PropTypes.func
}
BetterImage.defaultProps={
  ....
}

getInitialState

For each instance of the component, this method is called once and only once to initialize the state of each instance. In this method, you can access the props of the component. Each React component has its own state, which differs from props in that state only exists inside the component, while props are shared among all instances.

There is a difference between the calls of getInitialState and getDefaultPops. getDefaultPops is only called once for the component class, and subsequent applications of this class will not be called, while getInitialState is called for each component instance. , and only adjust it once.

var LikeButton = React.createClass({
  //初始化State
  getInitialState: function() {
    return {liked: false};
  },
  
  handleClick: function(event) {
    //设置修改State
    this.setState({liked: !this.state.liked});
  },

  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

Every time the state is modified, the component will be re-rendered. After instantiation, the component will be updated through the state, and the following methods will be called in sequence:

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

componentWillMount

is called before rendering, both on the client and on the server. React officially released version v16.3. In this update, in addition to the new Context API that was hotly discussed some time ago, two newly introduced life cycle functions getDerivedStateFromProps and getSnapshotBeforeUpdate and three life cycle functions componentWillMount will be removed in the future v17.0 version. , componentWillReceiveProps, componentWillUpdate.

In this life cycle you will encounter the following problems:

a. No data on the first screen leads to a white screen
In React applications, many developers To avoid the white screen caused by not getting asynchronous data when the page is rendered for the first time, the code for the data request part is placed in componentWillMount, hoping to avoid the white screen and advance the sending time of the asynchronous request. But in fact, after componentWillMount is executed, the first rendering has already started, so if asynchronous data has not been obtained when componentWillMount is executed, the page will still be in a state without asynchronous data when it is first rendered. In other words, the component will always be in a state without asynchronous data when it is first rendered, so no matter where the data request is sent, there is no direct solution to this problem. Regarding sending data requests early, officials also encourage placing the data request part of the code in the constructor of the component instead of componentWillMount.
If there are two solutions that have been used to improve the user experience:

Method 1: Asynchronous request component, use nprogress to add loading animation;

import React, { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import './customNprogress.styl'

NProgress.configure({ showSpinner: false })

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    state = {
      component: null
    }

    async componentDidMount() {
      NProgress.start()
      const { default: component } = await importComponent()
      NProgress.done()

      this.setState({ component })
    }

    render() {
      const C = this.state.component

      return C ? <C {...this.props} /> : null
    }
  }

  return AsyncComponent
}

const AsyncNotFound = asyncComponent(() => import(/* webpackChunkName: "NotFound" */ '@/routes/NotFound'))

Method 2: Use onreadystatechange to Listen to readyState and load a static page with only a frame before the resource loading is completed. The page does not request data. When the data request is completed, the route is switched to the real home page.

  function listen () {
    if (document.readyState == 'complete') { // 资源加载完成
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={Index}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    } else { // 资源加载中
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={FirstScreen}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    }
}

document.onreadystatechange = listen

Specific reference is to solve the problem of React first screen loading white screen

b.Event subscription

Another common use case is to subscribe to events in componentWillMount and in componentWillUnmount Cancel the corresponding event subscription. But in fact, React cannot guarantee that after componentWillMount is called, componentWillUnmount of the same component will also be called. An example of the current version is that when rendering on the server side, componentWillUnmount will not be called on the server side, so subscribing to events in componentWillMount will directly cause a memory leak on the server side. On the other hand, after React turns on asynchronous rendering mode in the future, after componentWillMount is called, the rendering of the component is likely to be interrupted by other transactions, resulting in componentWillUnmount not being called. **componentDidMount does not have this problem. After componentDidMount is called, componentWillUnmount will be called subsequently, and the event subscriptions existing in the component will be cleared according to the specific code. **

render

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

只能通过 this.props 和 this.state 访问数据（不能修改）
可以返回 null,false(这种场景下，react渲染一个