面试的时候问到了如何运用，这里再回顾一下。

也叫生命周期钩子函数（生命周期钩子）

生命周期大概分成三个阶段：初始化阶段，更新阶段，卸载

将组件放入页面的过程中，React会在合适的时间进行函数的调用。调用和你写的顺序，是无关的。

挂载（初始化）调用顺序：由ReactDOM.render()触发

1.constructor:构造器,做初始化，一般放在最上方

constructor(props){super(props)
//这一行写初始化状态
}

2.componentWillMount：组件将要挂载

componentWillMount(){}

3.render:初始化渲染、状态更新之后，一更新状态，就调用

页面想要出现组件，调用render进行挂载

必须使用的

4.componentDidMount:组件挂载完毕，只执行一次

React承诺，组件挂载完毕，就帮助调用componentDidMount。

做一些初始化的事情：

开启定时器
发送网络请求
订阅消息

卸载组件

componentWillUnmount:组件将要被卸载（可放入清除定时）

React帮助调用componentWillUnmount

由ReactDOM.unmountComponentAtNode()触发

做一些收尾的事情：

清除定时器
取消订阅

更新过程

（一）正常更新：调用setState()进行性的更新（建立在改了数据的情况）

1.shouldComponentUpdate：组件是否应该被更新

shouldComponentUpdate(){return false
}

setState()更新状态，问一下钩子shouldComponentUpdate应不应该更新页面，true就允许，false阀门关闭，不调用render()

注意：如果不写shouldConponentUpdate,那么默认有这个，且返回值为true,写了就以写的为标准。必须有返回值，且是布尔类型。

2.componentWillUpdate:组件将要更新，如何更新，调用render更新

3.render：调用它去更新

4.componentDidUpdate:更新完毕

（二）forceUpdate 强制更新（不修改就让它更新）

不想对状态有任何的修改,就让它更新。

不受到阀门shouldComponentUpdate的控制，阀门开启关闭，并不影响。直接到componentWillUpdate

按钮写个事件 force,点击按钮，强制更新

//强制更新的回调函数
force = ()=>{this.forceUpdate()}

1.componentWillMount：组件将要挂载

2.render

3.componentDidUpdate

（三）父组件render

前提：父子组件

父组件一旦render，组件将要接受props标签属性（参数），这里的生命周期要写在子组件中。

1.componentWillReceiveProps(写在子组件):组件将要接收新的props的钩子

第一次传的不算，接受新的，以后的才是。也可以接收参数props

2.shouldComponentUpdate

3.componentWillUpdate:组件将要更新，如何更新，调用render更新

4.render：调用它去更新

5.componentDidUpdate:更新完毕

转运锦鲤~~~~~~~

React生命周期函数-生命周期回调函数相关推荐

微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
小程序的生命周期回调函数onLoad，onReady，onShow
onLoad: 只触发一次,页面加载时触发,从二级页面回来时不会触发(使用navigateBack()回跳是可以重新执行onLoad),以及tabBar首次会执行onload,第二次进入onload不 ...
android activity 回调函数,Android Activity的生命周期
Activity的生命周期 Android系统根据activity的所处不同阶段对应的唤起其特定的回调函数来执行代码.activity的一系列有序的生命周期回调函数.本文将来讨论下activity各阶 ...
七十七、React中的propTypes，defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
React 初探 [五] React 组件的生命周期
说起生命周期,最先接触的是Andorid 开发中 Activity 和 Fragment 的生命周期,再者是Vue 组件,那么今天要梳理的是React 组件的生命周期,可见对生命周期的理解和掌握对组件 ...
Cocos生命周期回调
Cocos Creator 为组件脚本提供了生命周期的回调函数.用户只要定义特定的回调函数,Creator 就会在特定的时期自动执行相关脚本,用户不需要手工调用它们. 目前提供给用户的生命周期回调函数 ...
详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
介绍一下Spring Boot启动流程以及生命周期勾子函数？
代码那些事儿 2020-02-22 16:10:15 上篇文章介绍了Spring Boot自动配置的原理,但是对于Spring Boot应用的整个启动流程还是一头雾水,虽然Spring Boot大大简 ...
Vue生命周期函数（钩子函数）
生命周期函数相关什么是周期函数从Vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类: 创 ...

React生命周期函数-生命周期回调函数

也叫生命周期钩子函数（生命周期钩子）

挂载（初始化）调用顺序：由ReactDOM.render()触发

卸载组件

更新过程

React生命周期函数-生命周期回调函数相关推荐

最新文章

热门文章