携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章react笔记（七）—— 组件生命周期中，我们学习了props默认值、组件生命周期、setState更新数据等相关知识点。在本篇文章中，我们将学习到hooks基本介绍、hooks渐进策略等相关知识点。
hooks基本介绍
hooks是钩子、钓钩、钩住的意思。Hooks 是 React v16.8 中的新增功能，为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能。可以理解为通过 Hooks 为函数组件钩入 class 组件的特性。注意：Hooks 只能在函数组件中使用。
React v16.8 版本前后，组件开发模式的对比：
- React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
- React v16.8 及其以后：
- class 组件(提供状态) + 函数组件(展示内容)
- Hooks(提供状态) + 函数组件(展示内容)
- 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件
虽然有了 Hooks，但 React 官方并没有计划从 React 库中移除 class。有了 Hooks 以后，不能再把函数组件称为无状态组件了，因为 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中移除class。Hook 和现有代码可以同时工作，你可以渐进式地使用他们。但是不推荐直接使用 Hooks 大规模重构现有组件。推荐新功能用 Hooks，复杂功能实现不了的，也可以继续用 class。之前的react语法并不是以后就不用了。class 组件相关的 API 在hooks中可以不用： state与setState， 钩子函数componentDidMount、componentDidUpdate、componentWillUnmount， this相关的用法。原来学习的内容还是要用的，例如JSX：{}、onClick={handleClick}、条件渲染、列表渲染、样式处理等，函数组件、组件通讯，React 开发理念单向数据流、状态提升 等
