React useCallBack() 简介

使用 React 构建网站时，重要的是要考虑它的加载速度以及用户与之交互的速度。 使 React 网站更快的一种方法是防止它做不必要的工作，例如重新呈现页面中未更改的部分。

React 中的useCallback()函数通过记住我们定义的函数并仅在必要时重新创建它们来帮助我们实现这一点。这可以使网站更快，对用户的响应更快。 根据同年的Stack Overflow 调查，React 是最流行的前端 JavaScript 库，这表明 useCallback() 可能在业界得到广泛使用。

在本文中，我们将解释什么是React 中的 useCallBack() 以及如何在我们的 React 代码中使用它来提高性能。

React 中的 useCallBack 是什么？

useCallback() 是 React 提供的钩子函数，用于记忆函数。 换句话说，它有助于通过避免不必要的重新渲染来优化组件的性能。

在 React 中，当组件的状态或属性发生变化时，组件会重新渲染以反映更新后的值。 此过程的计算成本很高，如果处理不当会降低应用程序的性能。 这就是 useCallback() 派上用场的地方。

使用 useCallback()，用户可以记住一个函数，这意味着它仅在其依赖项发生变化时才被重新定义。 这可以防止不必要的组件重新渲染，从而优化应用程序的性能。

这是一个例子——

const memoizedCallback = useCallback(

() => {

做某事（a，b）；

},

[a, b],

);

虽然通过教程开始使用 React 是一种很好的方式，但通过动态课程开始开发可以显着帮助您更新技能。 查看软件开发的执行研究生课程——从 upGrad 到 kickstart 的全栈开发专业化课程！

使用 useCallBack() 的优点

以下是使用 React useCallBack() 的一些优点 –

• useCallback() 可以通过防止不必要的组件更新来帮助 React 应用程序运行得更快。
• 如果组件获取大量数据并将其显示为图形，则可以从 useCallback() 中受益。
• 如果图形的父组件更新，但更改不会影响图形，则无需更新它并再次获取数据。
• 使用 useCallback() 来记忆获取数据的函数，我们可以避免不必要的更新并使应用程序更快更流畅。
• 这种优化可以改善用户体验，因为应用程序将更快、更高效地运行。

查看 upGrad 的软件开发课程来提高自己的技能。

useCallBack() 的语法和参数

const memoizedCallback = useCallback(

() => {

做一点事（）;

},

[依赖关系 1，依赖关系 2]

);

在示例中， useCallback()挂钩记忆了doSomething()函数，这意味着它缓存了先前创建的版本。除非dependency1或dependency2的值​​发生变化，否则缓存函数将仅用于后续渲染。

如果这些依赖项中的任何一个发生变化，将创建一个新版本的doSomething()函数，并且缓存的版本将被替换为新版本。 这有助于通过防止不必要的函数创建和重新呈现来优化应用程序的性能。

useMemo() 和 useCallBack() 的区别

useCallback和 useMemo 是 React Hooks，可以通过记忆值来提高 React 应用程序的性能。 两个钩子都将函数作为参数并返回该函数的记忆版本。

这是两者之间的区别：

何时使用 useCallBack() 的场景

以下是可以使用 useCallBack() 的场景 –

子组件优化

useCallback React优化依赖引用相等性的子组件以避免不必要的渲染，尤其是在将回调传递给这些子组件时。

防止不必要的渲染

当你有一个组件的子元素在不需要它的情况下重复渲染时， React useCallback特别有用。 您可以将回调函数和依赖项数组传递给useCallback以防止不必要的渲染。

借助upGrad 的全栈软件开发训练营课程，利用您的机会详细了解 useCallBack() 函数。

探索我们的热门软件工程课程

useCallBack() 的例子

以下是如何实现 useCallBack() 挂钩的一些示例。

使用回调示例 1

当父组件将函数作为 prop 传递给子组件时，频繁重新渲染父组件会导致子组件不必要地重新渲染。 在这种情况下，使用 useCallback 来记住可以帮助防止这些不必要的重新渲染的功能。

从“反应”中导入反应，{useCallback}；

功能父组件（）{

const handleButtonClick = useCallback(() => {

console.log('点击按钮');

}, []);

返回 （

<ChildComponent onClick={handleButtonClick} />

);

}

函数 ChildComponent({ onClick }) {

返回 （

<button onClick={onClick}>点我</button>

);

}

使用回调示例 2

假设您有一个对大型数据集执行复杂计算的函数。 如果此函数被频繁调用并且执行时间很长，可能会导致应用程序出现性能问题。 在这种情况下，您可以使用 useCallback 来记忆函数并防止不必要的重新执行计算。

从'react'导入React，{useState，useCallback}；

功能父组件（）{

const [数据, setData] = useState([]);

const processData = useCallback(() => {

const processedData = “处理后的数据”;

返回处理数据；

}， [数据]）;

返回 （

<ChildComponent processData={processData} />

);

}

函数 ChildComponent({ processData }) {

常量结果 = processData();

返回 （

<div>{结果}</div>

);

}

使用 useCallBack() 进行反应性能优化

useCallback 钩子是React 中的一个强大工具，它允许你记忆一个函数，确保它只有在它的一个依赖项发生变化时才被重新创建。 这对于频繁调用的性能密集型函数特别有益。 查看下面的示例，了解如何使用它 –

从'反应'导入{useState，useEffect}；

功能应用程序（）{

const [word, setWord] = useState(“Bob”);

const say = () => console.log(`你的话是：${word}`);

使用效果（（）=> {

说（）;

}， [说]）;

return <div>欢迎光临！</div>;

}

该示例演示了 useEffect 挂钩依赖于 say 函数，这意味着它应该只在函数发生变化时触发。 然而，由于 React 的引用相等性检查，say 函数将始终评估为真，即使在没有实际更改的情况下，也会导致不必要的渲染。

useEffect 回调将在每个渲染上使用，这不适合性能。 解决此问题的一种方法是将函数重新定位到 useEffect 块，但这不是理想的解决方案，因为您将无法在任何其他地方使用该函数。 看看下面这个例子——

从“反应”中导入反应，{useState，useEffect}；

功能应用程序（）{

const [word, setWord] = useState(“Bob”);

const say = () => console.log(`你的话是：${word}`);

使用效果（（）=> {

说（）;

}， [说]）;

return <div>欢迎光临！</div>;

}

另一种解决方案是通过包装函数来实现useCallback 挂钩。 必须记住 useCallback 函数需要一个依赖数组，就像 useEffect 一样。 如果函数接受任何变量，用户可以将其与数组一起传递； 否则将其留空。 在这里，由于 say 函数依赖于 word 变量，我们将其包含在数组中。

从“反应”导入{useState，useEffect，useCallback}

功能应用程序（）{

const [word,setWord]=useState(“Bob”)

const say = useCallback(()=>console.log(`你的话是：${word}`),[word])

使用效果（（）=>{

说（）

}，[说]）

返回<div>欢迎！</div>

}

什么时候不使用 useCallBack()

虽然 useCallback() 是在某些情况下优化性能的有用工具，但有时它也是不必要的，甚至是有害的。 以下是何时不使用 useCallback() 的一些示例：

• 当函数作为 prop 传递时，它已经是一个不依赖于外部状态的纯函数。
• 当函数作为 prop 传递时，它不会导致任何性能问题，也不会被过度调用。
• 当函数作为 prop 传递时，它会在多个地方使用，并且每次都需要重新创建以反映不同的行为或依赖关系。
• 当函数作为 prop 是小组件树的一部分传递时，useCallback() 带来的性能提升可以忽略不计。
• 当函数作为 prop 传递时，它被用作事件处理程序并且只被调用一次。

在这些情况下，由于创建和维护记忆回调的开销，使用 useCallback() 实际上可能会降低性能。 在决定是否使用 useCallback() 之前，仔细考虑每个用例并权衡潜在收益和潜在成本非常重要。

需求软件开发技能

结论

使用 useCallback 可以成为优化 React 应用程序性能的强大工具。 通过记忆功能，可以避免不必要的重新渲染，从而带来更流畅、更高效的用户体验。 但是，明智地使用 useCallback 并了解最有效的场景非常重要。

upGrad 提供计算机科学理学硕士课程，提供全面的计算机科学教育，重点是与行业相关的技能。 该计划适用于任何新手或更有经验的个人，以提高他们的软件开发技能。 通过这门课程，学生将准备好在现实世界中提升他们的职业生涯，并成为他们所向往的领域的专家。