React Hooks 的优势和使用场景

# React Hooks 核心优势与典型应用场景

## 一、Hooks 的核心优势

### 1. 逻辑复用能力提升
```javascript
// 自定义Hook示例：鼠标位置追踪
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const updatePosition = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener('mousemove', updatePosition);
    return () => window.removeEventListener('mousemove', updatePosition);
  }, []);

  return position;
}

// 在多个组件中使用
function ComponentA() {
  const pos = useMousePosition();
  return <div>X: {pos.x}</div>;
}

• 打破传统HOC/render props的嵌套地狱
• 自定义Hook比mixins更安全（遵循React规则）

2. 代码组织更清晰

function UserProfile({ userId }) {
  // 状态相关
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  
  // 副作用相关
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const res = await fetch(`/users/${userId}`);
      setUser(await res.json());
      setLoading(false);
    };
    fetchData();
  }, [userId]);

  // 渲染逻辑
  if (loading) return <Spinner />;
  return <ProfileCard user={user} />;
}

• 按功能而非生命周期组织代码
• 相关逻辑集中管理（如数据请求的loading/error状态）

3. 性能优化更精准

const MemoComponent = React.memo(function({ data }) {
  // 只有当data变化时才会重渲染
  return <ExpensiveRender data={data} />;
});

function Parent() {
  const [count, setCount] = useState(0);
  const data = useMemo(() => computeExpensiveValue(count), [count]);
  
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>+</button>
      <MemoComponent data={data} />
    </>
  );
}

• useMemo/useCallback避免不必要的计算
• React.memo实现组件级缓存

二、典型使用场景

1. 状态管理场景

// 复杂状态管理
function Form() {
  const [form, setForm] = useState({
    username: '',
    password: '',
    remember: false
  });

  // 自动合并状态更新
  const updateField = useCallback((name, value) => {
    setForm(prev => ({ ...prev, [name]: value }));
  }, []);

  return <input 
    value={form.username}
    onChange={(e) => updateField('username', e.target.value)}
  />;
}

• 适合：表单状态、UI控制状态
• 替代：原先需要Redux管理的简单全局状态

2. 副作用管理场景

function DataFetcher({ url }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let didCancel = false;
    
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        if (!didCancel) {
          setData(await res.json());
        }
      } catch (err) {
        if (!didCancel) {
          setError(err);
        }
      }
    };

    fetchData();
    return () => { didCancel = true }; // 清理函数
  }, [url]);

  return error ? <ErrorDisplay error={error} /> : <DataDisplay data={data} />;
}

• 适合：数据请求、事件监听、DOM操作
• 替代：componentDidMount/Update等生命周期

3. 上下文共享场景

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('dark');
  
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
        Toggle
      </button>
    </ThemeContext.Provider>
  );
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

• 适合：主题、