常用 Hook

随着 React 中函数式组件的发展，React 也提供了众多的 Hook。在之前的介绍中，许多 Hooks 都混杂在各个章节中不易寻找，这里将一些常用的 Hook 列举一下，简要的说明其功能。

  • useState(initial)，允许向组件中增加一个可以触发渲染的状态变量（State）。
  • useEffect(fn, deps)，允许组件在deps内容发生变更的时候在fn中与外部系统进行同步操作。
  • useContext()，接收一个使用React.createContext()创建的上下文返回值作为参数并返回这个上下文。
  • useReducer(reducer, initial, init)，useState 的替代方案，返回[state, dispatch]，工作方案与 Redux 相似。其中 reducer 的形制为 (state, action) => newState 的函数，action 是一个带有载荷的对象，而不是一个方法。如果打算采用惰性初始化 Reducer ，可以使用第三个参数 init，init 参数接受一个返回初始值的函数。
  • useCallback(fn, deps)，仅在某个依赖项改变时才更新回调函数。这里提供的依赖项不会被传入回调函数中。相当于useMemo(() => fn, deps)，即指定回调函数的 memorized 优化版本。
  • useRef(initial)，返回一个可变 ref 对象，同样不能用于函数组件。但是 ref 对象不仅可以用于 DOM 对象，还可以借助其 .current 可变属性容纳任何值，从而在 useEffect() 或其他函数中提供对于域外内容的访问。当 ref 对象内容发生变化的时候，useRef 并不会发出任何通知，而且变更 .current 属性值不会引发组件的重新渲染。
  • useImperativeHandle(ref, createHandle, deps)，允许在使用 ref 时自定义暴露给父组件的值。
  • useLayoutEffect(fn, deps)，功能与 useEffect() 相同，但是会在所有的 DOM 变更之后同步调用 effect。所以常用来读取 DOM 布局并同步触发重新渲染。
  • useInsertionEffect(fn, deps)，可以用来在布局 Effect 触发之前，将元素插入到 DOM 中。
  • useDebugValue(value)，在 React 开发者工具中显示自定义 Hook 标签。
  • useDeferredValue(value)，这是一个在 React 18 中新引入的 Hook，其主要功能是接受并返回一个值，但是这个值的更新将被推迟到组件的紧急更新之后，例如响应用户输入。在组件发生紧急更新之前尝试获取值将得到之前被缓存的值。与useMemo搭配使用可以达到类似防抖（Debounce）和节流（Throttle）的效果。
  • useTransaction()，这是一个在 React 18 中新引入的 Hook，主要用于返回一个状态的待更新中间态，这可以将状态的更新标记为不紧急。其调用返回一个数组，数组的第一个元素用于表示当前的更新状态（isPending），第二个元素是一个函数，用于标记和启动状态更新过程（startTransaction()）。非紧急状态的更新将会被紧急状态的更新打断，这可以在组件处理一些比较耗时或者可能会导致组件不响应用户操作的事物时，保持用户与组件的交互。
  • useId()，这是一个在 React 18 中新引入的 Hook，主要功能是用来在组件中生成一个随机且唯一的 ID。并且这个 ID 可以在浏览器端渲染和服务器端渲染两种条件下保持一致。
  • 🧪useOptimistic(value, fn)，可以用来帮助乐观的更新 UI，允许在进行异步操作期间展示value的值，并在fn执行结束后展示fn返回的新的value。
  • useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)，在 React 18 中引入的新 Hook，主要功能是用来订阅一个外部 Store，或者是订阅浏览器暴露出来的 API。

Tip

带有🧪标记的Hook是需要使用Canary或者Experimental发布渠道的，因为这个功能尚在实验中，没有最终确定。正式版（Latest）里这个功能是不可用的。

接下来将拣选其中几个比较常用和可以解决项目中实际问题的 Hook 做进一步的详细说明。