ReactJS 使用回调挂钩

当您有一个子组件在不需要的情况下一次又一次地重新渲染时，使用 useCallback 挂钩。

传递一个内联回调和一组依赖项。 useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。这在将回调传递给依赖引用相等性以防止不必要的渲染的优化子组件时很有用。

句法：

const memoizedCallback = useCallback(
 () => {
   doSomething(a, b);
 },
 [a, b],
);

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹。

cd foldername

项目结构：它将如下所示。

没有 useCallback Hook：问题是一旦计数器更新，所有三个函数都会重新创建。警报一次增加三个，但如果我们更新某些状态，则与该状态相关的所有功能都应该重新实例化。如果另一个状态值未更改，则不应触摸它。这里，文件名是 App.js

Javascript

import React, { useState, useCallback } from 'react'
const funccount = new Set();
const App = () => {
 
 
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
 
  const incrementCounter = () => {
    setCount(count + 1)
  }
  const decrementCounter = () => {
    setCount(count - 1)
  }
   
   const incrementNumber = () => {
    setNumber(number + 1)
  }
   
funccount.add(incrementCounter);
funccount.add(decrementCounter);
funccount.add(incrementNumber);
alert(funccount.size);
 
  return (
    

      Count: {count}
      
        Increase counter
      
      
         Decrease Counter
      
      
        increase number
      
    
  )
}
 
 
export default App;

使用 useCallback 钩子：为了解决这个问题，我们可以使用 useCallback 钩子。这里，文件名是 App.js。

Javascript

import React, { useState, useCallback } from 'react'
var funccount = new Set();
const App = () => {
 
 
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
 
const incrementCounter = useCallback(() => {
  setCount(count + 1)
}, [count])
const decrementCounter = useCallback(() => {
  setCount(count - 1)
}, [count])
const incrementNumber = useCallback(() => {
  setNumber(number + 1)
}, [number])
   
funccount.add(incrementCounter);
funccount.add(decrementCounter);
funccount.add(incrementNumber);
alert(funccount.size);
 
  return (
    

      Count: {count}
      
         Increase counter
      
      
         Decrease Counter
      
      
         increase number
      
    
  )
}
 
 
export default App;

输出：正如我们从下面的输出中看到的，当我们更改状态“count”时，两个函数将重新实例化，因此集合大小将增加 2，当我们更新状态“number”时，只有一个函数将重新实例化并且集合的大小只会增加一。