React component life cycle

Mounting

When a component instance is created and inserted into the DOM, its lifecycle call order is as follows:

• constructor() : Its constructor is called before the React component is mounted

• getDerivedStateFromProps() : After calling the render method is called before and will be called during the initial mount and subsequent updates.

• render():The render () method is class only method that must beimplemented in the component.

• componentDidMount() : Called immediately after the component is mounted (inserted into the DOM tree).

render() : The method is class only method that must be implemented in the component, other methods can be implemented according to their own needs.

For a detailed description of these methods, please refer to Official documents .

Update

Whenever the component’s state or props , when a change occurs, the component is updated.

When the component’s props or state an update is triggered when a change occurs. The order of lifecycle calls for component updates is as follows:

• getDerivedStateFromProps() after calling the render method is called before and will be called during the initial mount and subsequent updates. According to shouldComponentUpdate() to determine whether the output of the React component is affected by the current state or props change

• shouldComponentUpdate() : When props or state changes shouldComponentUpdate() will be called before the rendering is executed.

• render() : The render () method is the only method that must be implemented in a class component.

• getSnapshotBeforeUpdate() : Called before the last rendered output (submitted to the DOM node).

• componentDidUpdate() : Will be called immediately after the update

render() : Method is the only method that must be implemented in class components, and other methods can be implemented according to their own needs.

For a detailed description of these methods, please refer to Official documents .

Unloading

The following methods are called when the component is removed from the DOM:

• componentWillUnmount() : Called directly before the component is unloaded and destroyed

For a detailed description of these methods, please refer to Official documents .

Example

The following is an example of the current time, updated every second:

classClockextendsReact.Component{constructor(props){super(props);this.state=
{date:newDate()};}componentDidMount(){this.timerID=setInterval(()=>this.tick(),1000);}
componentWillUnmount(){clearInterval(this.timerID);}tick(){this.setState
({date:newDate()});}render(){return(<div>
<h1>Hello,Runoob!</h1>
<h2>The current time is：{this.state.date.toLocaleTimeString()}.</h2>
</div>);}}ReactDOM.render(<Clock/>,document.getElementById('root'));

classHelloextendsReact.Component{constructor(props){super(props);this.state=
{opacity:1.0};}componentDidMount(){this.timer=setInterval(function()
{varopacity=this.state.opacity;opacity-=.05;if(opacity<0.1){opacity=1.0;}
this.setState({opacity:opacity});}.bind(this),100);}render(){return
(<divstyle={{opacity:this.state.opacity}}>Hello{this.props.name}</div>);}}
ReactDOM.render(<Helloname="world"/>,document.body);

classButtonextendsReact.Component{constructor(props){super(props);this.state={data:0};this.setNewNumber=this.setNewNumber.bind(this);}setNewNumber(){this.setState({data:this.state.data+1})}render(){return(<div>
<buttononClick={this.setNewNumber}>INCREMENT</button>
<ContentmyNumber={this.state.data}></Content>
</div>);}}classContentextendsReact.Component{componentWillMount(){console.log('Component
WILL MOUNT!')}componentDidMount(){console.log('Component DID
MOUNT!')}componentWillReceiveProps(newProps){console.log('Component WILL
RECEIVE
PROPS!')}shouldComponentUpdate(newProps,newState){returntrue;}componentWillUpdate(nextProps,nextState){console.log('Component
WILL
UPDATE!');}componentDidUpdate(prevProps,prevState){console.log('Component
DID UPDATE!')}componentWillUnmount(){console.log('Component WILL
UNMOUNT!')}render(){return(<div> <h3>{this.props.myNumber}</h3>
</div>);}}ReactDOM.render(<div> <Button/>
</div>,document.getElementById('example'));