深入解析React useEffect行为与优化：以无限滚动为例

引言：useEffect的重复执行困境

在react函数组件中，useeffect钩子是处理副作用（如数据获取、订阅、手动dom操作等）的核心工具。它允许我们在组件渲染后执行某些操作，并根据依赖项的变化重新执行或清理。然而，开发者在使用useeffect时常会遇到一个令人困惑的问题：在某些情况下，尤其是在开发环境中，useeffect的副作用函数会意外地多次执行，导致api重复调用、数据重复添加等非预期行为。这在涉及数据加载的场景（例如无限滚动）中尤为突出，可能导致用户体验下降和不必要的服务请求。

剖析React.StrictMode：开发环境下的双重渲染

useEffect在开发环境下重复执行的一个常见原因是React.StrictMode（严格模式）。严格模式是React提供的一个开发辅助工具，旨在帮助开发者发现应用中潜在的问题和不安全的生命周期方法。

在开发模式下，当严格模式启用时，React会故意地执行以下操作：

1. 双重渲染组件：组件会被渲染两次。
2. 双重执行useEffect的副作用函数：对于useEffect，它会先执行一次副作用函数，然后立即执行清理函数（如果存在），紧接着再次执行副作用函数。这种行为旨在模拟组件的快速卸载和重新挂载，帮助开发者验证副作用函数是否具备幂等性（即多次执行结果一致）以及清理函数是否正确处理了资源释放。

尽管这种行为有助于发现潜在的bug，但它确实会导致在开发环境中看到API重复调用等现象。需要强调的是，严格模式只在开发环境中生效，不会影响生产环境下的应用行为。

解决方案：移除或暂时禁用React.StrictMode

如果开发环境下的双重API调用确实干扰了开发流程或调试，可以暂时移除或注释掉App.js中的React.StrictMode。

// App.js
import React from 'react'; // 移除对 StrictMode 的引用
import InfiniteScroll from './InfiniteScroll';

function App() {
  return (
    // 在开发环境中，如果需要避免 useEffect 双重执行，可以暂时移除或注释掉 StrictMode
    // <React.StrictMode>
      <InfiniteScroll />
    // </React.StrictMode>
  );
}

export default App;

注意事项：虽然移除严格模式可以解决开发环境下的重复执行问题，但开发者应理解其背后的原因。理想情况下，我们应该编写幂等的副作用函数，确保即使在严格模式下被多次执行，也不会产生副作用或导致数据不一致。这有助于构建更健壮的应用。

优化组件渲染性能：useMemo的应用

除了useEffect的执行次数问题，组件不必要的重新渲染也是React应用性能优化的重要考量。当父组件重新渲染时，其子组件也会默认重新渲染，即使它们的props没有改变。对于一些计算成本较高的派生状态或props，这种不必要的重新计算会浪费资源。

useMemo钩子正是为此而生。它允许我们记忆化（memoize）计算结果，只有当其依赖项发生变化时才重新计算该值。

在无限滚动组件中，列表内容的映射 (content) 可能会在每次组件重新渲染时都进行。如果data（帖子列表）没有变化，重新映射整个数组是低效的。通过使用useMemo，我们可以确保content只在data或lastPostRef（作为依赖项）发生变化时才重新计算。

代码示例：在InfiniteScroll.js中使用useMemo

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

108

查看详情

// InfiniteScroll.js
import { useRef, useState, useMemo } from "react"; // 引入 useMemo
import usePosts from "./usePosts";

const InfiniteScroll = () => {
  const [page, setPage] = useState(1);
  const lastPostRef = useRef();
  const { data, loading, isLastPage } = usePosts(page);

  // 使用 useMemo 记忆化 content 列表的生成
  const content = useMemo(() => {
    return data.map((post, i) => {
      // 检查是否是最后一个帖子，用于 Intersection Observer
      if (data.length === i + 1) {
        return (
          <p key={i} ref={lastPostRef}> {/* 使用索引 i 作为 key */}
            {post.title}
          </p>
        );
      }
      return <p key={i}>{post.title}</p>; {/* 使用索引 i 作为 key */}
    });
  }, [data, lastPostRef]); // 依赖 data 和 lastPostRef

  return (
    <div>
      {content}
      {loading && <p className="center">Loading More Posts...</p>}
      {/* 可以在此处添加 isLastPage 相关的 UI 提示 */}
    </div>
  );
};

export default InfiniteScroll;

最佳实践：useMemo并非万能药，过度使用可能适得其反，因为它本身也有开销。只应用于计算成本较高的场景，或当记忆化的值作为子组件的props，且子组件使用了React.memo进行性能优化时。

列表渲染的关键：key属性的正确使用

在React中渲染列表时，为每个列表项提供一个稳定且唯一的key属性至关重要。key属性帮助React识别哪些项被添加、移除、更新或重新排序，从而优化DOM操作，提高渲染效率，并避免潜在的bug（例如，当列表项顺序变化时，组件状态可能错乱）。

理想情况下，key应该是数据项的唯一且稳定的ID（例如，数据库中的主键）。然而，在某些情况下，如果数据源不提供唯一ID，或者ID不稳定，开发者可能会考虑使用数组索引 (index) 作为key。

根据原问题描述，post.id可能不是唯一的，因此建议使用index作为key。

代码示例：使用索引i作为key

// InfiniteScroll.js (content 部分)
// ...
const content = useMemo(() => {
    return data.map((post, i) => {
      if (data.length === i + 1) {
        return (
          <p key={i} ref={lastPostRef}> {/* 使用索引 i 作为 key */}
            {post.title}
          </p>
        );
      }
      return <p key={i}>{post.title}</p>; {/* 使用索引 i 作为 key */}
    });
}, [data, lastPostRef]);
// ...

重要提示：尽管在post.id不唯一且列表项是追加而非频繁重新排序或删除的情况下，使用index作为key可以避免React因key冲突而报错，但这并非最佳实践。当列表项的顺序可能改变、被插入或删除时，使用index作为key会导致React无法正确追踪每个列表项，从而可能引发性能问题、不正确的组件状态或UI渲染错误。在实际项目中，应始终优先确保数据源提供唯一且稳定的ID作为key。

总结与进一步思考

通过本文的探讨，我们解决了useEffect在开发环境中重复执行的问题，优化了组件渲染性能，并强调了key属性的正确使用。

1. React.StrictMode：它是开发辅助工具，导致useEffect在开发环境下双重执行。理解其目的并知道如何在必要时暂时禁用它，有助于提高开发效率。在生产环境中，此行为不会发生。
2. useMemo：用于记忆化昂贵的计算结果，避免不必要的重新计算，从而提升组件的渲染性能。
3. key属性：在列表渲染中至关重要，它帮助React高效地更新UI。始终优先使用稳定且唯一的ID作为key，仅在特殊情况下考虑使用索引。

理解React生命周期和钩子的行为是构建健壮、高效应用的关键。开发者应始终致力于编写幂等、无副作用的useEffect函数，并合理利用React提供的性能优化工具，以提供最佳的用户体验。

以上就是深入解析React useEffect行为与优化：以无限滚动为例的详细内容，更多请关注php中文网其它相关文章！