Skip to main content

Hooks API

JS 知识拓展请点击 JavaScript

React Hooks API#

hooks API 是从 React@16.8 开始引入的全新开发模式。

hooks 的出现降低了代码量，提供了更细粒度的逻辑拆分和重用能力，使逻辑复用更灵活。但同时，对开发者提出了更高的要求。

Hooks API 走马观花#

useState#

维护组件不可变状态

Live Editor
Result

useEffect#

管理组件副作用，可以实现组件挂载、更新、卸载生命周期时的回调。

Live Editor
Result

useContext#

获取当前组件所处 Context 中的值

Live Editor
Result

useLayoutEffect#

与 useEffect 作用类似，但执行实际比 useEffect 早，会在浏览器刷新页面前执行，与最近一次 React 重绘同步执行。 SSR 时会报错。

useRef#

维护组件的可变状态、获取组件 reference

Live Editor
Result
Live Editor
Result

useMemo | useCallback#

一般不需要使用，做性能优化时会用到，配合 React.memo 函数，来减少重绘计算。

如果某个计算比较耗时，我们也可以通过 useMemo 来减少计算量。

Live Editor
Result

其他不太重要的 API#

  • useImperativeHandle：配合 React.forwardRef，对父组件暴露内部状态，一般用不到

  • useReducer：基本用不到，略过

  • useDebugValue：配合 React DevTools 使用，打印内部状态用，一般用不到

Edit this page