当前位置: 首页 > 知识库问答 >
问题:

react.js - 子组件传入对象,父组件咋避免子组件更新?

陆高峰
2024-04-18

场景

我有一个父组件,里面包含一个子组件,子组件传入了一个对象,假设对象是字面量。当我的父组件更新时,子组件也会更新。导致不必要的渲染。

尝试

1.通过使用React.memo包裹子组件,作用是父组件更新,子组件只有当props变化才变化。结果发现还是不对。。。。分析了一下原因是,当父组件更新时候,传入到子组件的的引用发生了变化,虽然值是相同的。。。咋搞

共有1个答案

濮阳繁
2024-04-18

对象字面量在每次父组件更新的时候都会重新生成新的引用,导致子组件重新渲染。可以通过 useMemo 保持对象字面量引用恒定,再配合 React.memo 避免子组件的重新渲染。

const obj = useMemo(() => {    return { name: 'xxx' }},[])
 类似资料:
  • 我对JS的反应有点陌生。我有两个问题。我来了 现在我要做的是,当应用程序组件挂载时,我生成一个对后端服务器的ajax调用,当它返回时,它更新道具,并设置状态,这样子组件也会重新呈现,但子组件不会重新呈现。谁能告诉我出了什么问题。 问题2 现在让我们假设我将进入组件二路由,它将呈现组件二,我在应用程序组件中生成一个ajax调用,根据ajax调用返回的数据,我在应用程序组件中设置了一些道具,我还希望组

  • 假设我的父组件有两个子组件: 我从Child2获得一个输入,并将其传递给父组件(到目前为止,我知道该怎么做)。但是,我需要将该输入传递给Child1,以更新它的状态。 我怎么能那么做?

  • 问题内容: 以下是在reactjs中将值从子组件传递到父组件的正确示例。 App.jsx main.js 我需要明确有关将值从子组件传递到祖父母组件的概念。请帮我!! 问题答案: 您可以通过,将update函数传递给大子级,只需从子组件中再次传递即可。

  • 本文向大家介绍vue 子组件向父组件传值方法,包括了vue 子组件向父组件传值方法的使用技巧和注意事项,需要的朋友参考一下 子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 子组件component-a这么写 以上这篇vue 子组件向父组件传值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • vue3中子组件向父组件传值 在传值的时候为什么只能在声明一个方法的时候传递,而不能在定义click的时候传递呢

  • 本文向大家介绍浅谈Vue父子组件和非父子组件传值问题,包括了浅谈Vue父子组件和非父子组件传值问题的使用技巧和注意事项,需要的朋友参考一下 本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue 2.在main.js中引入 import goodsList from 'goods/good