React-Hooks-useCallback

简介: React-Hooks-useCallback

前言


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




useCallback Hook 概述


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

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

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 方法,用他来举例子:

import React, {useCallback} from 'react';


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

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


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




最后

本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
3天前
|
前端开发
深入探索React Hooks:从useState到useEffect
深入探索React Hooks:从useState到useEffect
9 3
|
23天前
|
存储 缓存 JavaScript
深入理解 React-Hooks 之 useRef
【10月更文挑战第20天】总之,`useRef` 是 React-Hooks 中一个非常实用的工具,它为我们提供了一种灵活而强大的方式来处理组件中的各种数据和操作。通过深入理解和掌握 `useRef` 的原理和用法,我们能够更好地构建高效、稳定的 React 应用。
32 6
|
存储
React-Hooks-useRef
React-Hooks-useRef
56 0
|
存储 前端开发 容器
React-Hooks-useContext
React-Hooks-useContext
43 0
|
前端开发 JavaScript
React-Hooks-useReducer
React-Hooks-useReducer
48 0
|
前端开发
React-Hooks之useCallback
React-Hooks之useCallback
102 0
React-Hooks之useMemo
React-Hooks之useMemo
67 0
React-Hooks之useEffect()
React-Hooks之useEffect()
75 0