第1章 React Hooks 深入

Hooks 是 React 16.8 引入的新特性，让你在函数组件中使用状态和其他 React 特性。

1.1 useState 原理

useState 返回一个状态值和一个更新函数。React 在多次渲染间保持状态。

tsx


import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  );
}

1.2 useEffect 与副作用

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

tsx


import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  return <div>{JSON.stringify(data)}</div>;
}