Advanced React Patterns

React 的模式这几年变化很快。从 Class Components 到 Hooks，再到 Server Components，每次都像是重新学了一遍。这篇文章整理的是我目前觉得最实用的几个模式。

Custom Hooks：把逻辑从组件里抽出来

最简单也最有用的模式。当你发现两个组件里有重复的 useState + useEffect 组合，就该抽成 Custom Hook 了。

// 抽出来之前
function ComponentA() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(r => r.json()).then(setData);
  }, []);
}

// 抽出来之后
function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [url]);
  return data;
}

好的 Hook 应该是"见名知意"的——看名字就知道它在做什么，不需要读实现。

Compound Components

适合做有内部状态共享的 UI 组件，比如 Tabs、Accordion、Select。核心思路是用 Context 在父子之间共享状态，而不是靠 props 层层传递。

我踩过的坑

• useEffect 依赖数组漏写导致无限循环
• Context 滥用导致不必要的全局 re-render
• 忘记在 useEffect cleanup 里取消订阅
• 把太多逻辑塞进一个 Hook，反而更难维护

每个坑都是真实踩过的。记录下来，以后遇到类似情况能快点想起来。