React 学习——React.memo

1、默认情况下:子跟着父一起渲染

2、memo 缓存,只有props发生变化的时候才会重新渲染

javascript 复制代码
import {  memo, useState } from 'react';
// 默认情况下:子跟着父一起渲染
//memo 缓存,只有props发生变化的时候才会重新渲染
const MemoSon = memo(function Son(){
  console.log('子组件渲染');
  return <div>子组件</div>
})
// function Son(){
//   console.log('子组件渲染');
//   return <div>子组件</div>
// }

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <div className="home">
     {/* <Son /> */}
     <MemoSon />
     <button onClick={() => setCount(count + 1)}>+{count}</button>
    </div>
  )
}

export default App
相关推荐
0思必得07 小时前
[Web自动化] Selenium模拟用户的常见操作
前端·python·selenium·自动化
QiZhang | UESTC7 小时前
学习日记day64
学习
Apifox.7 小时前
测试用例越堆越多?用 Apifox 测试套件让自动化回归更易维护
运维·前端·后端·测试工具·单元测试·自动化·测试用例
爱吃生蚝的于勒7 小时前
【Linux】零基础学习命名管道-共享内存
android·linux·运维·服务器·c语言·c++·学习
打小就很皮...7 小时前
React 合同审查组件:文档结构树渲染及定位详解
react.js·markdown·tree
简叙生活7 小时前
【CES直击:从“屏幕依赖”到“真实对话”,Lookee如何用声网技术重构英语学习?
学习·ces
玉梅小洋7 小时前
Chrome设置链接自动跳转新标签页而不是覆盖
前端·chrome
EndingCoder8 小时前
反射和元数据:高级装饰器用法
linux·运维·前端·ubuntu·typescript
Marshmallowc8 小时前
React性能优化:useState初始值为什么要用箭头函数?深度解析Lazy Initialization与Fiber机制
前端·react.js·性能优化·前端框架·react hooks
Coder_Boy_8 小时前
基于SpringAI的在线考试系统-试卷管理模块完整优化方案
前端·人工智能·spring boot·架构·领域驱动