【学习资料】React 基础 Hooks：强大的函数组件利器

引言

React Hooks 是一种让函数组件也能拥有状态和生命周期等功能的方式。对于 React 初学者来说，Hooks 简化了很多操作，让我们能够更专注于写逻辑、调状态、做效果！今天，我们一起来轻松玩转几个常用的 Hooks，看它们如何一步步“钩”出 React 应用的新世界！

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

export default Counter;

解释：useState 会返回一个状态变量（count）和一个更新这个变量的函数（setCount）。每次点击按钮时，计数器的值都会加一，是不是超简单？

useEffect：处理副作用的小帮手

用途：useEffect 让你在函数组件中处理副作用，比如获取数据、添加订阅等。它就像是个在特定“时机”出动的助手。

案例：在组件加载时获取数据。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('数据获取失败', error));
  }, []);

  return (
    <div>
      <h3>数据列表：</h3>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

解释：useEffect 的第二个参数是一个依赖数组，这里传了一个空数组 []，表示只在组件初次渲染时执行一次请求。

useContext：让数据传递更轻松

用途：useContext 可以让我们轻松地在组件树中共享数据，而不用一层一层地通过 props 传递，像是直接发给子组件一张“通行证”。

案例：创建一个主题切换器。

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

const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <p>当前主题：{theme}</p>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
}

解释：useContext 直接让我们获取 ThemeContext 的值，从而轻松实现主题切换。这样就避免了繁琐的 props 传递。

useReducer：复杂状态管理利器

用途：useReducer 是 useState 的“进阶版”，适合管理复杂的状态逻辑，比如多步骤操作或状态之间的关联。

案例：构建一个简单的待办事项应用。

import React, { useReducer } from 'react';

function todoReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, { id: Date.now(), text: action.text }];
    case 'remove':
      return state.filter(todo => todo.id !== action.id);
    default:
      return state;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  const [text, setText] = useState('');

  const handleAdd = () => {
    dispatch({ type: 'add', text });
    setText('');
  };

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button onClick={handleAdd}>添加待办</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => dispatch({ type: 'remove', id: todo.id })}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

解释：useReducer 通过 dispatch 触发特定动作（如添加或删除），使状态管理清晰明了。复杂的状态管理在 useReducer 中变得更灵活。

总结

React 的基本 Hooks 是我们构建功能强大组件的“秘密武器”。通过 useState、useEffect、useContext 和 useReducer 等 Hooks，我们可以更方便地管理状态和逻辑。希望大家能多练习，用这些 Hooks 尽情探索 React 世界！