React useCallback鉤子的作用方法demo

更新時(shí)間：2022年12月13日 17:06:20 作者：Jovie

這篇文章主要為大家介紹了React useCallback鉤子的作用方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

簡(jiǎn)介

如果你還不熟悉鉤子的概念，請(qǐng)務(wù)必查看本文章，因?yàn)樗鼘?duì)鉤子的概念提供了一個(gè)非常好的、深入的概述，以及一些鉤子的例子。

useCallback 鉤子是用來緩存一個(gè)記憶化的回調(diào)函數(shù)，以節(jié)省任何重新計(jì)算的開銷。

這個(gè)鉤子可以阻止一個(gè)組件重新渲染，除非它的道具發(fā)生了變化，這意味著我們現(xiàn)在可以隔離資源密集型的函數(shù)，這樣它們就不會(huì)在每個(gè)組件渲染時(shí)自動(dòng)運(yùn)行。

最好是展示一個(gè)有利于使用該鉤子的場(chǎng)景，這樣我們就能更好地理解我們?yōu)檫_(dá)成一個(gè)問題所采取的步驟，然后再解釋使用useCallback 鉤子背后的思考過程。

項(xiàng)目概述

我們將從搭建一個(gè)全新的React項(xiàng)目的腳手架開始。首先，我們將創(chuàng)建一個(gè)新的項(xiàng)目目錄，之后，我們將使用終端初始化一個(gè)新項(xiàng)目。

在這個(gè)過程中，你可以使用npm、npx或者yarn。你要運(yùn)行的命令是：

npm。npm init react-app app-name
npx: npx create-react-app app-name
yarn。yarn create react-app app-name

現(xiàn)在我們已經(jīng)設(shè)置好了一切，讓我們直接進(jìn)入有趣的部分。

項(xiàng)目進(jìn)展

由于這是一個(gè)小項(xiàng)目，我們將把所有的代碼放在根src 目錄下的App.js 文件內(nèi)，它看起來會(huì)是這樣的：

import { useState, memo } from "react";
import './App.css';
const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <div className="todos-container">
      <h2>My Todos</h2>
      <div className="todos">
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>;
        })}
      </div>
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
};
const MemoizedTodos = memo(Todos);
const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);
  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = () => {
    setTodos((t) => [...t, "New Todo"]);
  };
  return (
    <div className="App">
      <MemoizedTodos
        todos={todos}
        addTodo={addTodo}
      />
      <hr />
      <div className="counter-container">
        <p>Count: {count}</p>
        <button onClick={increment}>+</button>
      </div>
    </div>
  );
};
export default App;

這里有相當(dāng)多的東西需要解壓，所以讓我們看看我們有什么。

首先，我們定義了一個(gè)Todos 組件，它的道具是一個(gè)todos列表，以及一個(gè)函數(shù)，一旦被調(diào)用，就會(huì)添加一個(gè)新的todo。這個(gè)組件的任務(wù)是將todos渲染到屏幕上，并在按下Add Todo 按鈕時(shí)添加一個(gè)新的todo。

然后，我們有其余的App 組件，除了渲染和傳遞道具給MemoizedTodos 組件外，還在屏幕上顯示一個(gè)可以遞增的計(jì)數(shù)器。

而為了讓一切看起來更好一點(diǎn)，我們還將在我們的App.css 文件中添加以下樣式：

.App {
  text-align: left;
  width: 80vw;
  margin: 5vh auto 0 auto;
}

那么，問題出在哪里？

現(xiàn)在，你可能會(huì)問自己："這個(gè)應(yīng)用程序有什么問題？"；的確，一切似乎都在正常工作。然而，問題是，每次我們點(diǎn)擊+ 按鈕來增加計(jì)數(shù)器時(shí)，Todos 組件就會(huì)被重新渲染。

我們可以通過檢查控制臺(tái)來檢查，每次我們重新渲染Todos 組件時(shí)，都會(huì)打印到控制臺(tái)。

意外的Todos 組件的重新渲染

問題的根本原因

你看，在App 組件中，我們定義了addTodo 函數(shù)，它將在每次App 組件重新渲染時(shí)被重新創(chuàng)建。當(dāng)App 組件的狀態(tài)發(fā)生變化時(shí)，它就會(huì)重新渲染，其中包括todos和計(jì)數(shù)器。

我們正在使用[memo](https://reactjs.org/docs/react-api.html#reactmemo)，所以Todos 組件不應(yīng)該重新渲染，因?yàn)楫?dāng)計(jì)數(shù)增加時(shí)，todos 的狀態(tài)和addTodo 的功能都沒有改變。

因此，基本上，問題在于addTodo 是定義在App 組件內(nèi)的，并且在該組件重新生成時(shí)被重新創(chuàng)建。

解決方法

實(shí)際上，我們有兩種方法可以解決這個(gè)問題：

通過在App 組件之外定義addTodo 函數(shù)。
通過對(duì)addTodo 函數(shù)的記憶化

雖然第一種方法似乎是明確的解決方案，但我們不能總是依靠將一個(gè)函數(shù)排除在組件的范圍之外，而使其成為一個(gè)純函數(shù)。

對(duì)函數(shù)進(jìn)行記憶

然后我們?cè)賮砜纯?code>useCallback 鉤子，它正是通過對(duì)函數(shù)進(jìn)行備忘來解決我們現(xiàn)在面臨的這個(gè)問題，以避免其重構(gòu)。

我們所要做的就是從React中導(dǎo)入useCallback 鉤子，并將調(diào)用鉤子的結(jié)果與鉤子的回調(diào)返回的狀態(tài)更新分配給addTodo 函數(shù)，就這樣：

const addTodo = useCallback(() => {
  setTodos((t) => [...t, "New Todo"]);
}, []);

而這個(gè)輕微的調(diào)整應(yīng)該可以解決我們之前的問題。

現(xiàn)在，如果你想知道為什么我們沒有把todos 數(shù)組添加到鉤子的依賴數(shù)組中，那是因?yàn)镽eact會(huì)拾取狀態(tài)，因?yàn)槲覀兪褂玫氖且曰卣{(diào)為參數(shù)的setTodos 函數(shù)，而不是一個(gè)數(shù)組值。

如果我們要改變這一點(diǎn)，我們應(yīng)該看到一個(gè)警告。