React学习(5)——组件的生命周期之更新过程

 学习 React  原创  管理员  2017-09-04 06:23

概要:当组件被加载到DOM树上之后,用户在网页上可以看到组件的第一印象,但是要提供更好的交互体验,就要让该组件可以随着用户的操作来改变显示的内容。当props或state被修改的时候,就会引发组件的更新。

更新过程会依次调用下面的函数,其中render和加载过程一样,没有差别。

componentWillReceiveProps(nextProps)

只要是父组件的render被调用,在render中被渲染的子组件就会经历更新的过程。不管父组件传给子组件的props有没有改变,都会触发子组件的此函数被调用。

注意:通过setState方法触发的更新不会调用此函数

shouldComponentUpdate(nextProps,nextState)

在更新过程中,React首先要去调用此函数,如果返回true,则继续更新并调用render;如果返回false,则立刻停止更新过程,也就不会引发后续的渲染了。

componentWillUpdate

render之前被调用

render

通知渲染页面

componentDidUpdate

render之后被调用

卸载过程

componentWillUnmount

当组件要从DOM树上删除之前,该函数会被调用,所以,它适合做一些清理工作。

注意:没有componentDidUnmount函数。

完整示例

 

深入浅出React和Redux  

编辑:myweb   最后更新于:2017-09-02 16:00


版权声明:本站所有原创内容受到法律的严格保护,版权归本站所有。如果您觉得我们的内容有价值,您仍然可以进行自由传播,但必须显著地标识或说明此内容在本站的链接地址。




联系我:help@wodeabc.com鄂ICP备14016278号-2
©2016-2021 我的ABC All Rights Reserved.
友情链接: 一起编程网
点击这里给我发消息
我的ABC交流群