React Hooks：常用 API 的妙用

概述

React Hooks 是 React 16.8 的新特性，它允许你在函数组件中使用 state 和其他 React 特性。这使得函数组件更加强大，并减少了编写 class 组件的需要。

常用 Hooks

useState

useState Hook 用于管理组件的状态。它接受一个初始值作为参数，并返回一个数组，第一个元素是当前状态值，第二个元素是一个函数，用于更新状态值。

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

useEffect

useEffect Hook 用于在组件挂载、更新或卸载时执行某些副作用。它接受两个参数，第一个参数是一个函数，第二个参数是一个依赖数组。当依赖数组中的值发生变化时，函数就会被执行。

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useRef

useRef Hook 用于创建一个引用，它指向一个可变值。这对于在组件之间传递引用或在组件卸载时清理资源非常有用。

const ref = useRef(null);

useMemo

useMemo Hook 用于创建一个 memoized 值。这对于在组件渲染时避免重复计算昂贵的表达式非常有用。

const memoizedValue = useMemo(() => {
  return calculateExpensiveValue();
}, [dependencyArray]);

useCallback

useCallback Hook 用于创建一个 memoized 回调函数。这对于在组件渲染时避免重复创建回调函数非常有用。

const memoizedCallback = useCallback(() => {
  doSomething();
}, [dependencyArray]);

结语

React Hooks 是一个强大的工具，它可以让你在函数组件中使用 state 和其他 React 特性。这使得函数组件更加强大，并减少了编写 class 组件的需要。

本文介绍了最常用的几个 Hooks，包括 useState、useEffect、useRef、useMemo 和 useCallback。这些 Hooks 可以帮助你编写更简洁、更易维护的 React 代码。