Preact 使用 Hooks 管理状态

在本章中，我们将深入探讨如何使用 Hooks 来管理 Preact 应用的状态。Hooks 是 React 中的一项重要特性，它允许我们在不编写类组件的情况下使用状态和其他 React 特性。Preact 完美地兼容这些 Hooks，使开发者能够更简洁、更高效地编写组件。

什么是 Hooks？

Hooks 是一种特殊函数，它们允许你在函数组件中“钩入”React 的功能，比如状态管理、生命周期方法等。使用 Hooks，我们可以避免使用类组件，从而简化代码结构，提高代码的可读性和可维护性。

useState Hook

useState 是最常用的 Hooks 之一，用于在函数组件中添加状态。它可以让你在函数组件中保存和更新数据，而无需将组件转换为类组件。

基本用法

// www.javascriptcn.com code example
import { h, Component } from 'preact';

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

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <button onClick={() => setCount(count - 1)}>减少</button>
    </div>
  );
}

在这个例子中，我们使用 useState 初始化了一个名为 count 的状态，并定义了两个按钮来更新这个状态。

多个状态

你可以在同一个组件中使用多个 useState Hook：

// www.javascriptcn.com code example
function UserInfo() {
  const [name, setName] = useState('Alice');
  const [age, setAge] = useState(25);

  return (
    <div>
      <p>姓名: {name}</p>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <p>年龄: {age}</p>
      <input type="number" value={age} onChange={e => setAge(Number(e.target.value))} />
    </div>
  );
}

这里，我们同时管理了两个状态：name 和 age。

useEffect Hook

useEffect Hook 允许你在函数组件中执行副作用操作，比如数据获取、订阅或手动更改 DOM。它类似于 React 中的生命周期方法，但提供了更简洁的 API。

基本用法

// www.javascriptcn.com code example
function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // 清理函数
    return () => clearInterval(interval);
  }, []);

  return <p>已过去 {seconds} 秒</p>;
}

在这个例子中，我们使用 useEffect 创建了一个定时器，并且在组件卸载时清除定时器，避免内存泄漏。

指定依赖项

你可以通过第二个参数指定 useEffect 的依赖项，这样可以控制何时重新运行副作用：

// www.javascriptcn.com code example
function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(setData);
  }, [url]); // 只有当 url 发生变化时，才重新执行此副作用

  return data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>加载中...</p>;
}

在这个例子中，useEffect 会在 url 发生变化时重新执行，确保数据始终是最新的。

useContext Hook

useContext Hook 允许你在函数组件中订阅 React 的上下文，从而避免使用 context.Consumer 或 contextType 属性。

基本用法

首先，我们需要创建一个上下文：

const ThemeContext = createContext('light');

然后，我们可以在组件树中提供和消费上下文：

// www.javascriptcn.com code example
function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>
      切换主题
    </button>
  );
}

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

在这个例子中，ThemedButton 组件通过 useContext 订阅了 ThemeContext 上下文，并根据上下文的值动态改变按钮的颜色。

useReducer Hook

对于复杂的状态逻辑，useReducer Hook 提供了一种替代 useState 的方式。它接收一个 reducer 函数和一个初始化状态，返回当前状态和一个 dispatch 方法。

基本用法

// www.javascriptcn.com code example
function Counter() {
  const initialState = { count: 0 };
  
  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();
    }
  }

  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>当前计数: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>增加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减少</button>
    </div>
  );
}

在这个例子中，我们使用 useReducer 来管理计数器的状态，使得状态更新更加明确和可控。

自定义 Hooks

自定义 Hooks 是一种重用状态逻辑的方式。一个自定义 Hook 是一个函数，其名称以 use 开头，并调用其他 Hook。

基本用法

假设我们有一个复杂的计数逻辑，我们可以将其封装成一个自定义 Hook：

// www.javascriptcn.com code example
function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);

  return { count, increment, decrement };
}

function Counter() {
  const { count, increment, decrement } = useCounter(0);

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
}

在这个例子中，useCounter 是一个自定义 Hook，它封装了计数逻辑，并返回计数器的状态和方法。

总结

通过这一章的学习，你应该对如何在 Preact 中使用 Hooks 来管理状态有了更深的理解。Hooks 提供了一种更直观、更简洁的方式来处理状态和其他 React 功能，从而使你的代码更加优雅和易于维护。接下来，我们将在后续章节中继续探索更多关于 Hooks 的高级用法和最佳实践。