告别生命周期！用Hooks实现更优雅的React开发

Hooks 是 React 16.8 引入的一项革命性特性，它让函数组件拥有了类组件的能力，极大地简化了 React 开发。本文将结合代码示例，带你全面掌握 React 中最常用的 Hooks。

一、Hooks 基础概念

Hooks 是 React 提供的一系列函数，它们允许你在函数组件中"钩入" React 的特性。与类组件相比，Hooks 让代码更加简洁、逻辑更加清晰。

为什么需要 Hooks？

解决类组件中生命周期函数带来的逻辑分散问题
简化状态管理和副作用处理
更方便地复用状态逻辑

二、核心 Hooks 详解

1. useState - 状态管理

useState 是最基础的 Hook，用于在函数组件中添加状态。

jsx 复制代码

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

关键点：

useState 返回一个数组，第一个元素是状态值，第二个是更新函数
更新函数会触发组件重新渲染
状态更新是异步的，不会立即生效

2. useEffect - 副作用处理

useEffect 用于处理副作用操作，如数据获取、订阅、手动修改 DOM 等。

jsx 复制代码

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 组件挂载时执行
    fetchData().then(result => setData(result));
    
    // 返回的清理函数会在组件卸载时执行
    return () => {
      // 清理工作，如取消订阅、清除定时器等
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行
}

常见用法：

空依赖数组：只在组件挂载和卸载时执行
有依赖项：依赖项变化时重新执行
无依赖数组：每次渲染后都执行

3. useLayoutEffect - 同步副作用

useLayoutEffect 与 useEffect 类似，但会在 DOM 更新后同步执行，适合需要立即操作 DOM 的场景。

jsx 复制代码

function App() {
  const [width, setWidth] = useState(0);
  
  useLayoutEffect(() => {
    // 在浏览器绘制前同步更新
    setWidth(containerRef.current.offsetWidth);
  }, []);
}

注意：过度使用可能导致性能问题，优先考虑 useEffect。

4. useReducer - 复杂状态管理

当状态逻辑复杂时，useReducer 比 useState 更合适。

jsx 复制代码

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() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

结合 Immer 可以简化不可变数据操作：

jsx 复制代码

return produce(state, draft => {
  draft.a.b.c += action.num;
});

5. useRef - DOM 引用与持久化变量

useRef 主要有两个用途：

访问 DOM 元素
保存可变值而不触发重新渲染

jsx 复制代码

function TextInput() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    // 自动聚焦输入框
    inputRef.current.focus();
  }, []);
  
  return <input ref={inputRef} type="text" />;
}

6. useContext - 跨组件数据传递

useContext 让你无需组件层层传递 props 就能在组件树间进行数据传递。

jsx 复制代码

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

三、实战案例：数据表格应用

下面是一个结合多个 Hooks 实现的完整数据表格应用：

jsx 复制代码

function DataTable() {
  const [data, setData] = useState([]);
  
  // 获取数据
  useEffect(() => {
    fetchData();
  }, []);
  
  const fetchData = () => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  };
  
  // 删除数据
  const handleDelete = (id) => {
    fetch(`/api/data/${id}`, { method: 'DELETE' })
      .then(() => fetchData());
  };
  
  // 搜索数据
  const handleSearch = (keyword) => {
    fetch(`/api/data?q=${keyword}`)
      .then(res => res.json())
      .then(setData);
  };
  
  return (
    <div>
      <Search onSearch={handleSearch} />
      <Table dataSource={data} onDelete={handleDelete} />
    </div>
  );
}

四、总结

React Hooks 彻底改变了我们编写 React 组件的方式，它带来了：

更简洁的代码结构
更直观的状态管理
更灵活的生命周期控制

通过本文的示例和解释，相信你已经对 React Hooks 有了全面的了解。现在，是时候在你的项目中实践这些知识了！