【React】StrictMode 下，组件会加载两次

最新推荐文章于 2025-05-01 15:59:49 发布

原创最新推荐文章于 2025-05-01 15:59:49 发布 · 1.3k 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#react.js #前端 #javascript #typescript #ecmascript

react 专栏收录该内容

51 篇文章

订阅专栏

文章目录

在 React 中，StrictMode 是一个帮助开发者识别潜在问题的工具。它会启用额外的开发警告，帮助我们发现常见的 bug 和不推荐的生命周期方法。尽管它不会影响生产环境中的应用表现，但在开发模式下，StrictMode 会做一些额外的处理，其中最显著的一个表现就是组件在渲染时会执行两次。这一行为虽然可能会让开发者感到困惑，但它的目的实际上是帮助我们编写更健壮的代码。本文将深入探讨 StrictMode 下组件加载两次的原因、影响以及如何正确应对这一特性。

一、什么是 StrictMode

1. StrictMode 介绍

StrictMode 是 React 提供的一个工具，它用于帮助开发者在开发环境中发现不安全的生命周期方法、过时的 API 使用以及潜在的副作用问题。StrictMode 并不会对生产环境产生影响，只会在开发模式下起作用。

通过启用 StrictMode，React 会对代码执行一些额外的检查。例如，它会对组件的渲染过程进行监控，并在控制台中输出警告信息，以帮助开发者改进代码质量。

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

在上面的代码中，我们将 MyComponent 包裹在 StrictMode 中，启用该模式后，React 会对 MyComponent 的渲染过程进行额外检查。

2. StrictMode 启用的检查项

StrictMode 主要做以下几个检查：

不推荐的生命周期方法：例如 componentWillMount、componentWillReceiveProps 和 componentWillUpdate，这些方法在未来的 React 版本中将被废弃，StrictMode 会警告你使用这些方法。
过时的 API：StrictMode 会检查你是否在使用 React 中的过时 API。
副作用检测：React 会多次调用组件的生命周期方法（尤其是 componentDidMount 和 componentDidUpdate）来检测副作用问题。

二、组件会加载两次的原因

1. 为什么组件会加载两次

在 StrictMode 启用的情况下，React 会故意使每个组件渲染两次。这个行为可能会让开发者感到困惑，特别是当你看到组件的副作用（比如网络请求或 DOM 操作）发生多次时。

这个渲染两次的机制是 React 特意设计的，用来帮助开发者发现和修复潜在的副作用。React 通过这种方式来模拟某些不稳定的代码执行，从而让开发者能够识别出一些不应该发生的副作用，确保代码的健壮性。

具体来说，React 会执行以下操作：

在第一次渲染时，React 会正常渲染组件。
在第二次渲染时，React 会调用同一个组件的生命周期方法和函数组件的 render 方法，模拟一种重渲染的情况。这会帮助开发者检查是否存在不必要的副作用或不稳定的状态管理。

2. 组件渲染两次的影响

这种行为在开发过程中可能会给我们带来一些不必要的困扰，尤其是在你依赖于组件渲染结果来执行副作用（例如网络请求、DOM 操作等）时。由于 React 在 StrictMode 下会渲染两次，因此副作用也会被触发两次，导致一些潜在问题。例如，网络请求可能会被多次发送，DOM 更新可能会多次执行。

但这个行为的目的是为了避免在生产环境中出现潜在的副作用问题。通过多次渲染，React 能够确保副作用代码是幂等的，即无论组件渲染多少次，副作用的结果都是一致的。

三、如何处理 StrictMode 下的两次渲染

1. 避免不必要的副作用

在 StrictMode 下，组件渲染两次的最常见副作用是异步请求的重复执行。为了避免这个问题，你可以通过以下几种方式来确保副作用的正确处理：

a. 使用 `useEffect`

React 的 useEffect Hook 是一种处理副作用的常见方式。为了避免在组件渲染两次时执行重复的副作用代码，你可以将副作用逻辑放在 useEffect 中，并使用适当的依赖项来控制副作用的执行时机。

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

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 仅在组件挂载时执行网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组作为依赖项，确保只在组件挂载时执行一次

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

在上述代码中，useEffect 只会在组件挂载时执行一次，因为我们传入了一个空数组作为依赖项。这就避免了在 StrictMode 下因为多次渲染导致的重复请求问题。

b. 使用 `useCallback` 和 `useMemo`

对于一些依赖于回调函数或计算值的副作用，可以使用 useCallback 和 useMemo 来优化性能。这样可以确保在渲染过程中只有必要的回调或计算值发生变化，避免不必要的副作用触发。

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

function MyComponent() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 使用 useCallback 确保函数在渲染时不重新创建

  return <button onClick={increment}>Increment: {count}</button>;
}