React父子组件，父组件状态更新，子组件的渲染状况

news2025/1/21 4:00:30

目录

React.memo不包裹

React.memo包裹

传递一个简单数据类型

传递一个复杂数据类型

传递一个函数

React.memo不包裹

如果子组件没有使用React.memo包裹，则父组件中数据更新时，子组件会重新进行渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son></Son>
    </>
  )
}

子组件：

export default function Son() {
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
}

会发现，在页面初始化加载的时候会触发一次。父组件里状态更新的时候也会触发一次

React.memo包裹

这里主要分析React.memo包裹的情况：

  • 正常的话，只有传值给子组件的值（也就是子组件props中的值）发生改变时才会触发子组件渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son></Son>
    </>
  )
}

子组件：

import React from 'react'

export default React.memo(function Son() {
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

然后我们依次分析各种传值的情况

传递一个简单数据类型

    1. 传值给子组件一个简单数据类型的值：只有值改变的时候子组件才会重新渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const count = 99

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son count={count}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  count: number
}

export default React.memo(function Son(props: IProps) {
  const { count } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

传递一个复杂数据类型

    2. 传值给子组件一个复杂数据类型的值：

  • 如果值使用useState包裹，则只有值改变的时候子组件才会重新渲染
  • 如果没有使用useState包裹，则不管值是否变化，只要父组件数据有变化，都会触发子组件重新渲染

不使用useState包裹

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const list = [1, 2, 3]

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son list={list}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  list: number[]
}

export default React.memo(function Son(props: IProps) {
  const { list } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

但是这显然不是我们想要的结果，我们使用React.memo包裹子组件，肯定是希望子组件接收的props值发生改变的时候才重新渲染子组件。如果要改善上面的情况，则就需要useMemo包裹下值（useMemo会缓存函数执行之后的值，只要参数2中的依赖项不发生改变，就不会触发参数1的回调函数）或者useState包裹下值

父组件：

import { useMemo, useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const list = useMemo(() => [1, 2, 3], [])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son list={list}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  list: number[]
}

export default React.memo(function Son(props: IProps) {
  const { list } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

使用useState包裹

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const [list, setList] = useState([1, 2, 3])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <button onClick={() => setList([...list, 99])}>
        listChange -- {list}
      </button>
      <Son list={list}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  list: Array<number>
}

export default React.memo(function Son(props: IProps) {
  const { list } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

传递一个函数

    3. 传值给子组件一个函数：不管函数有没有改变，只要父组件数据状态改变，都会触发子组件重新渲染

父组件：

import { useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const fn = () => {
    console.log('函数执行')
  }

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son fn={fn}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  fn: () => void
}

export default React.memo(function Son(props: IProps) {
  const { fn } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

同样的，我们使用React.memo包裹子组件，肯定也是希望子组件接收的props值发生改变的时候才重新渲染子组件。如果要改善上面的情况，则就需要useMemo包裹下函数（useMemo会缓存函数执行之后的值，只要参数2中的依赖项不发生改变，就不会触发参数1的回调函数）或者useCallback包裹下函数

父组件：

import { useMemo, useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const fn = useMemo(() => {
    return () => {
      console.log('函数执行')
    }
  }, [])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son fn={fn}></Son>
    </>
  )
}

子组件：

import React from 'react'

interface IProps {
  fn: () => void
}

export default React.memo(function Son(props: IProps) {
  const { fn } = props
  console.log('子组件触发更新')

  return (
    <div>
      <h3>Son</h3>
    </div>
  )
})

结果：

但是上面使用useMemo，还要return一个函数，写起来很臃肿，就可以使用useCallback这个hook来进行优化，效果是一样的。只需要改变下父组件代码即可

import { useCallback, useState } from 'react'
import Son from './Son'

export default function App() {
  const [num, setNum] = useState(100)
  const fn = useCallback(() => console.log('函数执行'), [])

  return (
    <>
      <h2>App</h2>
      <button onClick={() => setNum(num + 1)}>num++ -- {num}</button>
      <Son fn={fn}></Son>
    </>
  )
}

结果跟上面一样：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2217923.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MongoDB 8.0已全面可用

MongoDB 8.0已全面可用

全球广受欢迎的文档型数据库MongoDB目前最新最强的版本&#xff0c;在易用性、企业级安全性、 弹性、可用性等方面均有大幅提升&#xff0c;适用于各种应用程序。 MongoDB 8.0的优化使整体吞吐量提高了32%&#xff0c;时间序列数据聚合的处理速度提高了200%以上。MongoDB 8.0的…
阅读更多...
SegFormer: 一个基于Transformer的高效视觉图像分割算法

SegFormer: 一个基于Transformer的高效视觉图像分割算法

今天我分享一篇关于 Transformer 架构在图像视觉分割中的应用的文章&#xff0c;主题是 SegFormer。SegFormer 是一种新颖的语义分割方法&#xff0c;它结合了无位置编码的层次化 Transformer 编码器和轻量级 All-MLP 解码器&#xff0c;避免了传统方法中的复杂设计&#xff0c…
阅读更多...
Flink Kubernetes Operator

Flink Kubernetes Operator

Flink Kubernetes Operator是一个用于在Kubernetes集群上管理Apache Flink应用的工具。 一、基本概念 Flink Kubernetes Operator允许用户通过Kubernetes的原生工具&#xff08;如kubectl&#xff09;来管理Flink应用程序及其生命周期。它简化了Flink应用在Kubernetes集群上的…
阅读更多...
字节 HLLM 论文阅读

字节 HLLM 论文阅读

github连接&#xff1a;https://github.com/bytedance/HLLM 探讨问题&#xff1a; 推荐LLM的三个关键问题&#xff1a; LLM预训练权重通常被认为是对世界知识的概括&#xff0c;其对于推荐系统的价值&#xff1f;对推荐任务进行微调的必要性&#xff1f;LLM是否可以在推荐系统…
阅读更多...
SL3037B降压恒压芯片DC24伏输入5伏输出带单片机,电流100mA

SL3037B降压恒压芯片DC24伏输入5伏输出带单片机,电流100mA

一、SL3037B芯片概述 SL3037B是一款内置功率MOSFET的单片降压型开关模式转换器&#xff0c;具有高效、稳定、外围元器件少等特点。它能够在宽输入电源范围&#xff08;5.5~60V&#xff09;内实现0.6A的峰值输出电流&#xff0c;并具有出色的线电压和负载调整率。此外&#xff…
阅读更多...
uniapp小程序自定义聚合点

uniapp小程序自定义聚合点

注&#xff1a; 1.默认的聚合点可以点击自动展示子级点位&#xff0c;但是自定义的聚合点在ios上无法触发markerClusterClick的监听&#xff0c;至今未解决&#xff0c;不知啥原因 2.ios和安卓展示的点位样式还有有差别 源码附上 <template><view class"marke…
阅读更多...
SpringMVC之 文件上传和下载

SpringMVC之 文件上传和下载

1. 文件上传 1.1 前端注意事项 文件上传操作&#xff0c;前端的表单项需要如下三项设置&#xff1a; &#xff08;1&#xff09;input标签的type属性应设置为file&#xff0c;并且注意不要在input标签中设置value属性&#xff0c;因为这可能导致文件上传不成功&#xff1b; …
阅读更多...
轻触节点，链表里的悄然邂逅

轻触节点，链表里的悄然邂逅

公主请阅 1. 移除链表元素1. 题目说明示例 1示例 2示例 3 1.2 题目分析1.3 代码部分1.4 代码解析 2. 反转链表2. 1题目说明示例 1示例 2示例 3 2.2 题目分析2.3 代码部分2.4 代码分析 1. 移除链表元素 题目传送门 1. 题目说明 给你一个链表的头节点 head 和一个整数 val &…
阅读更多...
无头浏览器测试：如何使用 Puppeteer 和 Browserless？

无头浏览器测试：如何使用 Puppeteer 和 Browserless？

什么是无头浏览器测试&#xff1f; 无头浏览器测试通常指没有头的物体或东西&#xff0c;在浏览器的语境中&#xff0c;它指的是没有 UI 的浏览器模拟。无头浏览器自动化使用 Web 浏览器进行端到端测试&#xff0c;而无需加载浏览器的 UI。 无头模式是一个功能&#xff0c;它…
阅读更多...
SpringBoot1~~~

SpringBoot1~~~

目录 快速入门 依赖管理和自动配置 修改自动仲裁/默认版本号 starter场景启动器 自动配置 修改默认扫描包结构 修改默认配置 读取application.properties文件 按需加载原则 容器功能 Configuration Import ​编辑 Conditional ImportResource 配置绑定Configur…
阅读更多...
一款AutoXJS现代化美观的日志模块AxpLogger

一款AutoXJS现代化美观的日志模块AxpLogger

简介 Axp Logger是一款基于autox.js的现代化日志模块&#xff0c;具备窗口事件穿透、拖拽和缩放功能。 Axp Logger文档 特性现代化的UI设计支持点击穿透模式&#xff08;不影响脚本运行&#xff09;监听音量-键切换模式支持窗口操作模式窗口拖拽移动窗口自由缩放清空日志关闭日…
阅读更多...
高精-阶乘和-保姆级教程

高精-阶乘和-保姆级教程

提供50的阶乘30414093201713378043612608166064768844377641568960512000000000000&#xff1b; 显然要做这题&#xff0c;int 或者 long long 类型的整型放不下这么长的数据所以我们要使用数组用高精度实现&#xff1b; 然后容易想到这题 肯定要用到高精度乘法和高精度加法&…
阅读更多...
外包干了3周，技术退步太明显了。。。。。

外包干了3周，技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;大专生&#xff0c;21年通过校招进入武汉某软件公司&#xff0c;干了差不多3个星期的功能测试&#xff0c;那年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我才在一个外包企业干了3周的功…
阅读更多...
Qt（10.11）

Qt（10.11）

数据表 源代码&#xff1a; #include "widget.h" #include "ui_widget.h" #include<QMessageBox>//消息对话框 #include<QDebug> #include<QSqlRecord> Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui-&g…
阅读更多...
十、pico+Unity交互开发教程——射线抓取与更多交互功能

十、pico+Unity交互开发教程——射线抓取与更多交互功能

一、回顾与引入 回顾上一篇直接抓取的教程&#xff0c;VR交互一般需要可交互的对象&#xff08;Interactable&#xff09;和发起交互的对象&#xff08;Interactor&#xff09;。直接抓取和射线抓取的可交互对象无区别&#xff0c;可参考上一篇教程设置组件。两者区别在于发起…
阅读更多...
【Vercel】Vercel静态部署踩坑

【Vercel】Vercel静态部署踩坑

背景 在现代的软件开发中&#xff0c;自动化部署是一个不可或缺的环节。Vercel作为一个流行的前端部署平台&#xff0c;提供了与GitHub的无缝集成&#xff0c;使得开发者能够在每次提交代码后自动触发部署流程。然而&#xff0c;自动化部署过程中可能会遇到一些挑战&#xff0…
阅读更多...
性能测试：流量回放工具-GoReplay！结合一款无需CA证书即可抓取HTTPS明文的工具，简直无敌

性能测试：流量回放工具-GoReplay！结合一款无需CA证书即可抓取HTTPS明文的工具，简直无敌

性能测试&#xff1a;流量回放工具-GoReplay&#xff01;结合一款无需CA证书即可抓取HTTPS明文的工具&#xff0c;简直无敌。 GoReplay 是一个开源网络监控工具&#xff0c;可以将实时 HTTP 流量捕获并重放到测试环境。 应用成熟的过程中&#xff0c;测试所需的工作量往往会成…
阅读更多...
学习干货小白女友看完这篇文章后，面试工作和护网蓝队初级竟然秒通过！

学习干货小白女友看完这篇文章后，面试工作和护网蓝队初级竟然秒通过！

小白女友看完这篇文章后&#xff0c;面试工作和护网蓝队初级竟然秒通过&#xff01; 前言&#xff1a;本文中涉及到的相关技术或工具仅限技术研究与讨论&#xff0c;严禁用于非法用途&#xff0c;否则产生的一切后果自行承担&#xff0c;如有侵权请联系。 还在学怎么挖通用漏…
阅读更多...
【Linux】＜互斥量＞解决＜抢票问题＞——【多线程竞争问题】

【Linux】＜互斥量＞解决＜抢票问题＞——【多线程竞争问题】

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…
阅读更多...
Axure树形菜单展开与折叠

Axure树形菜单展开与折叠

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;Axure树形菜单展开与折叠 主要内容&#xff1a;树形菜单制作——层级关系——隐藏与显示——值的变化——多层交互 应用场景&#xff1a;关系树、菜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023