.我爱你 网站一键优化表格

React.memo

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

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

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

React.memo基础语法

父组件

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发生变化才会触发重新渲染

import { memo } from "react";
const Son =memo(() => {console.log('我是子组件，我重新渲染了');return (<div>我是子组件</div>);
})
export default Son;

React.memo-props比较机制