React函数组件中map循环执行两次的原因咨询

嘿，我来帮你拆解这个问题——你在Bord组件的boxes.map回调里加的console.log(subArray, index)之所以出现两次，核心原因是React严格模式（Strict Mode）在开发环境下的特殊行为。

具体原因 #

当你用Create React App、Vite这类主流脚手架创建React项目时，默认会在根组件外层包裹<React.StrictMode>标签。在开发环境中，这个模式会主动重复调用一些函数，目的是帮你提前检测代码中潜在的副作用问题：

• 组件的渲染函数（包括你写在map里的这个回调函数）
• useState、useMemo这类Hook的初始化逻辑
• 还有useEffect的回调（不过你的useEffect因为依赖boxes只初始化了一次，所以它只打印了一次）

简单说，React在开发模式下会故意让你的渲染逻辑跑两遍，就是为了揪出那些在重复渲染时可能出问题的代码（比如在渲染里直接改状态、调用异步请求这类操作）。

怎么验证？ #

你可以去项目的根文件（比如index.js或者main.jsx）看看，肯定能找到类似这样的代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Bord from './Bord';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode> {/* 就是这个标签导致的重复日志 */}
    <Bord />
  </React.StrictMode>
);

如果暂时把<React.StrictMode>标签去掉，重启项目后，你会发现console.log只会打印一次了。

重要提醒 #

• 这个重复调用的行为只在开发环境存在，生产环境下Strict Mode会自动失效，所以不用担心线上会出现两次日志或者重复执行逻辑的问题。
• 尽量别在渲染函数（包括map回调这种渲染时执行的代码）里写有副作用的逻辑，Strict Mode的这个机制就是为了帮你规避这类风险。

内容的提问来源于stack exchange，提问作者Jasmin Raval