React Hooks——Hooks组件简介

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
• ……