React 的生命周期

2018/03/13

一. 总览

component-lifecycle.jpg

二. 相关函数

getDefaultProps()

描述:设定默认的属性值。只在 React.createClass 方式创建的组件中有效,extends React.Component 方式创建的组件中设置静态属性defaultProps: static defaultProps = {…} 来代替。

使用场景:设定组件的默认属性值。


getInitialState()

描述:设置默认的状态值。只在 React.createClass 方式创建的组件中有效,extends React.Component 方式创建的组件中 可以在 构造函数 中通过 this.state = {…} 设置 状态值。或者 直接在class中 state = {…} 设置实例属性state 即可。

使用场景:设定组件状态


constructor(props, context)

描述:构造函数,只会在组件初始化时候调用一次。

使用场景:设定组件状态。

注意:

  1. 使用时需要调用 super(props)
  2. 设置状态直接this.state即可,不要使用setState()
  3. 构造函数可以省略 4. 构造函数中可以获取到props,也就是说可以根据props来设置state。

void componentWillMount()

描述:在组建第一次渲染前调用一次。

使用场景:基本不会用到。官方文档中推荐使用构造函数来代替。


void componentDidMount()

描述:在组建第一次渲染后调用一次。由于组件已经渲染,可以获取到refs。

使用场景:AJAX 初始化数据并设置状态、subscriptions 监听数据

注意:

  1. 设置了 subscriptions 监听后,需要在  componentWillUnmount 中解除监听

void componentWillReceiveProps(nextProps)

描述:props是父组件传递给子组件的,父组件刷新时会调用(不管props有没有更新,也不管父子组件之间有没有数据交换)

使用场景:在属性更新时,通过setState()重新设置子组件的state

注意:不管props有没有更新,也不管父子组件之间有没有数据交换,只要父组件刷新,子组件就会调用该方法。因此在使用时需要比较当前的props和nextProps,看是否有变化。


bool shouldComponentUpdate(nextProps, nextState)

描述:组件挂载之后,每次调用setState()或父组件更新后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render。

使用场景:在比较复杂的应用里,有一些数据的改变并不影响界面展示,可以在这里做判断,优化渲染效率。

注意:通过继承 React.PureComponent 可以自动进行比较,如果state和props都没有变化则不会重新渲染(只做了一层对象比较)。


void componentWillUpdate(nextProps, nextState)

描述:shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate会被调用

使用场景:使用情况比较少。


void componentDidUpdate()

描述:除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate

使用场景:组件更新后需要AJAX初始化数据


ReactElement render()

描述:渲染组件


void componentWillUnmount()

描述:组件被卸载的时候调用。

使用场景:在componentDidMount里面注册的事件需要在这里删除。

三. 组件更新路径

component-route.png

参考资料:

https://reactjs.org/docs/react-component.html

https://www.jianshu.com/p/4784216b8194

文章导航