深入理解React 渲染机制

// 虚拟 DOM 示例
const element = {
  type: 'div',
  props: {
    className: 'container',
    children: {
      type: 'h1',
      props: { children: 'Hello React' }
    }
  }
};

// 同层比较示例
// 旧树                    // 新树
<div>                     <div>
  <Component />             <Component />
</div>                    </div>
// ✅ 只比较 div 的子节点

// 类型相同 - 复用
<div className="old"> → <div className="new">

// 类型不同 - 重建
<div> → <span>  // 销毁 div，创建 span

// ❌ 不推荐 - 使用索引作为 key
{items.map((item, index) => (
  <li key={index}>{item.name}</li>
))}

// ✅ 推荐 - 使用唯一 ID
{items.map((item) => (
  <li key={item.id}>{item.name}</li>
))}

// Render 阶段示例
function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// 点击时触发 Render 阶段

Render 阶段 → 标记变更 → Commit 阶段 → 更新 DOM
    (可中断)                    (不可中断)

const MemoComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});
// 仅在 props 变化时重新渲染

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);
// 依赖不变时复用缓存值

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
// 避免子组件因函数引用变化而重渲染

// 虚拟列表 - 只渲染可见区域
import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={500}
  itemCount={1000}
  itemSize={35}
>
  {({ index, style }) => (
    <div style={style}>Item {index}</div>
  )}
</FixedSizeList>

// 懒加载组件
const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <LazyComponent />
    </Suspense>
  );
}