Shulou(Shulou.com)06/03 Report--

This article shows you the introduction of the life cycle of React components and how the process is. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

What is the life cycle

The life cycle of components is the working process of React, just like people have birth, aging, sickness and death, there is a change of sun and moon in nature, and each component will be created, updated and deleted in the web page, just like a living organism.

The life cycle of React components can be divided into three processes

Load (mount) procedure (mount): the process by which a component is rendered in the DOM tree for the first time.

Update process (update): the process by which a component is re-rendered.

Uninstall process (unmount): the process by which a component is removed from DOM.

II. Loading process

Call the following functions constructor, getInitialState, getDefaultProps, componentWillMount, render, componentDidMount in turn.

1 、 constructor

Is the constructor in ES6 to create an instance of the component class, which involves two steps: initializing the state and binding the this environment of the member functions.

2 、 render

Render is the most important function in React components. This is the only function that cannot be ignored in react, and there can be only one parent element in a render function. The render function is a pure function, it does not actually render, it is just a structure described by JSX, and ultimately the rendering process is carried out by React. There should be no operation in the render function. The description of the page completely depends on the returned results of this.state and this.props. You cannot call this.setState in render.

There is a very vivid summary of the formula UI=render (data)

3. ComponentWillMount and componentDidMount

These two functions are executed before and after the render, and since this process is usually called only on the browser side, we get asynchronous data here, and at the time of the componentDidMount call, the component is already loaded into the DOM tree.

III. Update process

To put it simply, it is the process that props and state are modified, calling componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, and componentDidUpdate in turn.

1. ComponentWillReceiveProps (nextProps)

It is not called only when the props is changed. In fact, as long as the render function of the parent component is called, the rendered child component in the render will be updated, regardless of whether the props passed by the parent component to the child component has been changed or not, it will trigger the componentWillReceiveProps procedure of the child component. However, the trigger process of the this.setState method will not call this function. Because this function is suitable for calculating the state of whether to update the internal state based on the value of the new props.

2. ShouldComponentUpdate (nextProps, nextState)

The importance of this function is second only to the render,render function that determines what to render, while shouldComponentUpdate determines what you don't need to render and returns functions, which improves performance and ignores processes that don't need to be re-rendered.

3. ComponentWillUpdate and componentDidUpdate

Unlike the loading process, the componentDidUpdate here can be executed either on the browser side or on the server side

4. Trigger render

In react, there are four paths that trigger render.

The following assumption is that shouldComponentUpdate returns true by default:

(1) render Initial Render for the first time.

(2) call this.setState (not once setState will trigger a render,React merge operation, and then render at one time).

(3) the parent component is updated (usually the props changes, but the render will be triggered even if the props has not changed or there is no data exchange between the parent and child components).

(4) call this.forceUpdate.

Note: if you return false in shouldComponentUpdate, you can exit the update path ahead of time.

IV. Unloading process

It is rarely used in practice, there is only one componentWillUnmount, and generally events registered in componentDidMount need to be deleted here.

5. Lifecycle process 1. The first initialization rendering shows: ReactDOM.render ()

Constructor (): create an object to initialize state

ComponentWillMount (): callback will be inserted

Render (): used to insert virtual DOM callback

ComponentDidMount (): callback has been inserted

2. Update state: this.setState () each time

ComponentWillUpdate (): callback to be updated

Render (): update (re-render)

ComponentDidUpdate (): callback has been updated

3. Remove components: ReactDOM.unmountComponentAtNode (containerDom)

ComponentWillUnmount (): the component will be removed from the callback

Example class LifeCycle extends React.Component {constructor (props) {super (props); alert ("Initial render"); alert ("constructor"); this.state = {str: "hello"};} componentWillMount () {alert ("componentWillMount") } componentDidMount () {alert ("componentDidMount");} componentWillReceiveProps (nextProps) {alert ("componentWillReceiveProps");} shouldComponentUpdate () {alert ("shouldComponentUpdate"); return true / / remember to return true} componentWillUpdate () {alert ("componentWillUpdate");} componentDidUpdate () {alert ("componentDidUpdate");} componentWillUnmount () {alert ("componentWillUnmount") } setTheState () {let s = "hello"; if (this.state.str = s) {s = "HELLO";} this.setState ({str: s}) } forceItUpdate () {this.forceUpdate ();} render () {alert ("render") Return ({"Props:"} {parseInt (this.props.num)} {"State:"} {this.state.str}) }} class Container extends React.Component {constructor (props) {super (props); this.state = {num: Math.random () * 100} } propsChange () {this.setState ({num: Math.random () * 100});} setLifeCycleState () {this.refs.rLifeCycle.setTheState () } forceLifeCycleUpdate () {this.refs.rLifeCycle.forceItUpdate ();} unmountLifeCycle () {/ / uninstalling the parent component here will also cause the child component ReactDOM.unmountComponentAtNode (document.getElementById ("container")) to be unloaded. } parentForceUpdate () {this.forceUpdate () } render () {return (propsChange setState forceUpdate) Unmount parentForceUpdateWithoutChange) }} ReactDOM.render (, document.getElementById ('container')); the above is an introduction to the life cycle of React components and what the process is like. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.