React学习总结—生命周期

react

React组件的生命周期根据广义定义描述,可以将其分为挂载(Mounted)、更新(Update)和卸载(Unmounting)三个阶段,每个阶段React都封装了对应的hack函数,各阶段包含的hack函数如下图

根据这个图,我们详细说明一下各hack函数执行顺序和作用

Mounted挂载阶段

该阶段是组件的挂载阶段,组件主要通过render方法解析生成对应的DOM节点,并将其推入浏览器的DOM结构中,完成组件状态的初始化。
constructor 方法是React组件的构造函数,在该函数中可以使用this.state来初始化React组件的状态值
componentWillMount 方法是在render之前执行的方法,而且该方法只执行一次,所以在该方法中执行setState方法是没有意义的。如果需要发送AJAX请求来初始化页面,可以在该函数中调用发送AJAX请求的方法
componentDidMount 方法是在render之后执行的方法,同componentWillMount一样,该方法也是只执行一次。该方法被调用时已经渲染出真实的DOM节点,所以在该方法中可以使用this.getDomNode()、ReactDom.findDomNode()或this.refs访问到真实的DOM节点。如果在该方法中执行setState方法,组件会再次更新。

update更新阶段

数据更新过程指的是父组件向下传递props或组件自身执行setState方法时发生的一系列更新动作。

如果组件自身的state更新了,那么会依次执行shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate方法;若因父组件的props发生变化而更新组件,在shouldComponentUpdate方法执行之前会执行componentWillReceiveProps方法

shouldComponentUpdate(nextProps,nextState) 方法是在组件更新重新渲染dom之前调用的组件函数,该方法将组件是否重新渲染的权限交给了开发者,当该函数返回false时,表示该组件不需要重新渲染,返回true表示该组件需要重新渲染。在React中,该函数默认返回true。利用改函数可以提高react的性能,但是使用该函数需要谨慎,见文章什么时候要在React组件中写shouldComponentUpdate?

componentWillReceiveProps(nextProps) 方法是在父组件更新props而更新该组件时,在shouldComponentUpdate之前执行的方法。此方法可以作为React在props传入后,修改当前组件state的机会,并且调用setState方法不会二次渲染。

componentWillUpdate(nextProps,nextState) 方法是在shouleComponentUpdate方法返回true的时候执行的方法,该方法代表在更新过程中渲染前的时刻,但是在该方法中不能使用setState方法,如果需要更新 state 来响应某个 prop 的改变,请使用 componentWillReceiveProps。

componentDidUpdate() 方法是在更新过程渲染后执行的方法,在该方法中可以对更新之后的Dom元素进行操作,并且可以使用setState方法

unMount卸载阶段

组件的卸载非常简单,只有componentWillUnMount这一个卸载前状态。

在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

以上是 React学习总结—生命周期 的全部内容, 来源链接: utcz.com/z/383695.html

回到顶部