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，以更好地适应你的应用需求。