首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么当父节点甚至没有被更新时,子节点会被重新渲染?

当父节点没有被更新时,子节点仍然会被重新渲染的原因是因为React采用了虚拟DOM(Virtual DOM)的机制。

虚拟DOM是React中的一种技术,它是一个轻量级的JavaScript对象,用于描述真实DOM的层次结构和属性。当组件的状态发生变化时,React会通过比较新旧虚拟DOM的差异,然后只更新需要变化的部分,最后将变化的部分渲染到真实DOM中。

在React中,组件的渲染是基于其props和state的变化来触发的。当父组件的props或state发生变化时,React会重新渲染该组件及其所有子组件。这是因为React采用了自上而下的数据流,父组件的变化可能会影响到子组件的渲染结果。

即使父节点没有被更新,子节点仍然会被重新渲染的原因是为了保证整个组件树的一致性和可预测性。如果子节点不重新渲染,可能会导致组件之间的状态不一致,从而引发潜在的bug。

总结起来,当父节点没有被更新时,子节点仍然会被重新渲染是为了保证组件树的一致性和可预测性,以及React采用虚拟DOM的机制来实现高效的DOM更新。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

阿里前端二面常考react面试题(必备)_2023-02-28

React实际上并没有将事件附加到节点本身。而是通过事件委托模式,使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的。这也意味着在更新DOM, React不需要担心跟踪事件监听器。...,然后直接创建新的节点插入到其中,假如节点类型一样,那么会比较prop是否有更新,假如有prop不一样,那么react会判定该节点更新,那么重渲染节点,然后在对其节点进行比较,一层一层往下,直到没有节点...发现节点不存在,则该节点及其节点会被完全删除掉,不会用于进一步的比较。 这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。...一旦有插入动作,会导致插入位置之后的列表全部重新渲染 这也是为什么渲染列表为什么要使用唯一的 key。...最典型的应用场景:组件具有overflow: hidden或者z-index的样式设置,组件有可能其他元素遮挡,这时就可以考虑要不要使用Portal使组件的挂载脱离组件。

2.8K30

前端面试之Vue

计算属性 属性的结果会被缓存,computed中的函数所依赖的属性没有发生改变的时候,那么调用当前函数的时候结果会从缓存中读取。...为什么v-for和v-if不建议用在一起 1. v-for 和 v-if 处于同一个节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。...为了在数据变化时强制更新组件,以避免“就地复用”带来的副作用。 Vue.js 用 v-for 更新渲染过的元素列表,它默认用“就地复用”策略。...如果同一个watcher多次触发,只会被推入到队列中-次。这种在缓冲去除重复数据对于避免不必要的计算和DOM操作是非常重要的。..., 且只有当它的依赖值发生了改变才会被重新计算 3.

3.7K30
  • 阿里三面:灵魂拷问——有react fiber,为什么不需要vue fiber?

    所以一个数据改变,react的组件渲染是很消耗性能的——组件的状态更新了,所有的组件得跟着一起渲染,它不能像vue一样,精确到当前组件的粒度。...假设遍历发生了中断,虽然可以保留当下进行中节点的索引,下次继续,我们的确可以继续遍历该节点下面的所有节点,但是没有办法找到其父节点——因为每个节点只有其节点的指向。...在新的架构中,每个节点有三个指针:分别指向第一个节点、下一个兄弟节点节点。...这种数据结构就是fiber,它的遍历规则如下: 从根节点开始,依次遍历该节点节点、兄弟节点,如果两者都遍历了,则回到它的节点一个节点的所有节点遍历完成,才认为该节点遍历完成; 根据这个规则...这里要注意,不会出现“一次组件渲染没有完成,页面部分渲染更新”的情况,react会保证每次更新都是完整的。 但页面的动画确实变得流畅了,这是为什么呢?

    79520

    面试官最喜欢问的几个react相关问题

    ,参考如下:tree diff:只对比同一层的 dom 节点,忽略 dom 节点的跨层级移动如下图,react 只会对相同颜色方框内的 DOM 节点进行比较,即同一个节点下的所有节点。...发现节点不存在,则该节点及其节点会被完全删除掉,不会用于进一步的比较。这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。...,会导致插入位置之后的列表全部重新渲染这也是为什么渲染列表为什么要使用唯一的 key。...一个组件相关数据更新,即使组件不需要用到这个组件,组件还是会重新render,可能会有效率影响,或者需要写复杂的shouldComponentUpdate进行判断。...如下所示,表单的值并没有存储在组件的状态中,而是存储在表单元素中,要修改表单数据,直接输入表单即可。有时也可以获取元素,再手动修改它的值。

    4K20

    美团前端一面必会react面试题4

    方法更新state,就会触发视图的重新渲染,完成表单组件的更新受控组件缺陷: 表单元素的值都是由React组件进行管理,有多个输入框,或者多个这种组件,如果想同时获取到全部的值就必须每个都要编写事件处理函数...,而不能像 flux 中直接从 store 取一个组件相关数据更新,即使组件不需要用到这个组件,组件还是会重新 render,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate...,然后直接创建新的节点插入到其中,假如节点类型一样,那么会比较prop是否有更新,假如有prop不一样,那么react会判定该节点更新,那么重渲染节点,然后在对其节点进行比较,一层一层往下,直到没有节点哪些方法会触发...但是这里有个点值得关注,执行 setState 的时候不一定会重新渲染 setState 传入 null ,并不会触发 render。...,即使传入组件的 props 未发生变化,那么子组件也会重新渲染,进而触发 render(2)重新渲染 render 会做些什么?

    3K30

    【愚公系列】2023年03月 其他-Web前端基础面试题(VUE专项_58道)

    ) 6、updated(更新后) 7、beforeDestroy(销毁前) 8、destroyed(销毁后) 3、为什么vue中data必须是一个函数 对象为引用类型,重用组件,由于数据对象都指向同一个....prevent 阻止当前事件的默认行为 .self 事件绑定的元素本身触发才触发回调 .once 绑定的事件只会被触发一次 21、v-for 为什么需要绑定Key Vue用 v-for...要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?...b. hoistStatic 静态提升 Vue2.x : 无论元素是否参与更新,每次都会重新创建。 Vue3.0 : 对不参与更新的元素,只会被创建一次,之后会在每次渲染时候不停的复用。...它的特点在于:hash虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

    7.2K20

    flutter跨平台原理

    也就是说,节点会将自己的约束传递给节点节点根据接收到的约束来计算自己的大小,然后将自己的尺寸返回给节点。...整个过程中,位置信息由节点来控制,节点并不关心自己所在的位置,而节点也不关心子节点具体长什么样子。...为了防止因子节点发生变化而导致的整个控件树重绘,Flutter 加入了一个机制——Relayout Boundary,在一些特定的情形下 Relayout Boundary 会被自动创建 例如,控件设置了固定大小...这时有可能出现一种特殊情况,如下图所示节点 2 在绘制节点 4 ,由于其节点 4 需要单独绘制到一个图层上(如 video),因此绿色图层上面多了个黄色的图层。...所以每次需要更新页面都需要重新创建一个新的控件树。

    1.9K30

    前端二面react面试题整理

    state改变,组件通过重新渲染来响应:// 正确做法This.setState({message: ‘Hello World’});React 组件生命周期有哪些不同阶段?...componentWillReceiveProps:在初始化render的时候不会执行,它会在组件接受到新的状态(Props)触发,一般用于组件状态更新组件的重新渲染shouldComponentUpdate...一个组件相关数据更新,即使组件不需要用到这个组件,组件还是会重新render,可能会有效率影响,或者需要写复杂的shouldComponentUpdate进行判断。...调度来进行 reconcile,也就是找到变化的部分,创建 dom,打上增删改的 tag,等全部计算完之后,commit 阶段一次性更新到 dom打断之后要找到节点、兄弟节点,所以 vdom 也改造成了...有的同学可能会问,为什么 react 不直接渲染对应组件呢?想象一下这个场景:组件把它的 setState 函数传递给组件,组件调用了它。这时候更新组件触发的,但是要渲染的就只有那个组件么?

    1.1K20

    浅谈 React 生命周期

    可以渲染节点到不同的 DOM 子树中。欲了解更多详细信息,请参阅有关 portals 的文档 「字符串或数值类型」。它们在 DOM 中会被渲染为文本节点 **布尔类型或 null**。什么都不渲染。...请注意,如果组件导致组件重新渲染,即使 props 没有更改,也会调用此方法。如果只想处理更改,请确保进行当前值与变更值的比较。...❞ 组件收到新的 props 或 state ,会在渲染之前调用 UNSAFE_componentWillUpdate()。使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法。...「父子组件生命周期执行顺序总结」: 组件自身状态改变,不会对组件产生副作用的情况下,组件不会进行更新,即不会触发组件的生命周期 组件中状态发生变化(包括组件的挂载以及卸载),会触发自身对应的生命周期以及组件的更新...组件进行卸载,只会执行自身的 componentWillUnmount 生命周期,不会再触发别的生命周期 render 以及 render 之前的生命周期,则 组件先执行 render 以及

    2.3K20

    前端基础知识整理汇总(下)

    Portal 提供了一种将节点渲染到存在于组件以外的 DOM 节点的优秀的方案。 字符串或数值类型。它们在 DOM 中会被渲染为文本节点。 布尔类型或 null。什么都不渲染。...组件重新render 直接重新渲染。每当组件重新render导致的重传props,组件将直接跟着重新渲染,无论props是否有变化。可通过shouldComponentUpdate方法优化。...发现节点已经不存在,则该节点及其节点会被完全删除掉,不会进行进一步的比较。 这样只需要对树进行一次遍历,便能完成整个 DOM 树的比较。...出现节点跨层级移动,并不会出现移动操作,而是以该节点为根节点的树重新创建,这是一种影响 React 性能的操作,因此 React 官方建议不要进行 DOM 节点跨层级的操作。...渲染过程不同 Vue可以更快地计算出Virtual DOM的差异,这是由于它会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。 React状态改变,全部组件都会重新渲染

    1.1K10

    从 setState 聊到 React 性能优化

    , 那么意味着 render 函数会被频繁的调用界面重新渲染, 这样的效率是很低的 最好的方法是获取到多个更新, 之后进行批量更新 如果同步更新了 state, 但还没有执行 render 函数, 那么...> 变成 都会触发一个完整的重建流程 卸载一棵树,对应的DOM节点会被销毁,组件实例将执行 componentWillUnmount() 方法 建立一棵新的树,对应的 DOM 节点会被创建以及插入到...,调用 render() 方法,diff 算法将在之前的结果以及新的结果中进行递归 情况三: 对子节点进行递归 在默认条件下,递归 DOM 节点元素,React 会同时遍历两个子元素的列表;产生差异...: 在App中,我们增加了一个计数器的代码 点击 +1 ,会重新调用 App 的 render 函数 而 App 的 render函数调用时,所有的组件的 render 函数都会被重新调用 ?...将 class 继承自 PureComponent 内部会进行浅层对比最新的 state 和 porps , 如果组件内没有依赖 porps或state 将不会调用render 解决的问题: 比如某些组件没有依赖组件的

    1.3K20

    为什么 React16 对开发人员来说是一种福音

    ; } Portal Portal 提供了一种将节点渲染节点之外的 dom 节点。...如何使用它 在 React15.X 版本中,我们只能讲节点节点渲染,基本用法如下: render() { // React需要创建一个新的div来包含节点 return ( {this.props.children} ); } 但是如果需要将节点插入到节点之外的dom呢,React15.x 及之前都没有提供这个功能的 API...null 避免重新渲染 有时候我们需要通过函数来判断组件状态更新是否触发重新渲染,在 React 16 中,我们可以通过调用 setState 传入 null 来避免组件重新渲染,这也就意味着,我们可以在...它只在组件进行重新渲染触发,而且不作为本地 setState 的结果。 将nextProps.someValue与this.props.someValue进行比较。

    1.4K30

    vue面试考察知识点全梳理

    计算属性 VS 侦听属性计算属性计算属性的触发有以下两种情况:主动访问:计算属性访问触发getter函数,执行用户返回的计算结果,如果返回值发生变化才触发渲染更新(有缓存,依赖发生变化才执行)。...组件更新(diff)组件更新核心是响应式数据监控到数据的改变,重新生成了虚拟dom树,然后通过diff算法计算出前后虚拟dom树的差异点,更新dom更新变化的部分。快问快答:为什么要diff?...答:undefined新旧节点不同:创建新节点更新占位符节点 ➜ 删除旧节点;undefined新旧节点相同且没有节点:不变;undefined新旧节点相同且都有节点:遍历节点同级比较,做移动...编译编译组件解析到标签上有 slot 属性的时候,将元素节点上标记为data.slot = slotName || 'default'编译自组件解析到 slot 标签的时候,在此AST元素节点上标记...;在组件重新激活把缓存的domvnode.elm插入dom树即可;keep-alive组件只处理第一个元素(将节点当成树的根节点故只有一个),一般和它搭配使用的有 component 动态组件或者是

    85220

    vue面试考察知识点全梳理

    计算属性 VS 侦听属性计算属性计算属性的触发有以下两种情况:主动访问:计算属性访问触发getter函数,执行用户返回的计算结果,如果返回值发生变化才触发渲染更新(有缓存,依赖发生变化才执行)。...组件更新(diff)组件更新核心是响应式数据监控到数据的改变,重新生成了虚拟dom树,然后通过diff算法计算出前后虚拟dom树的差异点,更新dom更新变化的部分。快问快答:为什么要diff?...答:undefined新旧节点不同:创建新节点更新占位符节点 ➜ 删除旧节点;undefined新旧节点相同且没有节点:不变;undefined新旧节点相同且都有节点:遍历节点同级比较,做移动...编译编译组件解析到标签上有 slot 属性的时候,将元素节点上标记为data.slot = slotName || 'default'编译自组件解析到 slot 标签的时候,在此AST元素节点上标记...;在组件重新激活把缓存的domvnode.elm插入dom树即可;keep-alive组件只处理第一个元素(将节点当成树的根节点故只有一个),一般和它搭配使用的有 component 动态组件或者是

    80020

    万字长文!总结Vue性能优化方式及原理

    ,会在组件的渲染函数中创建,插槽内容的依赖会被组件收集(name 的 dep 收集到组件的渲染 watcher),而新的写法将插槽内容放在了 scopedSlots 中,会在组件的渲染函数中调用...,插槽内容的依赖会被子组件收集(name 的 dep 收集到组件的渲染 watcher),最终导致的结果就是:当我们修改 name 这个属性,旧的写法是调用组件的更新(调用组件的渲染 watcher...),然后在组件更新过程中调用组件更新(prePatch => updateChildComponent),而新的写法则是直接调用组件的更新(调用组件的渲染 watcher)。...这样一来,旧的写法在更新就多了一个组件更新的过程,而新的写法由于直接更新组件,就会更加高效,性能更好,所以推荐始终使用v-slot:slotName语法。...UserProfileB组件,切换visible,才会渲染UserProfileB组件,同时keep-alive缓存下来,频繁切换,由于是直接从缓存中取,所以会节省很多性能,所以这种方式在初始化和更新都有较好的性能

    80630

    Facebook 新一代 React 状态管理库 Recoil

    最常规则做法是将一个 state 通过组件分发给 List 和 Canvas 两个组件,显然这样的话每次 state 改变后 所有节点都会全量更新。...Recoil 提出了一个新的状态管理单位 Atom,它是可更新和可订阅的,一个 Atom 更新,每个订阅的组件都会用新的值来重新渲染。...你可以把 Atom 想象为为一组 state 的集合,改变一个 Atom 只会渲染特定的组件,并不会让整个组件重新渲染。 用 Redux 或 Mobx 不可以吗?...这些库目前正被广泛使用,我们也并没有遇到什么大问题,那么 Facebook 为什么还要推出一款新的状态管理框架呢?...,一个 Atom 更新,每个订阅的组件都会用新的值来重新渲染

    1.6K10

    vue面试考察知识点全梳理3

    计算属性 VS 侦听属性计算属性计算属性的触发有以下两种情况:主动访问:计算属性访问触发getter函数,执行用户返回的计算结果,如果返回值发生变化才触发渲染更新(有缓存,依赖发生变化才执行)。...组件更新(diff)组件更新核心是响应式数据监控到数据的改变,重新生成了虚拟dom树,然后通过diff算法计算出前后虚拟dom树的差异点,更新dom更新变化的部分。快问快答:为什么要diff?...答:undefined新旧节点不同:创建新节点更新占位符节点 ➜ 删除旧节点;undefined新旧节点相同且没有节点:不变;undefined新旧节点相同且都有节点:遍历节点同级比较,做移动...编译编译组件解析到标签上有 slot 属性的时候,将元素节点上标记为data.slot = slotName || 'default'编译自组件解析到 slot 标签的时候,在此AST元素节点上标记...;在组件重新激活把缓存的domvnode.elm插入dom树即可;keep-alive组件只处理第一个元素(将节点当成树的根节点故只有一个),一般和它搭配使用的有 component 动态组件或者是

    83930

    2022react高频面试题有哪些

    包含表单的组件将跟踪其状态中的输入值,并在每次回调函数(例如onChange)触发重新渲染组件,因为状态更新。以这种方式由 React 控制其值的输入表单元素称为受控组件。...只要组件类型不同,就会被重新渲染。这也就是为什么 shouldComponentUpdate、PureComponent 及 React.memo 可以提高性能的原因。...,这保证按需更新,而不是宣布重新渲染hooks父子传值传子在组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给组件<Child...但是这里有个点值得关注,执行 setState 的时候不一定会重新渲染 setState 传入 null ,并不会触发 render。...;componentWillReceiveProps:在初始化render的时候不会执行,它会在组件接受到新的状态(Props)触发,一般用于组件状态更新组件的重新渲染shouldComponentUpdate

    4.5K40

    一文带你梳理React面试题(2023年版本)

    PortalPortal提供了让组件渲染在除了组件之外的DOM节点的方式,它接收两个参数,第一个是需要渲染的React元素,第二个是渲染的地方(DOM元素)ReactDOM.createPortal...(child,container)用途:弹窗、提示框等FragmentFragment提供了一种将列表分组又不产生额外DOM节点的方法Context常规的组件数据传递是使用props,一个嵌套组件向另一个嵌套组件传递数据...,节点节点。...遍历中断,它是可以恢复的,只需要保留当前节点的索引,就能根据索引找到对应的节点Fiber更新机制初始化创建fiberRoot(React根元素)和rootFiber(通过ReactDOM.render...Element对象)中只记录了节点没有记录兄弟节点,因此渲染不可打断fiber(fiberNode对象)是一个链表,它记录了节点、兄弟节点节点,因此是可以打断的

    4.3K122

    VUE

    每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后依赖项的 setter 调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。...对于React 而言,每当应用的状态改变,全部组件都会重新渲染。...组件换掉会被缓存到内存中、触发 deactivated 生命周期;组件切回来时,再去缓存里找这个组件、触发 activated 钩子函数。...模板作用域插槽,2.x 的机制导致作用域插槽变了,组件会重新渲染,而 3.0 把作用域插槽改成了函数的方式,这样只会影响组件的重新渲染,提升了渲染的性能。...,先判断一方有节点一方没有节点的情况(如果新的 children 没有节点,将旧的节点移除)比较如果都有节点,则进行updateChildren,判断如何对这些新老节点节点进行操作(diff

    25610
    领券