react-生命周期

IngersollAllen 发布于1年前

组件实例化

static defaultProps

组件初始化属性

constructor

组件内的构造函数,内部可以声明状态获取属性

componentWillMount

组件在渲染之前,会调用此生命周期函数

render

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

只能通过 this.props 和 this.state 访问数据(不能修改)

可以返回 null,false 或者任何React组件

只能出现一个顶级组件,不能返回一组元素

不能改变组件的状态

不能修改DOM的输出

render方法返回的结果并不是真正的DOM元素,而是一个虚拟的表现,类似于一个DOM tree的结构的对象。react之所以效率高,就是这个原因。

componentDidMount

组件挂载完成,此时可以获取到真正的dom元素

运行时

componentWillReceiveProps

该生命周期函数只存在于子组件,当父组件传递过来的props发生变化时调用

shouldComponentUpdate(nextProps, nextState)

当state发生改变时,会先调用此方法,该方法默认会返回true,如果返回值为true则进入下一个声明周期,如果为false则不会在继续运行下面的生命周期函数。
在该方法中,可以对state进行判断,来处理是否要重新渲染,从而做一定的优化

componentWillUpdate

shouldComponentUpdate返回true时,触发该生命周期函数。

componentDidUpdate

整个组件重新render之后会调用该生命周期函数

componentWillUnmount

组件卸载时将会被调用

整个声明周期见下图

图片描述

查看原文: react-生命周期

  • ticklishsnake
  • greengoose
  • yellowkoala
  • tinybear
  • organicmouse