Reat的生命周期:
装载过程:
当组件装载之后,用户看到的是组件的第一印象,但是要提供比较好的交互效果,需要随着用户的操作来更改内容,当props或者state修改的时候,会引发更新的过程。
1.componentWillReceiveProps(nextProps)
网络上的误区,该函数仅在props改变的时候更新,事实上,只要是父组件的render函数调用的时候,在render函数中经历的子组件就会经历更新的过程,不管父组件传给子组件的props有没有改变,都会触发componenWillReceiveProps函数。
注意,通过this.setState方法触发的函数不会调用该函数。
2.shouldComponentUpdate(nextProps,nextState)
这个函数是生命周期函数中第二重要的函数了,第一当然是render了~
render函数返回的结果用于构造DOM对象,而shouldComponentUpdate函数返回的一个布尔值,该返回值告诉react更新是否需要继续。
默认情况下,该函数的返回值是true,表示每一更新都要重新渲染。这难免会造成资源的浪费,当然在一些小的系统中,还是可以接受的,如果在大项目中势必会影响性能。最简单的就是比较两个参数中的当前值和前一个值是否相同,若相同,则返回false。
值得一提的是,在调用this.setState函数的时候,并不是立刻去更新该组件,在执行函数shouldComponentUpdate的时候,this.state依旧是this.setState之前的值,所以需要比较nextProps、nextState,this.props,this.state相互比较。
3.componentWillUpdate 和componentDidUpdate
如果组件shouldComponentUpdate函数执行结果为true的时候,React会一次执行componentWillUpdate,render,componentDidUpdate函数,作用同装载过程一样。
卸载过程:
卸载的过程只涉及到一个函数componentWillUnMount,当react组件要从DOM树上删掉之前,会调用 componentWillUnMount,该函数会做一些清理的工作。