常见陷阱与最佳实践

// ❌ 无限循环：setState → 渲染 → useEffect → setState → ...
function Buggy() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);  // count 是依赖，变化触发 effect
  }, [count]);            // 对，但这个逻辑就是错的
}

// ❌ 更隐蔽的：对象/数组作为依赖
function Buggy() {
  const [data, setData] = useState({});
  useEffect(() => {
    const params = { page: 1 };  // 每次渲染都是新对象
    fetchData(params).then(setData);
  }, [params]);  // 死循环！params 每帧都是新引用
}

// ✅ 解决：用 useMemo 稳定引用
const params = useMemo(() => ({ page: 1 }), []);
useEffect(() => {
  fetchData(params).then(setData);
}, [params]);

function Counter() {
  const [count, setCount] = useState(0);

  // ❌ 闭包捕获了创建时的 count（0），不会更新
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count);  // 永远打印 0
    }, 1000);
    return () => clearInterval(timer);
  }, []);  // 空依赖 = 闭包冻结在首次渲染

  // ✅ 方案一：使用函数式更新
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1);  // 不依赖外部 count
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  // ✅ 方案二：把 count 加入依赖（每次重建定时器）
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(count);
    }, 1000);
    return () => clearInterval(timer);
  }, [count]);

  // ✅ 方案三：用 ref 保存最新值
  const countRef = useRef(count);
  countRef.current = count;
  useEffect(() => {
    const timer = setInterval(() => {
      console.log(countRef.current);  // 始终读到最新值
    }, 1000);
    return () => clearInterval(timer);
  }, []);
}

// ❌
const [count, setCount] = useState(0);
function handleClick() {
  setCount(5);
  console.log(count);  // 仍然是 0！setState 是异步的
}

// ✅ 需要新值做后续操作 → 用 useEffect
useEffect(() => {
  console.log('count 已更新：', count);
}, [count]);

// ✅ 或在事件处理中直接计算
function handleClick() {
  const nextCount = count + 1;
  setCount(nextCount);
  doSomethingWith(nextCount);  // 直接用计算出的新值
}

// ✅ 连续更新 → 函数式写法
setCount(c => c + 1);  // 每次基于最新值

// ❌ 排序/增删列表时状态错位
{todos.map((todo, index) => (
  <TodoItem key={index} {...todo} />  // 删除第一个 → 第二个变成第一个
))}

// ✅ 稳定的唯一标识
{todos.map(todo => (
  <TodoItem key={todo.id} {...todo} />
))}

// Key 的特殊用途：强制重新挂载
<Input key={userId} />  // userId 变化 → Input 卸载再挂载（清空状态）

// ❌ 所有消费者都重渲染
const AppContext = createContext();
function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  // 两个不相关的状态放在同一个 Context → theme 变化触发 user 相关的组件重渲染
  return (
    <AppContext.Provider value={{ user, theme, setUser, setTheme }}>
      <Main />
    </AppContext.Provider>
  );
}

// ✅ 拆分 Context
<UserContext.Provider value={{ user, setUser }}>
  <ThemeContext.Provider value={{ theme, setTheme }}>
    <Main />
  </ThemeContext.Provider>
</UserContext.Provider>

// ✅ 或用 Zustand（天然支持选择器）
const user = useUserStore(s => s.user);    // 只在 user 变化时重渲染

// ❌ 组件卸载后定时器仍在运行
useEffect(() => {
  setInterval(() => tick(), 1000);
}, []);

// ❌ 组件卸载后 setState（内存泄漏 + React 警告）
useEffect(() => {
  fetchData().then(setData);  // Promise 完成时组件可能已卸载
}, []);

// ✅ 正确清理
useEffect(() => {
  const id = setInterval(() => tick(), 1000);
  return () => clearInterval(id);
}, []);

useEffect(() => {
  let cancelled = false;
  fetchData().then(data => {
    if (!cancelled) setData(data);
  });
  return () => { cancelled = true; };
}, []);

// ❌ 反模式：用 state + effect 同步 props
function Bad({ firstName, lastName }) {
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(`${firstName} ${lastName}`);
  }, [firstName, lastName]);
  return <p>{fullName}</p>;
}

// ✅ 直接在渲染中计算（派生状态）
function Good({ firstName, lastName }) {
  const fullName = `${firstName} ${lastName}`;
  return <p>{fullName}</p>;
}

// ✅ 如果计算重，用 useMemo
const fullName = useMemo(
  () => expensiveCombine(firstName, lastName),
  [firstName, lastName]
);

// ❌ div 做按钮
<div onClick={handleClick}>提交</div>

// ✅ button 元素（自动获得键盘焦点、Enter/Space 触发、role 语义）
<button onClick={handleClick}>提交</button>

// ❌ input 缺少 label 关联
<input type="text" />

// ✅ label 关联 input（htmlFor = for）
<label htmlFor="email">邮箱</label>
<input id="email" type="text" />

// ✅ 隐式关联
<label>邮箱：<input type="text" /></label>

// 开发模式下这段效果会渲染两次
function Counter() {
  const [count, setCount] = useState(0);
  // 构造函数、Effect、State 初始化函数都会双重执行
  // 这是正常的！帮助发现副作用问题
  return <button onClick={() => setCount(c => c + 1)}>
    点击次数：{count}
  </button>;
}

// 生产模式不受影响

// ❌ effect 不追 ref.current 变化
useEffect(() => {
  console.log(ref.current);  // ref 变化不触发 effect
}, [ref.current]);  // 这个依赖"看起来"有用，但实际无用

// ✅ ref 的值在 effect 中读取，但不放入依赖
useEffect(() => {
  const node = ref.current;
  if (node) {
    node.addEventListener('scroll', handler);
    return () => node.removeEventListener('scroll', handler);
  }
  // ref.current 不需要在依赖中
}, []);  // 只在挂载时执行一次