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
相关推荐
椰羊sqrt7 分钟前
MetaTwo靶机实战:SQL注入到权限提升全解析
python·学习·网络安全
老师可可9 分钟前
成绩查询系统如何制作?
经验分享·学习·小程序·excel·学习方法
前端Hardy32 分钟前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css
江城开朗的豌豆33 分钟前
我的Vue项目胖成球了!用Webpack给它狠狠瘦个身
前端·javascript
WebInfra35 分钟前
Rspack 1.6 发布:让打包产物更小、更纯净
前端·javascript·前端框架
Mintopia38 分钟前
⚙️ Next.js 接口限流与审计全攻略 —— 用 @upstash/ratelimit 打造优雅“闸门”
前端·javascript·全栈
Larry_Yanan1 小时前
QML学习笔记(四十七)QML与C++交互:上下文对象
c++·笔记·qt·学习·ui
Mintopia1 小时前
🌐 实时翻译 + AIGC:Web跨语言内容生成的技术闭环
前端·javascript·aigc
Cache技术分享1 小时前
225. Java 集合 - List接口 —— 记住顺序的集合
前端·后端
前端开发爱好者1 小时前
Vite+ 获得 1250万美元的 A 轮融资,生态加速!
前端·javascript