Hooks 是什么
-
Hooks：钩子、钓钩、钩住 -
Hooks是 React v16.8 中的新增功能 -
作用：为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能
- 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性
-
注意：Hooks 只能在函数组件中使用
为什么要有 Hooks
两个角度：1 组件的状态逻辑复用 2 class 组件自身的问题
-
组件的状态逻辑复用：
- 在 Hooks 之前，组件的状态逻辑复用经历了：mixins（混入）、HOCs（高阶组件）、render-props 等模式。
- （早已废弃）mixins 的问题：1 数据来源不清晰 2 命名冲突。
- HOCs、render-props 的问题：重构组件结构，导致组件形成 JSX 嵌套地狱问题。
-
class 组件自身的问题：
-
选择：函数组件和 class 组件之间的区别以及使用哪种组件更合适
-
需要理解 class 中的 this 是如何工作的
-
相互关联且需要对照修改的代码被拆分到不同生命周期函数中
- componentDidMount -> window.addEventListener('resize', this.fn)
- componentWillUnmount -> window.addEventListener('resize', this.fn)
-
- 相比于函数组件来说，不利于代码压缩和优化，也不利于 TS 的类型推导
正是由于 React 原来存在的这些问题，才有了 Hooks 来解决这些问题
hooks的优势
由于原来 React 中存在的问题，促使 React 需要一个更好的自带机制来实现组件状态逻辑复用。
- Hooks 只能在函数组件中使用，避免了 class 组件的问题
- 复用组件状态逻辑，而无需更改组件层次结构
- 根据功能而不是基于生命周期方法强制进行代码分割
- 抛开 React 赋予的概念来说，Hooks 就是一些普通的函数
- 具有更好的 TS 类型推导
- tree- - shaking 友 好，打包时去掉未引用的代码
- 更好的压 缩
项目开发中，Hooks 的采用策略：
- 不推荐直接使用 Hooks 大规模重构现有组件
- 推荐：新功能用 Hooks，复杂功能实现不了的，也可以继续用 class
- 找一个功能简单、非核心功能的组件开始使用 hooks
useState Hook
概述
问题：Hook 是什么? 一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性 使用模式：函数组件 + Hooks 特点：从名称上看，Hook 都以 use 开头
useState Hook 的基本使用
-
使用场景：当你想要在函数组件中，使用组件状态时，就要使用 useState Hook 了
-
作用：为函数组件提供状态（state）
-
使用步骤：
- 导入
useState函数 - 调用
useState函数，并传入状态的初始值 - 从
useState函数的返回值中，拿到状态和修改状态的函数 - 在 JSX 中展示状态
- 在按钮的点击事件中调用修改状态的函数，来更新状态
- 导入
