React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 1. React Hooks 的核心优势

### 1.1 简化组件逻辑
Hooks 允许在不编写 class 的情况下使用 state 和其他 React 特性。通过将相关逻辑拆分为更小的函数，而不是强制按生命周期方法拆分，使代码更易于理解和维护。

```javascript
// 类组件
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  componentDidMount() {
    document.title = `Clicked ${this.state.count} times`;
  }
  
  componentDidUpdate() {
    document.title = `Clicked ${this.state.count} times`;
  }
  
  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Click me
      </button>
    );
  }
}

// 函数组件 + Hooks
function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Clicked ${count} times`;
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  );
}

1.2 更好的代码复用

自定义 Hook 可以提取组件逻辑到可重用的函数中，解决了 render props 和高阶组件带来的嵌套问题。

// 自定义 Hook
function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}

// 使用自定义 Hook
function MyComponent() {
  useDocumentTitle('My Page Title');
  return <div>Content</div>;
}

1.3 更直观的副作用管理

useEffect 将相关副作用代码组织在一起，而不是分散在不同的生命周期方法中。

function FriendStatus({ friendId }) {
  const [status, setStatus] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setStatus(status);
    }
    
    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendId, handleStatusChange);
    };
  }, [friendId]);

  return <div>Status: {status}</div>;
}

2. 主要 Hooks 的使用场景

2.1 useState

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

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2.2 useEffect

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

function DataFetcher({ userId }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    let ignore = false;
    
    async function fetchData() {
      const response = await fetch(`/api/user/${userId}`);
      const result = await response.json();
      if (!ignore) setData(result);
    }
    
    fetchData();
    
    return () => { ignore = true; };
  }, [userId]);
  
  return <div>{data ? data.name : 'Loading...'}</div>;
}

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' }}>Toolbar</div>;
}

2.4 useReducer

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

function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { text: action.text, completed: false }];
    case 'toggle':
      return state.map((todo, index) =>
        index === action.index ? {...todo, completed: !todo.completed} : todo
      );
    default:
      return state;
  }
}

function TodoList() {
  const [todos, dispatch] = useReducer(todosReducer, []);
  
  return (
    <div>
      {todos.map((todo, index) => (