理解React Hooks的工作原理，需要理解它们"钩住"的是什么?

Hooks的核心目标是将函数组件与React的状态和生命周期管理系统连接起来。

钩子钩了什么？

Hooks “钩”住了以下几方面：

状态管理 ( useState ) ：副作用管理 ( useEffect ) ：上下文 ( useContext ) ：Reducer模式 ( useReducer ) ：引用 ( useRef ) ：举例

看看具体看几个例子，来展示这些Hooks是如何“钩住”状态、生命周期和上下文的。

状态管理：useState

假设我们有一个计数器组件：

import React, { useState } from 'react';
function Counter() {
  // useState钩住了状态管理
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>你点击了 {count} 次p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      button>
    div>
  );
}
export default Counter;

解释：

副作用管理：useEffect

假设我们需要在组件挂载时从API获取数据，并在组件卸载时清理一些订阅：

import React, { useState, useEffect } from 'react';
function ApiDataFetcher() {
  const [data, setData] = useState(null);
  useEffect(() => {
    // useEffect钩住了副作用
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
    // Effect清理函数
    return () => {
      console.log('清理订阅');
    };
  }, []);
  return (
    <div>
      {data ? <p>数据: {data}p> : <p>加载中...p>}
    div>
  );
}
export default ApiDataFetcher;

解释：

上下文：useContext

假设我们有一个全局的主题上下文来控制组件的主题颜色：

import React, { createContext, useContext } from 'react';
// 创建一个 ThemeContext，默认值为 'light'

const ThemeContext = createContext('light');
function ThemedButton() {
  // useContext 钩住了上下文
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme === 'dark' ? '#333' : '#FFF' }}>
      主题按钮
    button>
  );
}
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    ThemeContext.Provider>
  );
}
export default App;

解释：

Reducer模式：useReducer

假设我们用 useReducer 实现一个复杂的状态管理：

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}
function Counter() {
  // useReducer 钩住了复杂的状态逻辑
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>计数: {state.count}p>
      <button onClick={() => dispatch({ type: 'increment' })}>+button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-button>
    div>
  );
}
export default Counter;

解释：

总结

在这些例子中，Hooks将组件"钩"入了React的核心功能：

通过这几个核心Hooks，React提供了强大而灵活的方式，使得函数组件在实现状态管理和副作用处理时，不再需要依赖类组件的生命周期方法，代码更简洁、更具可读性。