关键词：
概念: 在组件创建到加载到页面上运行, 以及组件被销毁的过程中, 总是伴随着各种各样的事件, 这些在组件特定时期触发的时间, 统称为组件的生命周期;
组件的生命周期分为三部分:
组件创建阶段 : 组件创建阶段的生命周期函数, 有一个显著的特点, 创建阶段的生命周期函数在组件的一生中, 只执行一次 ;
componentWillMount : 组件将要被挂载, 此时还没有开始渲染DOM
reder : 第一次开始渲染真正的虚拟DOM, 当render执行完, 内存中就有了完整的虚拟DOM
componentDidMount : 组件完成了挂载 , 此时组件已经显示到了页面上, 当这个方法执行完, 组件就进入了运行中的状态 ;
组件运行阶段 : 根据组件中的 state 和 props 的改变, 有选择性的触发0次或者多次
componentWillRectiveProps : 组件将要接收新属性, 只要这个方法被触发 , 就证明组件为当前组件传递了新的属性值 ;
shouldComponentUpdate : 组件是否需要被更新 , 此时组件尚未被更新, 但是 state 和 props 肯定是最新的 ;
componentWillUpdate : 组件将要被更新 , 此时尚未开始更新 , 内存中的DOM树还是旧的 ;
render : 此时又要根据最新的 state 和 props 重新渲染最新的DOM树, 当render调用完毕, 内存中的旧DOM树已经被新DOM树替换了 ; 此时页面还是旧的 ;
componentDidUpdate : 此时页面被重新渲染, state 和虚拟DOM和页面已经完全保持同步 ;
组件销毁阶段 : 一声也是只执行一次
componentWillUnmount : 组件将要被卸载 , 此时组件还可以正常使用 ;
import React from 'react'
class Demo extends React.Component
constructor(props)
super(props)
this.state =
static defaultProps =
componentWillMount()
// 页面即将被挂载, 尚未挂载; 虚拟 DOM 还没有创建
render()
// 即将渲染内存中的虚拟 DOM, return 之后内存中才会有虚拟 DOM 仍然没有渲染到页面
return <div></div>
componentDidMount()
// 已经渲染到页面, 组件脱离创建生命周期进入运行生命周期
// DOM 元素最早在这里操作
componentWillReceiveProps(nextProps)
// props 更改时触发的生命周期函数, 此时获取到值仍然是旧的, 可以通过参数获取新值
// 第一次被渲染时, 不会被触发此钩子函数
shouldComponentUpdate(nextProps, nextState)
// 组件是否需要更新 reutrn true 或者 false 此时获取到值仍然是旧的, 可以通过参数获取新值
return true
componentWillUpdate(nextProps, nextState)
// 组件将要被更新, 也没有更新, 此时获取到值仍然是旧的, 可以通过参数获取新值
componentDidUpdate(prevProps, prevState)
// 组件完成更新, 此时获取到值是最新的, 可以通过参数获取旧值
绑定 this 并传值的几种方式
import React from 'react'
class BindThis extends React.Component
constructor(props)
super(props)
this.state =
msg: '这是初始化的msg'
// 修改指向之後，再指向同一塊内存地址調用
this.inputChange2 = this.inputChange2.bind(this, '??', '??')
render()
return <div>
<input type="button" value="第一种改变方式" onClick=inputChange1.bind(this, '??'， '??')>
<input type="button" value="第二种改变方式" onClick=inputChange2>
/* 使用箭頭函數，不會修改 this 的指向 */
<input type="button" value="第三种改变方式" onClick=() => this.inputChange3('??', '??')>
<hr/>
<div>this.state.msg</div>
</div>
// 通過 bind 改變 this 指向，再傳值
inputChange1(arg1, arg2)
this.setState(
msg: `$arg1 ---- $arg2`
)
inputChange2(arg1, arg2)
this.setState(
msg: `$arg1 ---- $arg2`
)
inputChange3(arg1, arg2)
this.setState(
msg: `$arg1 ---- $arg2`
)
react生命周期(代码片段)
...经历一些特定的阶段。2.React组件中包含一系列钩子函数(生命周期回调函数),会在特定的时刻调用。3.我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。一、react生命周期（旧的）生命周期的三... 查看详情
react——生命周期(代码片段)
react——生命周期函数组件无生命周期，生命周期只有类组件才拥有生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法。例如... 查看详情
react的生命周期(代码片段)
...ate)2.4.componentDidUpdate(prevProps,prevState)2.5.render()3.React新增的生命周期(个人补充)3.1.getDerivedStateFromProps(nextProps,prevState)3.2.getSnapshotBeforeUpdate(prevProps,prevState)这周开始学习React的生命周期。React的生命周期从广义上分为三个阶段：挂载... 查看详情
react学习笔记总结(代码片段)
文章目录1.React(v16.8版本)生命周期2.React(v16.8版本)生命周期更新流程2.1三个更新流程2.2setState()的生命周期流程(对应上图2号线)2.3forceUpdate()的生命周期流程(对应上图3号线)2.4父组件render()渲染的生命周期流程(对应上图1号线)2.5React(v... 查看详情
react生命周期(代码片段)
生命周期：一个组件在不同的时期会调用不同时期的函数接口（也就是对应的生命周期函数）react组件的生命周期总共提供了10个API。装载：依次执行以下函数：constructor--组件被加载前最先调用，只调用一次 1、getDefaultProps--... 查看详情
react中组件的生命周期(详细)(代码片段)
组件的生命周期今天学习了组件的生命周期~理解生命周期的回调函数<=>生命周期钩子函数<=>生命周期函数<=>生命周期钩子组件从创建到死亡经历的一些特定的阶段React组件中包含一系列钩子函数(生命周期... 查看详情
22.1react生命周期(代码片段)
在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论组件生命周期概述1.初始化在组件初始化阶段会执行constructorstaticgetDerivedStateFromProps()componentWillMount()/UNSAFE_componentWillMount()render()componentDidMount()###2.更新阶... 查看详情
vue生命周期和react生命周期对比(代码片段)
一vue的生命周期如下图所示(很清晰)初始化、编译、更新、销毁 二vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>vue生... 查看详情
react18.生命周期(代码片段)
React生命周期图通过这张图，可以看到React生命周期的四大阶段：Initialization：初始化阶段Mounting：挂载阶段Updation：更新阶段Unmounting：销毁阶段什么是生命周期函数？一句话概括：生命周期函数指在... 查看详情
react18.生命周期(代码片段)
React生命周期图通过这张图，可以看到React生命周期的四大阶段：Initialization：初始化阶段Mounting：挂载阶段Updation：更新阶段Unmounting：销毁阶段什么是生命周期函数？一句话概括：生命周期函数指在... 查看详情
react系统学习5（组件生命周期）(代码片段)
...变化的时候，就会触发一次render。render函数就是React生命周期中的一个，与之类似的这些函数通常被称作React生命周期函数、React生命周期钩子函数、React生命周期钩子 查看详情
react组件的生命周期(代码片段)
目录React组件的生命周期创建时（挂载阶段）更新时（更新阶段）卸载时（卸载阶段）不常用的钩子函数React组件的生命周期意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功... 查看详情
react旧有生命周期和新生命周期的解析(代码片段)
React组件生命周期（旧有格式）新的生命周期下面是旧有声明周期的案例演示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Comp 查看详情
react旧有生命周期和新生命周期的解析(代码片段)
React组件生命周期（旧有格式）新的生命周期下面是旧有声明周期的案例演示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Comp 查看详情
react9.组件的生命周期(代码片段)
【React】9.组件的生命周期组件的生命周期概述创建阶段更新阶段卸载阶段组件的生命周期概述意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等組件的生命周期：组件从被... 查看详情
react9.组件的生命周期(代码片段)
【React】9.组件的生命周期组件的生命周期概述创建阶段更新阶段卸载阶段组件的生命周期概述意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等組件的生命周期：组件从被... 查看详情
react-native生命周期(代码片段)
一、前言问： 什么是组件的生命周期？ 组件的生命周期中都包含哪些方法，各有什么作用？ 生命周期的方法都在什么时候调用？ 生命周期： 顾名思义，一个主体从出生到死亡的整个过程学习组件（React的基... 查看详情
react生命周期详解(代码片段)
React生命周期图解： 一、旧版图解： 二、新版图解： 从图中，我们可以清楚知道React的生命周期分为三个部分: 实例化、存在期和销毁时。旧版生命周期如果要开启asyncrendering，在render函数... 查看详情