用途:React 16.8 引入的 Hooks 用于在函数组件中使用状态与生命周期能力,并在多个组件间抽取、复用带状态的逻辑,可替代类组件以及部分传统设计模式(如高阶组件、Render Props)。资料称其在应用设计中很重要。
主要能力:useState 为函数组件添加本地状态;useEffect 将 componentDidMount、componentDidUpdate、componentWillUnmount 合并,用于副作用;可直接返回 { ... } 在组件体内计算派生状态,避免不必要的 useEffect。React 还提供 useReducer、useRef、useContext、useMemo、useImperativeHandle、useLayoutEffect、useDebugValue、useCallback。自定义 Hook 需以 use 前缀命名,例如 useKeyPress(targetKey),内部用 useState 与 useEffect 监听 window 的 keydown/keyup 并做清理;这样可跨多个组件复用,无需重写逻辑。资料也提到社区可构建并分享 Hook,并列出了 React Use、useHooks、Collection of React Hooks 等站点。
使用方式:在函数组件顶层调用 Hook;只允许在 React 函数中调用(Rules of Hooks)。常见映射:componentDidMount 对应 useEffect(() => { ... }, []);componentWillUnmount 对应在 useEffect 中返回清理函数;componentDidUpdate 对应不带依赖数组的 useEffect。依赖数组中放入需要“监听”的值,例如 useEffect(() => { console.log(The user typed ${input}); }, [input])。
适用场景:需要给函数组件添加状态或生命周期行为时;需要跨组件复用表单处理、订阅、副作用等共享逻辑时;希望代码更简洁、可组合、便于测试与阅读时。
限制与注意事项:必须遵守 Hooks 规则(只在顶层、只在 React 函数中调用),因此自定义 Hook 需以 use 开头以便校验。资料建议避免因派生状态而滥用 useEffect;尽可能让 React Compiler 处理 memo,而不是手动到处使用 useMemo/useCallback。原资料未提供安装命令、版本要求、平台支持、收费价格或性能数据,这些暂未提供。