React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 1. React Hooks 的优势

### 1.1 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。这使得函数组件能够拥有类组件的功能，同时保持简洁性。

```jsx
// 类组件
class Counter extends React.Component {
  state = { count: 0 };
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// 函数组件 + Hooks
function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

1.2 更好的代码复用

Hooks 解决了高阶组件和渲染属性带来的"嵌套地狱"问题，通过自定义 Hook 可以轻松复用状态逻辑。

// 自定义 Hook
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

// 在多个组件中使用
function MyComponent() {
  const width = useWindowWidth();
  return <div>Window width: {width}</div>;
}

1.3 更直观的副作用管理

useEffect 将相关代码组织在一起，比类组件中的生命周期方法更直观。

// 类组件中的副作用
class Example extends React.Component {
  componentDidMount() {
    // 初始化逻辑
  }

  componentDidUpdate() {
    // 更新逻辑
  }

  componentWillUnmount() {
    // 清理逻辑
  }
}

// 函数组件中的副作用
function Example() {
  useEffect(() => {
    // 初始化逻辑
    return () => {
      // 清理逻辑
    };
  }, [dependencies]); // 更新逻辑
}

2. 常用 Hooks 的使用场景

2.1 useState

管理组件内部状态，适用于需要响应式更新的数据。

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  );
}

2.2 useEffect

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

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

  useEffect(() => {
    let isMounted = true;
    
    fetch(`/api/data/${id}`)
      .then(res => res.json())
      .then(data => {
        if (isMounted) setData(data);
      });

    return () => {
      isMounted = false; // 清理未完成的请求
    };
  }, [id]); // id 变化时重新获取
}

2.3 useContext

跨组件共享数据，避免 prop drilling。

const ThemeContext = React.createContext('light');

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

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }} />;
}

2.4 useReducer

管理复杂状态逻辑，适合状态更新逻辑较复杂的场景。

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