5：React生命周期以及Diff算法

最新推荐文章于 2023-02-02 01:02:59 发布
最新推荐文章于 2023-02-02 01:02:59 发布
阅读量125 收藏
点赞数
分类专栏： # React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49075665/article/details/118539279
版权

旧生命周期:

  1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
    1. constructor()
    2. componentWillMount()
    3. render()
    4. componentDidMount() =====> 常用
      一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
  2. 更新阶段: 由组件内部this.setSate()或父组件render触发
    1. shouldComponentUpdate()
    2. componentWillUpdate()
    3. render() =====> 必须使用的一个
    4. componentDidUpdate()
  3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount() =====> 常用
      一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
      旧生命周期
<script type="text/babel">
		//创建组件
		class Count extends React.Component{

			//构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {count:0}
			}

			//加1按钮的回调
			add = ()=>{
				//获取原状态
				const {count} = this.state
				//更新状态
				this.setState({count:count+1})
			}

			//卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

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

			//组件将要挂载的钩子
			componentWillMount(){
				console.log('Count---componentWillMount');
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('Count---componentWillUpdate');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('Count---componentDidUpdate');
			}

			render(){
				console.log('Count---render');
				const {count} = this.state
				return(
					<div>
						<h2>当前求和为：{count}</h2>
						<button onClick={this.add}>点我+1</button>
						<button onClick={this.death}>卸载组件</button>
						<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
					</div>
				)
			}
		}
		
		//父组件A
		class A extends React.Component{
			//初始化状态
			state = {carName:'奔驰'}

			changeCar = ()=>{
				this.setState({carName:'奥拓'})
			}

			render(){
				return(
					<div>
						<div>我是A组件</div>
						<button onClick={this.changeCar}>换车</button>
						<B carName={this.state.carName}/>
					</div>
				)
			}
		}
		
		//子组件B
		class B extends React.Component{
			//组件将要接收新的props的钩子
			componentWillReceiveProps(props){
				console.log('B---componentWillReceiveProps',props);
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('B---shouldComponentUpdate');
				return true
			}
			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('B---componentWillUpdate');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('B---componentDidUpdate');
			}

			render(){
				console.log('B---render');
				return(
					<div>我是B组件，接收到的车是:{this.props.carName}</div>
				)
			}
		}
		
		//渲染组件
		ReactDOM.render(<Count/>,document.getElementById('test'))
</script>

新生命周期：

  • 废弃了三个钩子：componentWillReceiveProps、 componentWillMount 、componentWillUpdate
  • 新提出两个钩子：getDerivedStateFromProps、getSnapshoBeforeUpdate
  1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
    1. constructor()
    2. getDerivedStateFromProps
    3. render() =====> 必须使用的一个
    4. componentDidMount() =====> 常用
      一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
  2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    1. getDerivedStateFromProps
    2. shouldComponentUpdate()
    3. render()
    4. getSnapshotBeforeUpdate
    5. componentDidUpdate()
  3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount() =====> 常用
      一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

新生命周期

<script type="text/babel">
		//创建组件
		class Count extends React.Component{
			//构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {count:0}
			}

			//加1按钮的回调
			add = ()=>{
				//获取原状态
				const {count} = this.state
				//更新状态
				this.setState({count:count+1})
			}

			//卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//强制更新按钮的回调
			force = ()=>{
				this.forceUpdate()
			}
			
			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件更新完毕的钩子
			componentDidUpdate(preProps,preState,snapshotValue){
				console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
			}
			
			render(){
				console.log('Count---render');
				const {count} = this.state
				return(
					<div>
						<h2>当前求和为：{count}</h2>
						<button onClick={this.add}>点我+1</button>
						<button onClick={this.death}>卸载组件</button>
						<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
					</div>
				)
			}
		}
		
		//渲染组件
		ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>

getSnapshotBeforeUpdate的应用

<script type="text/babel">
        class NewsList extends React.Component{
            state = {newArr:[]}

            componentDidMount(){
                setInterval(()=>{
                    const {newArr} = this.state
                    const news = '新闻' + (newArr.length+1)
                    this.setState({newArr:[news,...newArr]})
                },1000)
            }

            getSnapshotBeforeUpdate(){
                return this.refs.list.scrollHeight
            }

            componentDidUpdate(preProps,preState,height){
                this.refs.list.scrollTop += this.refs.list.scrollHeight - height
            }

            render(){
                return(
                <div className="list"  ref="list">
                    {
                        this.state.newArr.map((n,index) =>{
                            return <div key={index} className="news">{n}</div>
                        })
                    }
                </div>
                )
            }
        }
        ReactDOM.render(<NewsList/>,document.getElementById('test'))
    </script>

Diff：对比之前的虚拟DOM与更新后的虚拟DOM，决定是否需要再一次的渲染

经典面试问题：
1). react/vue中的key有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key最好不要用index?

  1. 虚拟DOM中key的作用：
    1). 简单： key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
    2). 详细：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,

    随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

     a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
 	(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
 	(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
 b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
 根据数据创建新的真实DOM，随后渲染到到页面

  2. 用index作为key可能会引发的问题：

    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
      会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    2. 如果结构中还包含输入类的DOM：
      会产生错误DOM更新 ==> 界面有问题。
    3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
      仅用于渲染列表用于展示，使用index作为key是没有问题的。
      在这里插入图片描述

  3. 开发中如何选择key?:
    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    2.如果确定只是简单的展示数据，用index也是可以的。

Yolo.H
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-dom-diff:演示React组件的生命周期和DOM diff算法
05-12
React是Facebook推出的一款...它提供了一个实际的示例，帮助开发者更好地理解和利用React的生命周期方法以及DOM diff算法，以提升应用的响应速度和用户体验。对于想要深入学习React的开发者来说，这是一个宝贵的资源。
浅谈从React渲染流程分析Diff算法
12-13
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经...
React中的Diff算法
m0_53644435的博客
03-12 1万+
一、什么是Diff算法
React Diff算法详解
祥哥的说
01-14 6386
react diff
React之Diff算法
认定的总要想办法去完成。
02-02 1356
对于Vue2的diff算法使用了双指针，React的diff算法没有使用双指针，是因为更新的jsx对象的newChildren为数组的形式，但是和newChildren中每个组件比较的是current fiber，对fiber的兄弟节点是通过silbing来相连的，我们通过下标来去获取下一个newChildren项，但是对于fiber只能通过fiber.silbing来获取对应的项，所以没有使用双指针法来进行diff。既然唯一的可能性已经不能复用，则剩下的fiber都没有机会了，所以都需要标记删除。
react项目配合diff实现文件对比差异功能
见贤思齐焉，见不贤内自省
01-07 4089
react项目配合diff实现文件对比差异功能
自顶而下学习react源码 （2）架构篇 render阶段
lin_fightin的博客
02-03 1202
架构 Reconciler工作的阶段属于render阶段，Renderer工作的阶段属于commit阶段。 render与commit阶段统称为work，即React在工作中。相对应的，如果任务正在Scheduler内调度，就不属于work。 render阶段 分为递归两个阶段。 递阶段 递阶段是深度优先遍历，为遍历到的每个fiber节点调用beginWork方法。该方法会根据传入的fiber节点创建子fibei节点，并且将fiber节点连接起来（不会创建dom）。当遍历到叶子节点的时候，该叶子节点完成递阶
react-react面试题之diff的原理.zip
最新发布
03-20
React是Facebook开发的一款用于构建用户界面的JavaScript库，尤其在构建单页面应用(SPA)时，它的虚拟DOM（Virtual DOM）技术以及高效的更新策略——Diff算法，为开发者提供了高效的性能优化手段。本篇文章将深入探讨...
React-comments:React评论系统
03-27
5. **生命周期方法**：React组件有多种生命周期方法，如`componentDidMount`（组件挂载后调用）、`componentDidUpdate`（组件更新后调用）等，可用于在特定时刻执行某些操作，比如首次加载时获取评论数据或更新后...
Vue和React的区别到底是什么？
Always-Learning
03-06 2万+
一提到前端框架，相信大家都对Vue和React不陌生，这两个前端框架都是比较主流的，用户也都比较多，但是我们在使用这些框架的时候，是否对这两个框架之间的区别有所了解呢？接下来，让我们来一起的系统梳理这两个框架的区别是什么吧~ 预备知识介绍 在了解Vue和React的区别之前，我们首先来了解一下MVC和MVVM架构，这个知识点有助于我们对后续知识的了解。 MVC架构 首先MVC指的是Model-View-Controller，分别代表着模型层、视图层、控制器。 Model（模型层），主要管理的是.
【React】diff算法
GY的博客
11-15 1854
React之diff算法什么是虚拟DOM什么是Diff算法传统diff算法React的diff算法1. 什么是调和？2. 什么是React diff算法？3. diff策略。4. tree diff5. component diff：React对不同的组件间的比较，有三种策略。6. element diff：当节点处于同一层级时，diff提供三种节点操作：删除、插入、移动。 什么是虚拟DOM 虚拟DOM是一个对象，一个什么样的对象呢？一个用来表示真实DOM的对象。举个例子： 真实DOM <ul id=
React 中的diff 算法
weixin_50828895的博客
03-02 1959
虚拟DOM 和 Diff 算法 问题：我们知道state 更新组件的时候，只要state 变化就重新渲染视图，如果组件中只有一个DOM 元素需要更新时，也需要将整个组件内容重新渲染到页面中吗？ 回答：不是，虚拟DOM 和 Diff 算法可以达到部分更新 虚拟DOM： 本质上是个 js 对象，用来描述页面UI （React 元素就是虚拟DOM） 执行过程 React组件配合 state 创建一个虚拟DOM树 根据虚拟DOM树，生成一个真正的 DOM 树，再渲染到页面中 当 state 或者 pro
React diff算法的运行原理
龙小超的博客
01-06 524
React 的渲染机制 Reconciliation 过程React 采用的是虚拟 DOM (即 VDOM )，每次属性 (props) 和状态 (state) 发生变化的时候，render 函数返回不同的元素树，React 会检测当前返回的元素树和上次渲染的元素树之前的差异，然后针对差异的地方进行更新操作，最后渲染为真实 DOM，这就是整个 Reconciliation 过程，其核心就是进行新旧 DOM 树对比的 diff 算法。
React 生命周期&&diff算法
每天都要努力学习哦~~
04-09 325
事件处理 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 为了更好的兼容性 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) 为了高效 通过event.target得到发生事件的DOM元素对象 不要过度使用ref <script type="text/babel"> //创建类组件 class Demo extends React.Component { ...
Deep In React 系列之详解 React 16 的 Diff 策略
奇舞周刊
08-03 686
阅读本文大约需要 9 分钟这是我 Deep In React 系列的第二篇文章，如果还没有读过的强烈建议你先读第一篇：详谈 React Fiber 架构(1)。前言我相信...
简单版react原理分析（虚拟dom，节点渲染，数据更新，diff算法等）
Christopher的博客
02-27 1117
0.前言 本文将结合简化版本的react代码，对react的核心工作流程和原理进行梳理和讲解，本文重点会顺着react的执行流程机制进行原理性的描述，整个简化版的react代码量不多，可以参照代码结合讲解，效果更佳，代码戳这里 1. React React为一个对象，拥有render、createElement和createClass方法 1.1. React.render 传入虚拟dom及根节点进行挂载渲染 参数： React.render(element, container) element是Rea
浅谈React中的diff
sexy_squirrel的博客
04-03 1万+
### 简介  diff算法在React中处于主导地位，是React V-dom和渲染的性能保证，这也是React最有魅力、最吸引人的地方。  React一个很大一个的设计有点就是将diff和V-dom的完美结合，而高效的diff算法可以让用户更加自由的刷新页面，让开发者也能远离原生dom操作，更加开心的撸代码。    但总所周知，普适diff的复杂度对于大量dom对比会出现严重的性能问题，Rea...
React生命周期及事件详解
热门推荐
明明的博客
03-21 3万+
一、组件的详细说明和生命周期ComponentSpecs and Lifecycle） 组件的详细说明（Component Specifications） 当通过调用 React.createClass() 来创建组件的时候，你应该提供一个包含 render 方法的对象，并且也可以包含其它的在这里描述的生命周期方法。 render ReactComponent render
react diff算法
全栈攻城狮的博客
12-21 195
react diff 算法 react 15 diff 数据结构 树结构 关键计算点 Diff 算法性能突破的关键点在于“分层对比”； 类型一致的节点才有继续 Diff 的必要性； key 属性的设置，可以帮我们尽可能重用同一层级内的节点。 react 16 diff 数据结构 链表结构， 每一个节点都存这上下文信息 export type Fiber = { tag: TypeOfWork, // 类型 type: 'div', return: Fiber|null,
.react.js:react核心库
07-14
此外，React还通过使用合适的Diff算法来进行快速而高效的虚拟DOM更新。 React具有强大而灵活的生命周期方法，可以在组件的不同阶段进行逻辑处理和与外部数据交互。通过这些生命周期方法，开发者可以精确地控制组件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值