开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

函数属性不发生变化，子组件渲染为什么？

当函数属性不发生变化时，子组件仍然会重新渲染的原因可能有以下几点：

引用类型的函数属性发生了浅层改变：如果函数属性是一个引用类型（如对象或数组），即使其内容没有发生变化，但如果引用发生了改变，子组件仍然会重新渲染。这是因为React使用浅层比较来判断是否需要重新渲染组件，如果引用发生了改变，React会认为属性发生了变化，触发重新渲染。
父组件重新渲染：即使函数属性没有发生变化，但如果父组件重新渲染，子组件也会跟随重新渲染。这是因为React的渲染是自上而下的，当父组件重新渲染时，它的子组件也会重新渲染，无论函数属性是否发生变化。
使用了React.memo或PureComponent：React提供了React.memo和PureComponent这两个优化组件性能的方式。如果子组件被包裹在React.memo或继承自PureComponent的组件中，并且函数属性没有发生变化，子组件将不会重新渲染。这是因为React.memo和PureComponent会对组件的属性进行浅层比较，如果属性没有发生变化，就会跳过重新渲染。

总结起来，函数属性不发生变化时，子组件仍然会重新渲染的原因可能是引用类型的函数属性发生了浅层改变、父组件重新渲染或者没有使用React.memo或PureComponent进行性能优化。

腾讯云相关产品和产品介绍链接地址：

腾讯云函数计算（云函数）：https://cloud.tencent.com/product/scf
腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
腾讯云云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod

相关搜索:属性更改时未重新渲染子组件父组件更改属性时，子组件不会重新渲染更改子组件的属性值导致渲染过多当React包装器组件(HOC)的属性发生变化时，它不重新渲染子组件如何在子组件属性渲染前获取redux状态？为什么我的函数组件中的状态变化不能连续触发重新渲染？获取react函数组件的子属性 React函数组件的父状态更改不会重新渲染子组件当react中的本地useState发生变化时，如何测试组件渲染子组件？如何知道函数组件中的“子”属性组件类型？如何在父属性求值为true时仅渲染子组件为什么子组件在属性更改后不重新渲染？Angular 1.5.8:为什么ng-repeat的子组件不能渲染？为什么我的子vuejs组件属性没有定义？为什么即使我使用了useCallback，子组件也会重新渲染？为什么函数组件中的函数不能访问属性？渲染发送给子组件的对象属性时出现问题为什么这个函数组件在setState之后没有重新渲染？通过属性传递给子组件的函数在调用时不是函数为什么vue v-for在数据更改时不重新渲染子组件？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue相关的前端面试题，每道题都很经典~

④：如何阻止Vue中的绑定事件不发生冒泡 ⑤：父、子组件间是如何通信的？ ⑥：非父子层级的组件如何实现通信？ ⑦：什么是动态组件？他的作用是什么？...⑧：为什么组件中的data属性的值必须是一个函数？...与React的区别： ●组件的响应式渲染 React的组件的数据状态发生变化时，它会以该组件为根，重新渲染整个组件子树；而Vue不只去渲染需要渲染的组件。...父组件通过Props向子组件传递数据，而子组件通过Events向父组件传递数据。 ? 来自vue官网 Q 非父子层级的组件如何实现通信？...keep-alive指令允许把切换出去的组件保留在内存中，并保留它的状态或避免重新渲染。 Q 为什么组件中的data属性的值必须是一个函数？

11.1K3 0

React Hooks 学习笔记 | React.memo 介绍（三）

React.memo 函数用于创建纯组件，对于给定的参数，纯函数始终返回相同的结果，纯组件与此相同，对于给定的属性，纯组件始终渲染相同的输出。...换句话说，在传给组件的 props 的属性和值没有发生改变的情况下，它会使用最近一次缓存的结果，而不会进行重新的渲染，实现跳过组件渲染的效果。...三、使用 React.memo 函数使用 React.memo 十分简单，只需要在组件的最外层调用即可，组件的属性作为参数即可，如果参数不发生变化，组件将不会重新加载，否则将会重新加载，示例代码如下...最后我们来做下React.memo 使用总结，希望对你有帮助：父组件中数据 state（状态）如果发生改变，不受 React.memo 函数保护的子组件将会重新渲染 React.memo 会检测 props...属性的改变，来决定组件是否需要进行重新渲染，换言之就是，被React.memo 函数包起来的组件只有本身的 props 被改变之后才会重新渲染。

6952 0

脱围：使用 ref 保存值及操作DOM

♻️ 前面多篇文章中提及：state 可以 ① 保存渲染间的数据； ② state setter 函数更新变量会触发 React 重新渲染组件。...，React 会递归地重新渲染它的所有子组件。...具体可见「续篇：展开聊下 state 与渲染树中位置的关系」方式二：子组件使用 memo 包裹该方式：只修改子组件 const Time = memo(() => { return (...counterRef.current + 1}>+ {new Date().toLocaleString()} ) } 同上述「方式一」&「方式二」的差异：当前DOM不发生任何变化...由于 React 不知道 ref.current 何时发生变化，即使在渲染时读取它也会使组件的行为难以预测。

830 0

react hooks 全攻略

在每次函数组件执行时，它返回一个持久化的引用对象。这个对象有一个 current 属性，可以用来存储和读取值。当我们修改这个 current 属性的值时，组件的重新渲染不会受到影响。...它们的滥用可能会导致性能问题和代码可读性 # useMemo 当函数组件中状态变化时，会重新自上而下渲染当前组件、以及子组件。如何隔离状态，避免不必要的渲染？...# useCallback useCallback 作用是缓存回调函数，通过使用 useCallback，我们可以确保在依赖项不发生变化时，不会重新创建同一个函数，从而避免不必要的子组件重渲染或副作用函数的触发...使用场景：传递回调函数给子组件：当我们将一个函数作为 prop 传递给子组件，并且该函数的依赖项在父组件重新渲染时可能发生变化时，可以使用 useCallback 缓存该函数，以确保子组件只在依赖项变化时才重渲染...它对于传递给子组件的回调函数非常有用，确保子组件在父组件重新渲染时不会重新渲染。 useMemo 用于缓存计算结果并且只有当依赖项发生变化时才会重新计算。

4254 0

浅尝辄止,React是如何工作的

，包括style也是一样，增加、删除、修改都不会对整个 dom tree进行摧毁，而是属性的修改，保留其下面元素和节点相同类型的组件元素与上面类似，相同类型的组件元素，子元素的实力会保持，不会摧毁。...当组件更新时，实例保持不变，以便在渲染之间保持状态。...最后，就是在真实DOM进行操作，apply这些差异，更新和渲染了。 ---- 为什么Redux 需要 reducers是纯函数？...为什么reducers要求是纯函数(返回全新的对象，不影响原对象)?...如果不发生任何变化，reducer将返回旧的state。 Redux只通过比较新旧两个对象的存储位置来比较新旧两个对象是否相同。

6793 0

react useMemo、useEffect和 useCallback区别及与 vue 对比

更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUpdate useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；...使用场景：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件发生任何更新，子组件也同样会执行一次重新渲染，而当父组件的 callback 没有变化时，子组件依赖的props...中的 callback 也再次更新就是没有必要的，所以我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新，优化渲染性能；所有依赖本地状态或... 当组件重新渲染的时候，如果valueA都维持不变，那么对这个以及它的所有子节点的更新都将被跳过。...-- v-memo中“valueA”若不发生变化，则不会进行更新 --> <div class="box" v-for="item in

2.3K2 0

React系列-轻松学会Hooks

什么是函数组件函数组件只是一个执行函数取返回值的过程,简单理解：state变化，函数组件执行，触发render更新视图,跟Class组件还是不一样的，类组件是state变化，触发render方法更新而不是...，这代表什么❓，代表类组件的属性不会被重复声明，而函数组件每次state一变化，就重新执行，会重复声明,所以这也是为什么需要useMemo和useCallBack这两个hook，我们接下来会讲到 const...在ref（使用useRef返回的ref）中：等效于类组件中的实例变量，更改.current属性不会导致重新渲染。...当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。...，应该使用 useMemo 和 useCallback 自定义 Hook 中暴露出来的 object、array、函数等，都应该使用useMemo 和 useCallback,以确保当值相同时，引用不发生变化

4.3K2 0

一面高频vue面试题

通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。...$refs.box获取子组件中的datathis.$refs.box.msg调用子组件中的方法this.$refs.box.open()Vue组件data为什么必须是个函数？...$emit('input', '小红') },},Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题？你能说说如下代码的实现原理么？1）Vue为什么要用vm....，页面重新渲染时值不变化也会执行小结:computed和watch都是基于watcher来实现的computed属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重新执行watch是监控值的变化...Vue 的父子组件生命周期钩子函数执行顺序渲染顺序：先父后子，完成顺序：先子后父更新顺序：父更新导致子更新，子更新完成后父销毁顺序：先父后子，完成顺序：先子后父加载渲染过程父 beforeCreate

7664 0

Vue 高频原理面试篇+详细解答

第二步是对 AST 进行静态节点 static 标记，主要用来做虚拟 DOM 的渲染优化（optimize优化器），这里会遍历出所有的子节点也做静态标记第三步是使用 ast语法树重新生成 render...beforeUpdate: 数据更新时调用，也就是在虚拟 dom 重新渲染之前。 updated: 数据变化导致虚拟 dom 发生重新渲染之后发生。...data 为什么必须是一个函数？...这和 js 本身机制相关，data 函数中返回的对象引用地址不同，就能保证不同组件之间的数据不相互污染。 Vue.mixin() 中如果混入data属性，那么 data 也必须是一个函数。...事件循环 12.老生常谈之 watch 和 computed 区别 computed 内部就是根据 Object.definedProperty() 实现的 computed 具备缓存功能，依赖的值不发生变化

6761 0

Vue前端面试2021-018

1、为什么组件中的data是一个函数？...组件之间的通信，主要描述的是数据的传输，主要如下几种自定义属性，实现了父组件向子组件传输数据自定义事件，实现了子组件向父组件传输数据事件中心，实现了组件之间数据传递插槽，实现了子组件向父组件传递数据...ref属性，实现了父组件访问子组件的数据其他路由中的数据传递 vuex中的数据传递 3、Vue中的生命周期函数有哪些？...computed和watch都可以在数据发生变化的时候，自动参与运算获取自动执行函数 computed计算属性只有被调用才会执行，执行过程中只有参与运算的数据发生了变化才会重复执行计算属性函数内部的代码得到结果...，否则直接返回上一次运算的结果 watch监听数据的变化，当数据发生变化时会自动执行处理函数 9、v-if和v-for为什么不建议一起使用？

3542 0

在React项目中全量使用 Hooks

区别就是这，那么应用场景肯定是从区别中得到的，useLayoutEffect在渲染前执行，也就是说我们如果有状态变了需要依据该状态来操作DOM，为了避免状态变化导致组件渲染，然后更新 DOM 后又渲染，...，会带来一个冲突，所以我们需要一个能在函数组件声明周期内部的变量，可以使用 useState 中的 state 但是 state 发生变化组件也会随之刷新，在有些情况是不需要刷新的，只是想单纯的存一个值...获取的是 Class 组件的实例，上面包含 Class 的所有方法属性等。...，每次父组件渲染此函数更新，就会导致子组件也重新渲染，可以通过传递第二个参数以避免一些非必要性的渲染。...上述如果依赖值 count 不发生变化，计算 sum 的逻辑也就只会执行一次，从而性能。

3K5 1

vue面试题总结

()通知watcher,派发更新，并且触发compile中绑定的回调，渲染视图== ==长话短说：劫持数据，创建def通知watcher，触发回调，更新数据，渲染视图== ==一个属性对象多个dep...v-model通常用于表单组件的绑定，表单组件的双向绑定 v-text用于操作纯文本，单向绑定，数据变化->插值跟着变化，但插值变化不会影响数据对象的值 3. 【重点】Vue的生命周期方法有哪些？...【重点】谈谈对vue组件化的理解高内聚低耦合，单向流数据提高开发效率，和复用性降低更新范畴，只重新渲染变化的组件，可以提高性能比如说当某个组件的数据改变时，它只会重新渲染数据改变的那个组件的dom...子传父：子组件通过$emit自定义事件向父组件发送数据方法二、三：parent/children与ref parent/children与ref这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据...【重点】Vue组件data为什么必须是个函数？每次使用组件时都会为组件进行实例化操作，并且调用data函数返回一个对象作为组件的数据源。这样可以保证多个组件间数据互不影响 12.

2621 0

memo、useCallback、useMemo的区别和用法

button按钮时，父组件中的count发生变化，父组件会重新渲染，但是此时子组件也会重新渲染，这是不必要的，该怎么解决呢？...我们此时可以用memo来解决，memo函数的第一个参数是组件，结果返回一个新的组件，这个组件会对组件的参数进行浅对比，当组件的参数发生变化组件才会重新渲染，而上面的实例子组件根本没有传递参数，所以不会随着父组件渲染...name 属性和 onClick 属性，此时点击父组件的按钮，可以看到控制台中打印出子组件被渲染的信息。...image.png 我们看到meomo失效了，为什么因为memo进行的是浅对比，父组件重新渲染，changename等于重新生成了一次，所以子组件的props发生了变化，所以子组件也会跟着重新渲染，该怎么应对呢...：点击父组件按钮，触发父组件重新渲染；父组件渲染，const info = { name, age } 一行会重新生成一个新对象，导致传递给子组件的 info 属性值变化，进而导致子组件重新渲染

2K3 0

理解这个机制，是成为React性能优化高手的关键

也就是说，当一个子组件接收一个函数作为 props，为了保证函数的引用不发生变化，有的人选择使用 useCallback 来缓存函数引用，从而期望子组件不会因为 props 发生了变化而导致子组件重新渲染...当然不是，React 内部针对 props 有另外一个策略：如果父组件被判定为没有变化，那么，在判断子组件是否发生变化时，不会比较子组件的 props 源码里少一个判断，却衍生出这样一个精妙的设计高级...，因此子组件就会跳过 props 的比较，从而 Child 判定为没有发生变化。...的每个属性，如果每个属性都能通过全等比较，那么就判定为 props 没有发生变化这个遍历过程只会发生在 props 对象的第一层属性，不会更进一步深入因此，当我们无法确定上层组件是否发生变化时，我们可以在某一个节点使用...除此之外，我们要明确，组件的 re-render 是内存行为，他是执行了一次 JS 函数，他并不会导致浏览器真的发生渲染行为，因此 re-render 的执行也是非常快速的，大多数情况下的 re-render

3821 0

前端常考vue面试题（必备）_2023-03-15

(Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)...通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。...set, // 当修改属性时调用此方法};Vue 为什么要用 vm....$set() 解决对象新增属性不能响应的问题？你能说说如下代码的实现原理么？1）Vue为什么要用vm....，页面重新渲染时值不变化也会执行小结:computed和watch都是基于watcher来实现的computed属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重新执行watch是监控值的变化

1.1K2 0

化身面试官出 30+ Vue 面试题，超级干货（附答案）

父子组件生命周期调用顺序（简单）答案渲染顺序：先父后子，完成顺序：先子后父更新顺序：父更新导致子更新，子更新完成后父销毁顺序：先父后子，完成顺序：先子后父 Vue 组件通信 ❗ 答案父子间通信:父亲提供数据通过属性...v-html 会导致哪些问题（简单）答案 XSS 攻击 v-html 会替换标签内部的元素描述组件渲染和更新过程答案渲染组件时，会通过 vue.extend() 方法构建子组件的构造函数，并进行实例化...更新组件时会进行 patchVnode 流程，核心就是 diff 算法。组件中的 data 为什么是函数答案避免组件中的数据互相影响。...（插槽的作用域为父组件）作用域插槽答案作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。...普通插槽渲染的作用域是父组件，作用域插槽的渲染作用域是当前子组件。 vue 中相同逻辑如何抽离答案其实就是考察 vue.mixin 用法，给组件每个生命周期，函数都混入一些公共逻辑。

2.3K1 0

京东前端高频vue面试题

(Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)...，页面重新渲染时值不变化也会执行小结:computed和watch都是基于watcher来实现的computed属性是具备缓存的，依赖的值不发生变化，对其取值时计算属性方法不会重新执行watch是监控值的变化...用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。...(Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)...Vue 子组件和父组件执行顺序加载渲染过程：父组件 beforeCreate父组件 created父组件 beforeMount子组件 beforeCreate子组件 created子组件 beforeMount

1.2K7 0

我在大厂写React学到了什么？性能优化篇

，React官方经常强调 props 是immutable 的，所以在每次调用函数式组件的时候，都会生成一份新的 props 引用。...总结下来，就是要把渲染比较费时，但是不需要关心状态的子组件提升到「有状态组件」的外部，作为 children 或者props传递进去直接使用，防止被带着一起渲染。...先思考一下最佳的情况，Logger 组件只负责发出日志，它是不关心logs的变化的，在任何组件调用 addLog 去写入日志的时候，理想的情况下应该只有 LogsPanel 这个组件发生重新渲染。...setLogs 属性，所以两者中任意一个发生变化，都会导致所有的订阅了 LogProvider 的子组件重新渲染。...，所以这里自然要用 useCallback 把 addLog 方法包裹起来，才能保证 LogProvider 重渲染的时候，传递给的LogDispatcherContext的value 不发生变化。

9194 0

我在工作中写React，学到了什么？性能优化篇

，React官方经常强调 props 是immutable 的，所以在每次调用函数式组件的时候，都会生成一份新的 props 引用。...总结下来，就是要把渲染比较费时，但是不需要关心状态的子组件提升到「有状态组件」的外部，作为 children 或者props传递进去直接使用，防止被带着一起渲染。...先思考一下最佳的情况，Logger 组件只负责发出日志，它是不关心logs的变化的，在任何组件调用 addLog 去写入日志的时候，理想的情况下应该只有 LogsPanel 这个组件发生重新渲染。...Provider 的 value 发生改变，由于 value 包含了 logs 和 setLogs 属性，所以两者中任意一个发生变化，都会导致所有的订阅了 LogProvider 的子组件重新渲染。...，所以这里自然要用 useCallback 把 addLog 方法包裹起来，才能保证 LogProvider 重渲染的时候，传递给的LogDispatcherContext的value 不发生变化。

1K1 0

我在大厂写React学到了什么？性能优化篇

，React官方经常强调 props 是immutable 的，所以在每次调用函数式组件的时候，都会生成一份新的 props 引用。...总结下来，就是要把渲染比较费时，但是不需要关心状态的子组件提升到「有状态组件」的外部，作为 children 或者props传递进去直接使用，防止被带着一起渲染。...先思考一下最佳的情况，Logger 组件只负责发出日志，它是不关心logs的变化的，在任何组件调用 addLog 去写入日志的时候，理想的情况下应该只有 LogsPanel 这个组件发生重新渲染。...setLogs 属性，所以两者中任意一个发生变化，都会导致所有的订阅了 LogProvider 的子组件重新渲染。...，所以这里自然要用 useCallback 把 addLog 方法包裹起来，才能保证 LogProvider 重渲染的时候，传递给的LogDispatcherContext的value 不发生变化。

1.2K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭