React中点击事件触发组件替换的最佳方案及状态存储疑问

首先得明确：把Component或者JSX直接存在state里，确实不属于React的最佳/专业实践，虽然你当前的写法能正常运行，但从长期维护、React设计原则的角度来看，存在不少隐患。

为什么不推荐这么做？ #

React的核心设计理念是数据驱动UI——UI应该是你当前state和props的直接映射，而不是把UI元素本身当作状态来存储。具体来说有这些问题：

• 违反单向数据流原则：当你把UI存在state里，数据和UI的关联会变得模糊，后续调试或修改时很难追踪“为什么UI变成这样”
• 维护成本高：如果后续需要修改展示组件或编辑组件的逻辑，你得同时处理state里存储的组件实例，容易遗漏或出错
• 潜在的性能与内存问题：组件实例存储在state中可能会导致不必要的重新渲染，甚至在组件包含副作用（比如订阅、定时器）时引发内存泄漏

更专业的替代方案 #

正确的做法是在state中存储数据和状态标记，而不是UI组件。比如给每个数据块添加一个isEditing的布尔值，用来控制当前渲染展示组件还是编辑组件。

举个简单的实现示例：

import { useState } from 'react';

// 模拟展示组件
const DataDisplay = ({ data, onEdit }) => (
  <div className="data-block">
    <p>{data.content}</p>
    <button onClick={onEdit}>编辑</button>
  </div>
);

// 模拟编辑表单组件
const EditForm = ({ data, onSave, onCancel }) => {
  const [inputValue, setInputValue] = useState(data.content);
  
  const handleSave = () => {
    onSave({ ...data, content: inputValue });
  };
  
  return (
    <div className="edit-form">
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
      />
      <button onClick={handleSave}>保存</button>
      <button onClick={onCancel}>取消</button>
    </div>
  );
};

const App = () => {
  // state中存储数据+编辑状态标记
  const [items, setItems] = useState([
    { id: 1, content: "第一块数据", isEditing: false },
    { id: 2, content: "第二块数据", isEditing: false },
  ]);

  // 切换编辑状态
  const toggleEdit = (itemId) => {
    setItems(prevItems => 
      prevItems.map(item => 
        item.id === itemId ? { ...item, isEditing: !item.isEditing } : item
      )
    );
  };

  // 保存编辑内容
  const saveEdit = (updatedItem) => {
    setItems(prevItems => 
      prevItems.map(item => 
        item.id === updatedItem.id ? { ...updatedItem, isEditing: false } : item
      )
    );
  };

  return (
    <div className="item-list">
      {items.map(item => (
        <div key={item.id}>
          {/* 根据isEditing状态渲染对应组件 */}
          {item.isEditing ? (
            <EditForm 
              data={item} 
              onSave={saveEdit} 
              onCancel={() => toggleEdit(item.id)} 
            />
          ) : (
            <DataDisplay 
              data={item} 
              onEdit={() => toggleEdit(item.id)} 
            />
          )}
        </div>
      ))}
    </div>
  );
};

export default App;

这种方式完全遵循React的设计逻辑：state只存核心数据和状态标记，UI由这些数据推导而来，不仅代码更清晰，后续维护、扩展也会轻松很多。

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