React-Hooks-useCallback

前言

useCallback 是 React 中的一个 Hooks，它用于优化性能，避免不必要的函数重新创建。在函数组件中，当一个函数作为 props 传递给子组件时，如果该函数在每次渲染时都重新创建，可能会导致子组件重新渲染，从而影响性能。

useCallback Hook 概述

• useCallback 是用于优化代码, 可以让对应的函数只有在依赖发生变化时才重新定义

首先来看如下这么一个案例，大致内容为，在 App 组件当中引用了两个组件，然后在使用 useState 定义状态，在 App 当中可以进行增加和减少，在其它两个组件当中也可以进行同样的操作：

代码语言：javascript复制

import React, {useState, memo} from 'react';

function Home(props) {
    console.log('Home被渲染了');
    return (
        <div>
            <p>Home</p>
            <button onClick={() => {
                props.handler()
            }}>Home增加
            </button>
        </div>
    )
}

function About(props) {
    console.log('About被渲染了');
    return (
        <div>
            <p>About</p>
            <button onClick={() => {
                props.handler()
            }}>About减少
            </button>
        </div>
    )
}

const MemoHome = memo(Home);
const MemoAbout = memo(About);

export default function App() {
    console.log('App被渲染了');
    const [numState, setNumState] = useState(0);
    const [countState, setCountState] = useState(0);

    function increment() {
        setNumState(numState   1);
    }

    function decrement() {
        setCountState(countState - 1);
    }

    return (
        <div>
            <p>numState = {numState}</p>
            <p>countState = {countState}</p>
            <button onClick={() => {
                increment()
            }}>App增加
            </button>
            <button onClick={() => {
                decrement()
            }}>App减少
            </button>
            <MemoHome handler={increment}/>
            <MemoAbout handler={decrement}/>
        </div>
    )
}

然后博主在运行了项目之后在进行增加和减少的过程当中发现，在 App 当中增加和在其它两个组件增加和减少都会触发 3 个组件全部重新渲染了，这就是 state 的一个机制，当前 Home 和 About 重新渲染的原因是因为，父组件中的数据发生了变化, 会重新渲染父组件，重新渲染父组件, 就会重新执行父组件函数，重新执行父组件函数, 就会重新定义 increment/decrement 既然 increment/decrement 是重新定义的, 所以就和上一次的不是同一个函数了, 既然不是同一个函数, 所以 Home 和 About 接收到的内容也和上一次的不一样了, 既然接收到的内容和上一次不一样了, 所以就会重新渲染。那么解决该问题就可以使用本章所介绍的 useCallback 来进行编写, 更改 decrement 方法，用他来举例子：

代码语言：javascript复制

import React, {useCallback} from 'react';

只要 countState 没有发生变化, 那么 useCallback 返回的永远都是同一个函数：

代码语言：javascript复制

const decrement = useCallback(() => {
    setCountState(countState - 1);
}, [countState]);

image-20220618135036218

然后经过这么一个改造过后呢，再去浏览器测试你会发现，在增加的时候，About 组件没有被重新渲染，这个我不把测试过程列举出来了。

最后

本期结束咱们下次再见