hooks 让你不写一个类 class，就可以使用 state 和 其他 react特性
hooks函数，都是以 use开头
hooks必须使用 use前缀命名，useXxx,例如：useTitle
https://blog.csdn.net/qianyu6200430/article/details/109881828
https://blog.csdn.net/weixin_40906515/article/details/107075303
https://segmentfault.com/a/1190000038768433
https://zhuanlan.zhihu.com/p/413141904

hooks工具库
https://juejin.cn/post/7027461693127016456
https://juejin.cn/post/6932278035831848974
https://zhuanlan.zhihu.com/p/106796295
https://juejin.cn/post/6844904190469210125
https://juejin.cn/post/6844903856489365518

  • 异步操作
  • 状态管理
  • debounce
  • 路由
  • Context， ReduxToolkit，reactQuery

什么是Hooks函数组件

  1. hooks的目的：就是给函数式组件加上状态
    1. 函数式组件轻量化，简化了代码，用 hooks来“钩入”组件状态
    2. react架构的变革，hooks函数式组件无法全面代替 class类组件
    3. hooks函数组件中，没有 this, binding, 甚至会取代 redux
  2. hooks 消息处理的一种方法，用来监视指定的程序
    1. 函数组件中需要处理副作用，用 hooks把外部的代码 “钩”进来
    2. 钩子机制：在代码中设置一个窗口：来监视指定的程序
    3. 钩子机制：允许应用程序，截获某段消息或事件，就是处理程序的一个程序段
    4. 通过系统的调用，来挂载到系统中；react的 hooks就是利用了这个特性来实现的
  3. hooks 参考资料

https://segmentfault.com/a/1190000021261588
https://zhuanlan.zhihu.com/p/81528320
https://blog.csdn.net/weixin_33834628/article/details/91440152
https://segmentfault.com/ls/1650000018455301

Hooks的影响

  1. 生命周期函数如何映射到 Hooks？
  2. 类实例成员变量如何映射到 Hooks？
  3. Hooks中如何获取历史 props 和 state？
  4. 如何强制更新一个 Hooks 组件？

Hooks的优势

优化 class 类组件的三大问题
a. 函数组件无 this 问题
b. 自定 hooks 方便复用状态逻辑
c. 副作用的关注点分离

  • 解决了组件之间复用状态逻辑很难
  • 难以理解的 class,包括难以捉摸的this
  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  • 只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用

Hooks组件开发

  1. 研发新业务架构提供底层的复用性，维护性；完成项目的重构
  2. Hooks组件开发流程
    1. 将 UI划分出组件的层级
    2. 创建应用的静态版本
  3. class 思维到 hooks 编程思维的转变
    1. 精通 Hooks 作为新的组件开发方式
    2. hooks 只有 class类组件和函数组件
  4. 使用 React Hooks 作为未来新的组件开发方式

hooks缺点

  • Hooks 会产生很多闭包问题
  • 如果碰到想不明白的问题，那 99% 是由于闭包导致的，例如
    • 不能再 if条件判断，for，while循环中，使用 hooks
    • hooks必须在顶层函数中调用

Hooks的使用原则

  1. 调用 hooks 必须是 react组件，不能是函数
    1. 只有react 函数才能调用 hooks
  2. 只有在顶层使用 hooks；必须在顶层调用
    1. 不能再 if条件判断，for，while循环中，使用
    2. 不能在 循环和条件块里

hooks只能在 Hooks函数组件内部调用
不能再 class类组件内部使用

Hooks 代码检测

  1. npm i eslint-plugin-react-hooks -D

package.json配置 hooks代码检测

  1. {
  2.   "eslintConfig": {
  3.     "extends": "react-app",
  4.     "plugins": [
  5.       "react-hooks"
  6.     ],
  7.     "rules": {
  8.       "react-hooks/rules-of-hooks": "error"
  9.     }
  10.   },
  11. }

常见的 Hooks

  1. useState 声明 state状态，代替 setState
    1. 返回值：两个元素的数组：[状态,更新状态的函数]
  2. useEffect
    1. 给函数添加副作用，解决生命周期函数，解决副作用
    2. 可以取代生命周期函数
      1. componentDidMount
      2. componentDidUpdate
      3. componentWillUnmount
  3. useLayoutEffect
    1. DOM加载完成后调用
  4. useContext
    1. 跨组件的数据传递；解决多层组件数据传递
    2. context
    3. 不要滥用 useContext，会破坏组件的独立性
  5. useReducer
    1. 管理全局的 state状态
  6. useRef 组件的引用
    1. DOM引用
    2. 返回一个引用对象，在整个生命周期里面，都保持不变
    3. useRef 默认值不能传入函数
  7. useDebugValue
    1. 在开发者工具中显示，自定义的 hooks标签
  8. hooks函数 API https://zh-hans.reactjs.org/docs/hooks-reference.html
  9. 自定义 hooks，必须以 useXxx开头

自定义 hooks

  • useHttpHook 发送 http 请求
  • useObserverHook 监听 dom 元素是否展示
  • useImgHook 图片懒加载
  • ErrorBoundary 捕获错误组件
  • CreatePortal 根节点之外创建新节点
  • ShowLoading 列表底部 loading 组件

memo缓存

  1. useMemo
  2. useCallback
    1. 函数向子组件传递，用 useCallback包裹起来
    2. 处理回调函数的副作用，只创建一个句柄
  3. memo：组件的渲染是否重复执行

懒加载

lazy & Subpense 延迟按需加载

  1. import React, {
  2.     useState, useEffect, useContext
  3. } from 'react'
  5. function App(props) {
  6.     const [count, setCount] = useState(0)
  8.   useEffect(() => {
  9.     document.title = 'first init'
  10.   }, [])
  12.   useEffect(() => {
  13.     document.title = 'updated'
  14.   }, [count])
  15. }

hooks产生的原因

  1. 为了解决 class的缺点
  2. 给纯函数组件添加生命周期和副作用

class组件的缺点

  1. 状态逻辑难以复用
    1. 缺少复用机制
    2. 渲染属性和高阶组件导致层级冗余
  2. 类组件趋向复杂和难以维护
    a. 生命周期函数混杂不相关的逻辑
    b. 相关的逻辑分散在不同的生命周期函数里面
    c. 难以捉摸的生命周期
  3. 混乱的副作用 this 指向困惑
    a. 类成员函数不能保证 this 指向
    b. 内联函数过度创建新句柄

class组件难以复用的缺点

  1. class类组件与 redux连接后，难以复用，解决方案：
  2. 无状态组件，纯函数式组件，本身没有状态，只依赖 props数据的注入
    1. 没有副作用，没有生命周期
    2. 无法进行异步的数据更新
  3. HOC高阶组件
    1. 不管之前的组件复杂度，直接在组件外面再嵌套一个组件
    2. 通过组件嵌套来达到组件的复用，加深了组件的复杂性
    3. 会出现回调地域一样的 DOM结构