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
相关推荐
盐焗西兰花2 分钟前
鸿蒙学习实战之路-Share Kit系列(13/17)-配置目标应用名单(企业应用)
学习·华为·harmonyos
2601_948606185 分钟前
LaTeX学习笔记:开场白与索引
笔记·学习
早點睡39010 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-linear-gradient-text
javascript·react native·react.js
恋猫de小郭13 分钟前
Flutter Beta 版本引入 ScrollCacheExtent ,并修复长久存在的 shrinkWrap NaN 问题
android·前端·flutter
Liu.77414 分钟前
vscode前端实用插件
前端·vscode
罗罗攀16 分钟前
PyTorch学习笔记|张量的索引分片、合并和维度调整
人工智能·pytorch·笔记·python·学习
RSFeegg19 分钟前
【AI Agent 学习笔记 task1】Day2:初识智能体
人工智能·笔记·学习
lengxuemo20 分钟前
Excel做正态分布图
学习·excel
Easonmax21 分钟前
ReactNative for OpenHarmony项目鸿蒙化三方库:react-native-image-picker — 图片选择器
react native·react.js·harmonyos
思维新观察24 分钟前
辉研教育跳绳APP:以分层教学破解青少年跳绳学习痛点
学习·互联网