React中不将组件存入state、通过map传递id的正确实现模式

修正后实现方案 #

你当前的问题核心是直接将React组件实例存入state的反模式，state仅需存储纯数据，渲染逻辑统一放在JSX中处理即可，以下是符合React最佳实践的完整代码：

import React, { useEffect, useState } from "react";
import Div from "./Div";
import "./styles.css";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  // state仅存储纯数据：每个Div对应的唯一标识id
  const [divIds, setDivIds] = useState([]);

  useEffect(() => {
    // 首次加载批量生成5个id存入state
    const initialIds = Array.from({ length: 5 }, () => uuidv4());
    setDivIds(initialIds);
  }, []); // 空依赖数组保证逻辑仅在组件挂载时执行一次

  const addDiv = () => {
    // 函数式更新state，避免闭包捕获旧state导致的更新异常
    setDivIds(prev => [...prev, uuidv4()]);
  };

  return (
    <div className="App">
      {/* 统一在渲染阶段通过map生成组件，同时添加key保证diff效率 */}
      {divIds.map(id => <Div key={id} id={id} />)}
      <button onClick={addDiv} type="button">
        Click Me!
      </button>
    </div>
  );
}

依赖保持原有配置即可：

"uuidv4": "6.2.12"

核心优化点说明 #

• 修正了state存储逻辑：原写法将组件实例存入state，耦合了数据和渲染逻辑，后续修改Div属性、排序、删除操作都非常繁琐，新写法仅存id纯数据，完全符合React数据驱动渲染的设计思想，维护成本更低。
• 补全了首次加载逻辑：通过Array.from批量生成初始id，满足你首屏渲染5个Div的需求。
• 规避了性能问题：原写法预生成组件实例会导致React diff算法无法高效复用节点，新写法统一在渲染时生成组件，加上绑定的唯一key属性，能最大化减少不必要的重渲染开销。
• 提升了更新稳定性：新增Div时使用函数式更新state，避免闭包导致的旧state引用问题，后续添加其他业务逻辑时不会出现更新异常。

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