React: memo

React.memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件，当它的父组件重新渲染时，只要它的新 props 与旧 props 相同时，React 就不会重新渲染它。这样的组件被称为 记忆化的（memoized）组件。

一、未使用memo

1. 代码

import {
   
    useState } from "react";

// 未做memo记忆化之前
function Son() {
   
   
    console.log('子组件重新渲染');

    return (
        <>
            <div>子组件</div>
        </>
    )
}

function App() {
   
   
    const [count1, setCount1] = useState(0);

    return (
        <>
            <div>父组件：{
   
   count1} <button onClick={
   
   () => setCount1(count1 + 1)}>+</button></div>
            <Son />
        </>
    )
}

export default App;

2.运行效果