`useCallback` vs `useMemo` Hooks

百变鹏仔 3天前 #JavaScript

文章标签 useCallback

提升 react 性能：usecallback 与 usememo hooks

react 的 usecallback 和 usememo 挂钩对于优化应用程序的性能至关重要。了解何时以及如何使用它们可以使您避免不必要的重新渲染并确保您的应用程序顺利运行。在本文中，我们将深入研究有效使用 usecallback 和 usememo 的实际示例。

何时使用 usecallback

usecallback 挂钩返回回调函数的记忆版本，这意味着它仅在其依赖项之一发生更改时重新创建该函数。当将函数作为 props 传递给子组件以防止它们不必要地重新渲染时，这特别有用。

实时示例：防止不必要的重新渲染

假设您有一个将函数传递给子组件的父组件。如果没有 usecallback，每次父组件渲染时，子组件都会重新渲染，即使函数逻辑没有改变。

import react, { usestate, usecallback } from 'react';import childcomponent from './childcomponent';const parentcomponent = () =&gt; {  const [count, setcount] = usestate(0);  // using usecallback to memoize the function  const handleincrement = usecallback(() =&gt; {    setcount(count + 1);  }, [count]);  return (    <div>      <h1>count: {count}</h1>      <childcomponent onincrement="{handleincrement}"></childcomponent></div>  );};export default parentcomponent;

在上面的例子中，handleincrement是通过usecallback来记忆的。 childcomponent 仅在计数发生变化时才会重新渲染，防止不必要的重新渲染并提高性能。

何时使用 usememo

usememo 钩子用于记忆函数的结果，仅当其依赖项之一发生更改时才重新计算缓存的结果。在函数执行昂贵计算的情况下，它对于优化性能很有用。

实时示例：优化昂贵的计算

假设您有一个组件执行计算量大的操作，例如过滤大型列表。

import React, { useState, useMemo } from 'react';const ExpensiveComponent = ({ items }) =&gt; {  const [filter, setFilter] = useState('');  // Using useMemo to optimize expensive filtering  const filteredItems = useMemo(() =&gt; {    console.log('Filtering items...');    return items.filter(item =&gt; item.includes(filter));  }, [items, filter]);  return (    <div>      <input type="text" value="{filter}" onchange="{(e)"> setFilter(e.target.value)}        placeholder="Filter items"      /&gt;      <ul>        {filteredItems.map((item, index) =&gt; (          <li key="{index}">{item}</li>        ))}      </ul></div>  );};export default ExpensiveComponent;

本例中使用usememo来缓存items数组的过滤结果。这样，昂贵的过滤操作仅在项目或过滤器发生变化时才重新计算，避免了不必要的计算。

usecallback 和 usememo 使用指南

结论

react 的 usecallback 和 usememo 钩子是通过避免不必要的重新渲染和昂贵的计算来优化组件性能的强大工具。通过仔细应用这些钩子，您可以确保您的 react 应用程序高效运行。

文章推荐

`useCallback` vs `useMemo` Hooks

提升 react 性能：usecallback 与 usememo hooks

何时使用 usecallback

实时示例：防止不必要的重新渲染

何时使用 usememo

实时示例：优化昂贵的计算

usecallback 和 usememo 使用指南

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？