React-React.memo-props比较机制

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