P19:React高级-生命周期讲解
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P19:React高级-生命周期讲解相关的知识,希望对你有一定的参考价值。
React16 基础
阐述
这节继续学习React生命周期中的 Updation
阶段,也就是组件发生改变的更新阶段,这是React生命周期中比较复杂的一部分,它有两个基本部分组成,一个是 props
属性改变,一个是 state
状态改变(这个在生命周期的图片中可以清楚的看到)。
shouldComponentUpdate 函数
shouldComponentUpdate
函数会在组件更新之前,自动被执行。
比如写入下面的代码:
shouldComponentUpdate()
console.log('shouldComponentUpdate---组件发生改变前执行')
它要求返回一个布尔类型的结果,必须有返回值,这里就直接返回一个 true
了(真实开发中,这个是有大作用的)。
shouldComponentUpdate()
console.log('shouldComponentUpdate---组件发生改变前执行')
return true
现在就可以在控制台 console
里看到结果了,并且结果是每次文本框发生改变时都会随着改变。如果你返回了 false
,这组件就不会进行更新了。
简单点说,就是返回 true
,就同意组件更新;返回false
,就反对组件更新。
componentWillUpdate 函数
componentWillUpdate
在组件更新之前,但 shouldComponenUpdate
之后被执行。
但是如果 shouldComponentUpdate
返回 false
,这个函数就不会被执行了。
//shouldComponentUpdate返回true才会被执行。
componentWillUpdate()
console.log('componentWillUpdate---组件更新前,shouldComponentUpdate函数之后执行')
componentDidUpdate
componentDidUpdate
在组件更新之后执行,它是组件更新的最后一个环节。
componentDidUpdate()
console.log('componentDidUpdate----组件更新之后执行')
为了方便我们看出结果,可以在每个函数前加上序号。
最后我们可以看到控制台输出的结果如下:
1-shouldComponentUpdate---组件发生改变前执行
2-componentWillUpdate---组件更新前,shouldComponentUpdate函数之后执行
3-render----开始挂载渲染
4-componentDidUpdate----组件更新之后执行
结果和我们写的顺序也是相对的,讲到这里,你一定对React的生命周期函数有了比较直观的了解了。
componentWillReceiveProps 函数
我们可以先在 Beauty.js
组件里写下这个函数,例如下面的代码。
componentWillReceiveProps()
console.log('componentWillReceiveProps')
这时候会发现函数什么时候都不会被执行,因为 Beauty.js
算是一个顶层组件,它并没接收任何的 props
。可以把这个函数移动到 BeautyItem.js
组件中。
凡是组件都有生命周期函数,所以子组件也是有的,并且子组件接收了 props
,这时候函数就可以被执行了。
componentWillReceiveProps()
console.log('child - componentWillReceiveProps')
这个时候再预览,就会看到 componentWillReceiveProps
执行了。
那现在可以总结一下它的执行时间了。
子组件接收到父组件传递过来的参数,父组件
render
函数重新被执行,这个生命周期就会被执行。
也就是说这个组件第一次存在于Dom中,函数是不会被执行的;
如果已经存在于Dom中,函数才会被执行。
这个生命周期算是比较复杂的一个生命周期,需要我们花点时间去消化。
这节课就把 updation
里的生命周期函数都讲过了,下节课会把剩下的一点 Unmounting
讲了,然后会讲一下生命周期的实际应用。
以上是关于P19:React高级-生命周期讲解的主要内容,如果未能解决你的问题,请参考以下文章
P20:React高级-生命周期讲解 componentWillUnmount