React 常用 Hooks

React 常用 Hooks 简介

React Hooks 是 React 16.8 中引入的一项功能，它允许你在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 的出现极大地简化了函数组件的状态管理和副作用的处理。本文将介绍几个最常用的 Hooks，并提供简洁明了的示例代码。

useState

useState 是一个让函数组件能够使用 state 的 Hook。它接受初始状态并返回两个值：当前状态和更新状态的函数。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在上面的例子中，useState 初始化计数器的值为 0。setCount 是一个函数，用来更新计数器的值。

useEffect

useEffect 让你在函数组件中执行副作用操作（如数据获取、订阅或手动更改 DOM）。它可以看作是 componentDidMount，componentDidUpdate 和 componentWillUnmount 这些生命周期方法的组合。

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

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

  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，useEffect 会在每次渲染后更新文档的标题。

useContext

useContext 让你可以访问 React 的 Context 对象，这个对象可以让你在组件树中传递数据而不必使用 props。

import React, { useContext } from 'react';

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

在上面的代码中，useContext 使得函数组件 ThemedButton 能够读取到最近的 ThemeContext 提供的主题。

useReducer

useReducer 是另一种可以在 React 函数组件中管理复杂 state 的方法。它通常用于组件中有多个子值的 state，或者当下一个 state 依赖于之前的 state 时。

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

在上面的例子中，useReducer 接受一个 reducer 函数和初始状态，返回当前状态和 dispatch 函数，用于触发状态的更新。

useCallback

useCallback 返回一个记忆化的回调函数。这个回调函数仅在它的依赖项改变时才会更新，这有助于避免在渲染时不必要的重新渲染。

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

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

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []); // 依赖项为空数组，这个函数永远不会变

  return <button onClick={increment}>+</button>;
}

在这个例子中，increment 函数只会在组件首次渲染时创建一次。

useMemo

useMemo 用于返回一个记忆化的值。它只会在依赖项改变时重新计算这个值，有助于避免在每次渲染时都进行高开销的计算。

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

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

  const doubleCount = useMemo(() => {
    return count * 2;
  }, [count]); // 只有当 count 变化时才重新计算

  return <div>{doubleCount}</div>;
}

在上面的代码中，doubleCount 只会在 count 改变时重新计算。

React Hooks 提供了一种强大而灵活的方式来共享逻辑和状态管理，而无需重构组件为类。上述 Hooks 是最常用的，但 React 还提供了其他 Hooks（如 useRef, useLayoutEffect, useImperativeHandle 等），以及允许你创建自定义 Hooks，以更好地适应你的应用需求。