React学习笔记3

Posted 2020-07-25

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全部的生命周期钩子函数