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比较机制

相关推荐
独泪了无痕19 分钟前
Vite 模块动态导入之Glob导入
前端·vue.js·vite
xdpcxq102927 分钟前
Docker用Web应用实例深入容器
前端·docker·容器
zhuà!1 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨1 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发
tianchang1 小时前
React Hook 解析(二):`useEffect` 与 `useLayoutEffect`
前端·react.js
codervibe1 小时前
使用 Vue3 + Axios 与 Spring Boot 高效对接(含 token 处理)
前端·vue.js
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第五篇:商品后端
前端·后端
圆心角1 小时前
vue keep-alive 原理
前端·vue.js
P7Dreamer1 小时前
Tailwind CSS 日常使用
前端·css
前端赵哈哈1 小时前
项目中的Vue I18n 9.x可以与VSCode插件i18n Ally配合使用
前端·vue.js·visual studio