学习React(四)

学习React(四)

componentWillMount(被放弃使用)

复制代码
组件被挂载(渲染)到页面之前,自动执行,此时render函数,还没有执行,无法在这一步操作真实DOM

render

复制代码
挂载(渲染)页面,把虚拟DOM转换成真实DOM,即定义的变量以及jsx被执行

componentDidMount

复制代码
组件被挂载(渲染)到页面之后,自动执行,此时render函数,已经执行完成,可以在这一步进行DOM节点的操作

shouldComponentUpdate(nextProps,nextState)

复制代码
组件被更新之前(即每次改变state,props的值都会执行该函数),自动执行,它会返回true或者false,返回true就继续执行componentWillUpdate,否则就不执行,
可以通过nextProps.[属性值]与当前this.props.[属性值]比较是否一样,来选择return true还是return false,来执行组件中的render函数

componentWillUpdate(被放弃使用)

复制代码
执行在shouldComponentUpdate之后,shouldComponentUpdate返回值为true,才执行componentWillUpdate,接着继续执行render函数重新渲染页面,当页面渲染完成后执行componentDidUpdate

componentDidUpdate

复制代码
组件更新完成之后,自动执行

componentWillReceiveProps(被放弃使用)

复制代码
该函数要执行的条件:
1.首先它要从父组件接受参数;
2.这个组件要已经在父组件中渲染过一次,才会执行,如果这个组件是第一次存在于父组件中,就不会执行

componentWillUnmount

复制代码
组件被删除之前,自动执行

react运行的生命周期

复制代码
1.Initialization(初始化):初始化页面在构造函数中获取props值,以及state值的设置,页面创建过程中只执行一次

2.Mounting(挂载):设置好props和state的值之后,开始挂载(渲染)页面,页面创建过程中只执行一次

3.Updation(更新):当页面中state,props的值开始改变时,执行这里的函数

4.Unmounting(销毁):页面卸载时,自动执行
相关推荐
Spider_Man30 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
10年前端老司机2 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
安替-AnTi2 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
FairyDiana4 小时前
从 "等一下" 到 "马上说":React 牵手 DeepSeek 玩转文本大模型
react.js·ai编程
山有木兮木有枝_4 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
多啦C梦a4 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
轻语呢喃6 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
Jolyne_6 小时前
可配置永久生效的Table组件的封装过程
前端·react.js
胡gh7 小时前
一次点击,让你明白浏览器事件传播机制与 React 合成事件
前端·react.js
_一两风7 小时前
深入理解 React 事件机制与 DOM 事件系统
react native·react.js