React学习笔记3

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React学习笔记3相关的知识,希望对你有一定的参考价值。

React的生命周期

 

生命周期分为三个阶段

 

1.mounted(初始化的时候)

当我们看见页面元素从JSX变成了DOM节点时,React组件已经被载入(mounted)到页面中了

 

2.update(组件在运行中如果发生状态和属性改变时)

当React组件中的数据发生改变时,需要重新渲染页面(重新更新页面元素的时候,例如获取本次的数据和上次数据不一样,需要重新更新页面数据),这时需要将React组件重新渲染一次

 

3.unmount(组件卸载和销毁状态)

当组件需要从页面中废弃和销毁时,就需要将React组件从页面中删除

 

React对这三个不同阶段的状态定义了不同的事件去监听状态


 

钩子函数

当程序中某些状态只要发生改变,程序立马去通知对应的处理函数去处理,这个函数就是钩子函数


 

React在这三个状态中封装了哪些钩子函数?

 

mounted状态中的函数(初始化时候的钩子函数)

1.getDefaultProps()

设置组件内部属性(一般用于设置组件内部的常量),比如,请求一个ajax,请求的url就可以设置成内部属性,因为url是不变的。返回对象

2.getInitialState()

设置组件内部的状态。返回对象

3.componentWillMount()

组件即将加载时,在这时可以获取ajax数据,并解析。

4.render()

默认。返回JSX

5.componentDidMount()

组件加载完毕时,挂载的状态。比如: 
1.想得到渲染后的真实的DOM节点 
2.调用第三方插件

以上五个钩子函数按照序号的顺序执行,示例代码如下:

 1 var Compo = React.createClass({
 2 getDefaultProps:function(){
 3 console.log("1 get props")
 4 return {}
 5 },
 6 getInitialState:function(){
 7 console.log("2 get state")
 8 return {}
 9 },
10 componentWillMount:function(){
11 console.log("3 will mount")
12 },
13 render:function(){
14 console.log("4 render")
15 return(
16 <div>
17 This is render!
18 </div>
19 )
20 },
21 componentDidMount:function(){
22 console.log("5 did mount");
23 }
24 })
25 ReactDOM.render(<Compo/>,document.getElementById("example"));

 

运行结果如图: 
技术分享

易错:render只负责渲染,每次数据刷新都调用render函数


 

update状态中的函数(运行中的钩子函数)

1.componentWillReceiveProps(nextProps) 
当组件接收到新的props时,调用此函数,然后修改当前的props

2.shouldComponentUpdate(nextProps,nextState) 
给开发者一个权限,在收到新的props和state时,是否调用render渲染,可以写入一些逻辑,控制数据的更新。返回Boolean

3.componentWillUpdate(nextProps,nextState) 
在组件重新渲染之前执行,在渲染之前最后的props和state都发生了改变,这个函数使用很少,一般用在日志和记录的打印

4.componentDidUpdate() 
当组件重新渲染完毕后调用

 

组件运行中生命周期函数被触发的条件:

1.当父组件修改子组件的属性props时 
2.当组件自身修改状态state时


 

Unmount状态中的函数(卸载时的钩子函数)

componentWillUnmount() 
在组件即将被卸载时调用,这个函数几乎不会使用到,因为浏览器本身具有垃圾回收机制


 

总结

 

在开发中很少使用React全部的生命周期钩子函数

以上是关于React学习笔记3的主要内容,如果未能解决你的问题,请参考以下文章

react学习笔记3

React学习笔记3

Python 3学习笔记

React 学习笔记总结

笔记react 学习与记录

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段