大多数React开发者都理解错了！虚拟DOM和Fiber究竟在干什么？

// 你以为的流程
setState(newValue) → 直接改DOM

// 实际的React流程
setState(newValue)
  → 创建新的虚拟DOM树
  → 与旧树对比（diffing）
  → 计算最小化差异集合
  → 批量提交到真实DOM
  → 浏览器重排重绘

// 场景1：事件处理器内部
<button onClick={() => {
  setCount(c => c + 1);
  setValue(v => v + 1);
  setLoading(false);
}}>
  更新
</button>

// React的承诺：这些更新会被"批处理"，只触发一次render

// 场景2：异步回调中
setTimeout(() => {
  setCount(c => c + 1);    // 触发一次render
  setValue(v => v + 1);    // 再触发一次render！
}, 1000);

// 场景3：Promise链中
fetch('/api/data')
  .then(res => res.json())
  .then(data => {
    setLoading(false);     // render
    setData(data);         // 再render
  });

// React 18+：引入Concurrent Rendering
fetch('/api/data')
  .then(data => {
    setLoading(false);     // React 18会自动批处理！
    setData(data);         // 现在只触发一次render
  });

// 还有这种写法变成了规范操作
import { startTransition } from'react';

function SearchComponent() {
const handleSearch = (input) => {
    startTransition(() => {
      setSearchQuery(input);  // 标记为低优先级
    });
  };
}

render开始
  ├─ ComponentA （花时间1ms）
  ├─ ComponentB （花时间2ms）
  ├─ ComponentC （花时间3ms）
  └─ ... 深度嵌套的N个组件 （每个花1ms）
  
如果总耗时超过16ms，用户就能感知到卡顿了
但栈调和器不能中断，只能一直干到底

// 伪代码展示Fiber的工作方式
render开始
  ├─ ComponentA （花时间1ms，可以暂停）
  ├─ 检查：还有时间吗？没有了 → 暂停，等下一帧
  ├─ 下一帧开始
  ├─ ComponentB （花时间2ms）
  ├─ 检查：还有时间吗？有 → 继续
  └─ ...

// Fiber节点的简化结构
type Fiber = {
type: Function | string,           // 组件类型或标签名
props: Object,                     // 组件属性
state: Object,                     // 当前state
parent: Fiber | null,              // 父Fiber
sibling: Fiber | null,             // 兄弟Fiber  
child: Fiber | null,               // 子Fiber
alternate: Fiber | null,           // 旧树中对应的Fiber（用于对比）
effectTag: string,                 // 标记这个节点需要做什么（更新/删除/插入）
hooks: Array,                      // Hooks链表
};

// 你以为这样就够了
const UserCard = memo(({ user }) => {
return<div>{user.name}</div>;
});

// 但如果父组件这样用，memo就成了摆设
function UserList({ users }) {
const handleClick = () => { /* ... */ };  // 每次render都是新函数！

return users.map(u =>
    <UserCard key={u.id} user={u} onClick={handleClick} />
  );
}

// 反面教材：为了"优化"而优化
const expensiveValue = useMemo(() => {
  return arr.filter(x => x.id > 10).map(x => x * 2);
}, [arr]);

// 问题：useMemo本身有开销！
// 对比的成本、保存引用的成本、可能的GC压力
// 对于这种简单计算，useMemo反而比直接计算还慢

// Redux或其他状态管理中的常见错误
const data = useSelector(state => ({
  users: state.users,
  count: state.count
}));

// 每次selector执行都返回新对象！
// 即使state.users和state.count没变，对象引用也变了
// 组件还是会重新render

// 方案1：用reselect这样的库
import { createSelector } from 'reselect';

const selectUserData = createSelector(
  state => state.users,
  state => state.count,
  (users, count) => ({ users, count })
);

// 方案2：分离selector
const users = useSelector(state => state.users);
const count = useSelector(state => state.count);

function SearchUsers() {
const [input, setInput] = useState('');
const [results, setResults] = useState([]);

const handleChange = (e) => {
    const value = e.target.value;
    
    // 立即更新input框，让用户感受到响应
    setInput(value);
    
    // 推迟搜索结果的更新，降低优先级
    startTransition(() => {
      setResults(performSearch(value));
    });
  };

return (
    <>
      <input value={input} onChange={handleChange} />
      {results.map(r => <div key={r.id}>{r.name}</div>)}
    </>
  );
}