hook介绍 #

React组件分类 #

函数组件 #

• 不具备“状态、ref、周期函数”等内容，第一次渲染完毕后，无法基于组件内部的操作来控制其更新，因此称之为静态组件！
• 但是具备属性及插槽，父组件可以控制其重新渲染！
• 渲染流程简单，渲染速度较快！
• 基于FP（函数式编程）思想设计，提供更细粒度的逻辑组织和复用！

类组件 #

• 具备“状态、ref、周期函数、属性、插槽”等内容，可以灵活的控制组件更新，基于钩子函数也可灵活掌控不同阶段处理不同的事情！
• 渲染流程繁琐，渲染速度相对较慢！
• 基于OOP（面向对象编程）思想设计，更方便实现继承等！

React Hooks 组件，就是基于 React 中新提供的 Hook 函数，可以让 函数组件动态化 !

Hook函数概览 #

Hook 是 React 16.8 的新增特性！并且只能运用到函数组件中！ https://zh-hans.reactjs.org/docs/hooks-reference.html

基础 Hook #

• useState 使用状态管理
• useEffect 使用周期函数
• useContext 使用上下文信息

额外的 Hook #

• useReducer useState的替代方案，借鉴redux处理思想，管理更复杂的状态和逻辑
• useCallback 构建缓存优化方案
• useMemo 构建缓存优化方案
• useRef 使用ref获取DOM
• useImperativeHandle 配合forwardRef（ref转发）一起使用
• useLayoutEffect 与useEffect相同，但会在所有的DOM变更之后同步调用effect
• …

自定义Hook #