React-React.memo-props比较机制

React.memo

作用:允许组件在Props没有改变的情况下跳过渲染

react组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染

如果子组件本身不需要做重新渲染,就会存在浪费,memo就可以实现

React.memo基础语法
父组件
javascript 复制代码
import { Button } from 'antd-mobile'
import Son from "./components/son";
import { useState } from "react";
const Year = () => {
  const [count,setCount] = useState(0)
  return (
    <div>
      父组件
      <div className="purple-theme">
        <Button color="primary" onClick={()=> setCount(count + 1)}>{count}</Button>
      </div>
      <Son></Son>
    </div>
  );
};
export default Year;

只要父组件发生变化,子组件就会重新渲染 点击方法执行子组件就会重新渲染

子组件 解决使用memo语法 只有props发生变化才会触发重新渲染
javascript 复制代码
import { memo } from "react";
const Son =memo(() => {
    console.log('我是子组件,我重新渲染了');
    
  return (
    <div>
      我是子组件
    </div>
  );
})
export default Son;

React.memo-props比较机制

相关推荐
Mr_Mao3 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
摸鱼仙人~5 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.6 小时前
serviceWorker缓存资源
前端
RadiumAg7 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo7 小时前
ES6笔记2
开发语言·前端·javascript
yanlele7 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子8 小时前
React状态管理最佳实践
前端
烛阴9 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子9 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端