React的生命周期函数初始挂载更新移除详解.docxVIP

第

React的生命周期函数初始挂载更新移除详解

目录概述constructor初始挂载更新移除

概述

在React中，生命周期函数指的是组件在某一个时刻会自动执行的函数

constructor

在类或组件创建的时候被自动执行，我们可以说它是生命周期函数，但它并不是React所特有的，所有的Es6对象都有这个函数，所以并不能说它是React的生命周期函数

初始

当数据发生变化时，render函数会被自动执行，符合我们对React生命周期函数的定义，所以它是React的生命周期函数，但在初始阶段，并不会有任何的React生命周期函数被执行，但会执行constructor构造函数，进行组件数据的初始化、

importReact,{Component}fromreact;

classDemoextendsComponent{

constructor(props){

console.log(初始化数据...);

super(props);

this.state={};

render(){

return(

divHelloWorld/div

exportdefaultDemo

挂载

页面挂载阶段，UNSAFE_componentWillMount页面即将render挂载在html前执行，以前叫做componentWillMount但React团队认为这些生命周期函数经常被误解和巧妙的滥用，会带来潜在的问题，所以为他们加上了UNSAFE_前缀，当然这里的不安全不是指安全性，而是表示使用这些周期函数在未来的React版本中更有可能出现错误。

即将挂载的函数执行完毕，会进行渲染挂载render，之后会执行componentDidMount函数，我们可以把完成挂载后的逻辑写在这个函数上。记住，只有组件第一次渲染页面才会执行mount

importReact,{Component}fromreact;

classDemoextendsComponent{

constructor(props){

console.log(初始化数据...);

super(props);

this.state={};

UNSAFE_componentWillMount(){

console.log(UNSAFE_componentWillMount);

render(){

console.log(render);

return(

divHelloWorld/div

componentDidMount(){

console.log(componentDidMount);

exportdefaultDemo

更新

数据更新阶段，state或props发生变化，页面会重新渲染。

state会在更新前先执行shouldComponentUpdate生命周期函数，这个函数比较特殊，它需要有一个返回值，true或者false，控制页面是否需要重新重新渲染，如果仅仅是数据发生变化，我们可以返回false，那么之后的生命周期函数都不会执行，这样可以有效的提升我们组件更新的效率。

返回true后，会执行UNSAFE_componentWillUpdate函数做更新前的准备，在执行render进行页面的重新渲染，渲染完毕后执行componentDidUpdate函数

importReact,{Component}fromreact;

classDemoextendsComponent{

constructor(props){

console.log(初始化数据...);

super(props);

this.handleClickTest=this.handleClickTest.bind(this);

this.state={

number:1

handleClickTest(){

constnumber=this.state.number+1;

this.setState({

number

UNSAFE_componentWillMount(){

console.log(UNSAFE_componentWillMount);

render(){

console.log(render);

return(

divthis.handleClickTest}HelloWorld