React组件更新机制

最新推荐文章于 2024-04-29 20:08:54 发布
最新推荐文章于 2024-04-29 20:08:54 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50157463/article/details/112135030
版权

setState的两个作用，一个是修改state的，另一个是更新UI组件

react中组件更新时，其子组件或者说后代所有组件也会更新，但不会影响父组件、兄弟组件及兄弟组件的子组件。

如下图，可以概括为：

  1. 当父组件更新的时候，他的所有后代组件都会发生渲染；
  2. 子组件1-1更新时，子组件1-1、1-1-1、1-1-2都会发生更新渲染，子组件1-2和父组件都不会发生更新渲染
  3. 子组件1-2更新时，子组件的1-2、1-2-1、1-2-2会发生渲染，其他都不会渲染，如果组件1-2-1或者1-2-2还有子组件，那么也会发生更新渲染

在这里插入图片描述

魂断@蓝桥
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
setState的使用+React更新机制+events+受控和非受控组件
m0_46684624的博客
01-30 371
react,ref使用
React 组件间的通信示例
08-27
这种通信机制是 React 应用程序的核心，它使得组件之间能够相互协作，实现复杂的业务逻辑。 React 组件间的通信可以分为三种：父组件向子组件传值、子组件向父组件传值、组件A向无关系组件B传值。下面我们将详细...
从源码全面剖析 React 组件更新机制
weixin_33763244的博客
04-17 216
React 把组件看作状态机(有限状态机), 使用state来控制本地状态, 使用props来传递状态. 前面我们探讨了 React 如何映射状态到 UI 上(初始渲染), 那么接下来我们谈谈 React 时如何同步状态到 UI 上的, 也就是: React 是如何更新组件的? React 是如何对比出页面变化最小的部分? 这篇文章会...
react 子组件调用父组件方法，获取的数据不是最新值
最新发布
HYeeee的博客
04-29 675
react 子组件调用父组件方法，获取的数据不是最新值
react 中组件更新机制
weixin_44682587的博客
12-01 400
react 中组件更新机制 setState() 的两个作用：1.修改state 2.更新组件（UI) 过程∶父组件重新渲染时，也会重新渲染子组件。但只会渲染 当前组件子树（当前组件及其所有子组件)
react组件更新机制
qq_36582776的博客
03-13 756
3、组件更新会引起哪些相关组件更新？--以此组件为跟节点的子树的更新。2、setState的第二个参数，页面更新完后的回调函数。1、setState是异步更新state内容的。一、setState。
浅谈React中组件间抽象
08-28
最后，当我们转向使用ES6 Class来定义React组件时，发现它们不支持mixin。为了解决这个问题，ES7引入了decorator特性，允许我们在类或方法上添加元数据。虽然decorator目前尚未成为标准，但已经在一些库中得到广泛...
React 组件 API
12-14
React 组件API是React库中核心的组成部分，用于构建可复用、可组合的用户界面。在React中，组件是自...在编写React组件时，应始终考虑最佳实践，避免过度使用`forceUpdate`，并确保充分利用React的虚拟DOM优化机制。
react自定义日期组件datePicker
01-13
React的事件绑定机制使得我们可以轻松地响应用户操作。 4. **类型检查**：TypeScript的引入增强了代码的静态类型检查，确保了数据类型的正确性，减少了运行时错误。在`datePicker`组件中，我们可能会定义`interface...
React组件中的this的具体使用
08-27
在React组件中,this的使用是一个非常重要的概念，因为它关系到组件的生命周期和事件处理机制。在本文中，我们将详细介绍React组件中的this的使用方式，及其在JavaScript函数中的应用。 首先，让我们来看一个简单的...
详解React中传入组件的props改变时更新组件的几种实现方法
12-10
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是那么优雅，而且容易出错。所以今天来探讨一下这类实现会产生的问题和更好的实现方案。 何时使用派生状态
react更新机制
qq_43033748的博客
02-17 607
//终止render函数更新 shouldCompomponent(){ return falsh }
8-2、React更新机制
JasonJust博客站
02-08 373
React的渲染流程、更新流程
React、Vue框架如何实现组件更新，原理是什么？
热门推荐
study_way的博客
07-15 2万+
React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染整个组件树。
react类组件的更新
MRNAN的博客
05-19 1925
react 类组件的更新类组件状态的使用 类组件状态的使用 类组件的数据来源有两个地方： - 父组件传过来的属性。 - 自己内部的状态。 属性和状态发生变化后组件都会更新，视图都会渲染。
react 状态更新
weixin_35752122的博客
12-30 313
React 状态更新是指在 React 应用程序中更新组件的状态(state)。在 React 中，状态是组件内部的一个对象，它可以影响组件的渲染。当组件的状态更新时，组件会自动重新渲染。 要更新组件的状态，可以使用 React 的 setState() 方法。这个方法接收一个对象，表示要更新的状态。setState() 会触发组件的重新渲染。 例如，假设我们有一个组件，其中包含一个名为 coun...
浅谈 React 与 Vue 更新机制的差异
前端之行，任重道远！
09-21 5629
对于前端的 Vue 和 React 相信大家并不陌生，这两个库有着截然不同的设计思想和发展目标，对于我们上层使用者来说，研究它们的差异不仅让我们更加深入的去理解这些库的设计思想，也能帮助我们在开发中更有依据的去选择合适的框架。本篇文章就两者的更新机制来浅淡一下它们的区别，快进来看看吧！
react hooks 强制组件及其子组件更新
09-03
React的渲染机制是根据组件的状态和属性变化来决定是否重新渲染组件。组件的重新渲染会触发其子组件的重新渲染。 如果想要实现强制更新组件及其子组件的效果，可以使用React提供的`useEffect`和`useState`配合使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值