React Hooks简介

React Hooks是React 16.8版本中引入的新特性，它允许你在不编写class的情况下使用state以及其他React特性。Hooks提供了一种更直接的API来使用React的功能，如状态管理、生命周期方法、上下文等。

为什么需要Hooks

在Hooks出现之前，React组件主要有两种形式：函数组件和类组件。函数组件更简洁，但缺乏管理状态和使用生命周期方法的能力。类组件功能更强大，但也更复杂，且存在一些问题：

• 组件之间难以复用状态逻辑
• 复杂组件变得难以理解
• 类本身带来的困惑（如this的绑定问题）

Hooks解决了这些问题，让函数组件也能拥有状态和生命周期功能。

常用的Hooks

useState

useState是最基本的Hook，它让函数组件能够拥有自己的状态：

import React, { useState } from 'react';

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

useEffect

useEffect让你在函数组件中执行副作用操作，如数据获取、订阅或手动更改DOM：

import React, { useState, useEffect } from 'react';

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

  // 类似于componentDidMount和componentDidUpdate
  useEffect(() => {
    document.title = `你点击了 ${count} 次`;
  });

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击我
      </button>
    </div>
  );
}

useContext

useContext让你可以订阅React的Context而不引入嵌套：

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}

useReducer

useReducer是useState的替代方案，适用于复杂的状态逻辑：

import React, { useReducer } from 'react';

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: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

自定义Hooks

自定义Hooks是Hooks的一个强大特性，它允许你将组件逻辑提取到可重用的函数中：

import { useState, useEffect } from 'react';

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>;
}

Hooks使用规则

使用Hooks需要遵循两条规则：

1. 只在最顶层使用Hooks，不要在循环、条件或嵌套函数中调用Hook
2. 只在React函数组件中调用Hooks，不要在普通JavaScript函数中调用

总结

React Hooks为函数组件提供了强大的功能，使其能够管理状态和生命周期。通过使用Hooks，你可以编写更简洁、更易于理解和测试的React组件，同时也更容易复用组件逻辑。