掌握 React 中的性能优化：深入探讨 useCallback 和 useMemo

php中文网 2024-12-03 12:48:36

介绍

作为使用 react 和 next.js 的前端开发人员，随着应用程序的扩展，我经常遇到性能挑战。解决这些问题的最有效方法之一是通过优化技术，特别是使用 usecallback 和 usememo 挂钩。在这篇博文中，我将解释这些钩子是如何工作的，提供实际示例，并说明如何将它们应用到实际项目中以提高性能。

了解 react 中的性能优化

react 是为了提高效率而构建的，但随着应用程序的增长，性能可能会因不必要的重新渲染而受到影响。每次重新渲染组件时，都会重新创建其中定义的任何函数，这可能会导致性能瓶颈。这就是 usecallback 和 usememo 成为优化 react 应用程序的重要工具的地方。

什么是usecallback？

usecallback 钩子用于记忆函数。它返回回调函数的记忆版本，仅当其依赖项之一发生更改时该版本才会更改。当将回调传递给依赖引用相等性的子组件以防止不必要的渲染时，这特别有用。

const memoizedcallback = usecallback(() => {
  // callback logic
}, [dependencies]);

真实示例：博客应用程序中的评论提交

假设您正在为博客应用程序构建评论部分。每次评论提交都会触发评论列表的重新呈现。通过使用 usecallback，您可以优化提交处理程序以防止不必要的重新渲染。

import react, { usestate, usecallback } from 'react';

const commentsection = ({ postid }) => {
  const [comments, setcomments] = usestate([]);
  const [newcomment, setnewcomment] = usestate('');

  const handlecommentsubmission = usecallback(() => {
    setcomments((prevcomments) => [...prevcomments, newcomment]);
    setnewcomment('');
  }, [newcomment]);

  return (
    <div>
      <h2>comments</h2>
      <ul>
        {comments.map((comment, index) => (
          <li key={index}>{comment}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newcomment}
        onchange={(e) => setnewcomment(e.target.value)}
      />
      <button onclick={handlecommentsubmission}>submit</button>
    </div>
  );
};

在此示例中，_handlecommentsubmission _函数已被记忆。仅当 newcomment 更改时才会重新创建它，从而防止依赖此函数的任何子组件不必要的重新渲染。

usememo 是什么？

usememo 钩子用于记忆昂贵的计算。它返回一个记忆值，仅当其依赖项之一发生更改时才重新计算。这有助于避免每次渲染时进行昂贵的重新计算。

const memoizedvalue = usememo(() => {
  // expensive calculation
  return computedvalue;
}, [dependencies]);

现实示例：过滤大型数据集

考虑一个显示大量产品列表的应用程序。当根据用户输入过滤此列表时，在每个渲染上重新计算过滤结果可能效率很低。使用 usememo，您可以优化这个过程。

import React, { useState, useMemo } from 'react';

const ProductList = ({ products }) => {
  const [filterText, setFilterText] = useState('');

  const filteredProducts = useMemo(() => {
    return products.filter((product) =>
      product.name.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [filterText, products]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search products..."
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

在此示例中，仅当filtertext或产品更改时才计算filteredproducts数组。这可以防止在其他状态变量发生变化时重新渲染期间进行不必要的过滤计算。

使用 usecallback 和 usememo 的最佳实践