- 一直都提倡使用函数组件，但是有时候需要使用 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有。
- 是 新增的特性，它可以让你在不编写 的情况下使用 以及其他的 特性。
- 如果你在编写函数组件并意识到需要向其添加一些 ，以前的做法是必须将其它转化为 。现在你可以直接在现有的函数组件中使用 。
- 开头的 都是 。
- 状态逻辑难复用
- 在组件之间复用状态逻辑很难，可能要用到 （渲染属性）或者 （高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余 。
- 趋向复杂难以维护
- 在生命周期函数中混杂不相干的逻辑（如：在 中注册事件以及其他的逻辑，在 中卸载事件，这样分散不集中的写法，很容易写出 ）。
- 类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件。
- this 指向问题
- 父组件给子组件传递函数时，必须绑定
- 能优化类组件的三大问题
- 能在无需修改组件结构的情况下复用状态逻辑（自定义 Hooks ）
- 能将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
- 副作用的关注点分离
- 副作用指那些没有发生在数据向视图转换过程中的逻辑，如 请求、访问原生 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。
useState
- 假设当我们多次调用 的时候，要保证每次渲染时它们的调用顺序是不变的。
- 通过在函数组件里调用它来给组件添加一些内部 ， 会 在重复渲染时保留这个 state
- 唯一的参数就是初始
- 会返回一个数组：一个 ，一个更新 的函数
- 在初始化渲染期间，返回的状态 与传入的第一个参数 值相同。
我们可以在事件处理函数中或其他一些地方调用更新 的函数。它类似 组件的 ，但是它不会把新的 和旧的 进行合并，而是直接替换。
使用方法
举个例子
每次渲染都是一个独立的闭包
- 每一次渲染都有它自己的 Props 和 State
- 每一次渲染都有它自己的事件处理函数
- 当点击更新状态的时候，函数组件都会重新被调用，那么每次渲染都是独立的，取到的值不会受后面操作的影响
举个例子
函数式更新
如果新的 需要通过使用先前的 计算得出，那么可以将回调函数当做参数传递给 。该回调函数将接收先前的 ，并返回一个更新后的值。
举个例子
惰性初始化
- 参数只会在组件的初始化渲染中起作用，后续渲染时会被忽略
- 如果初始 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 ，此函数只在初始渲染时被调用
举个例子
useEffect
- effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
- 副作用操作可以分两类：需要清除的和不需要清除的。
- 原先在函数组件内（这里指在 React 渲染阶段）改变 dom 、发送 ajax 请求以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性
- useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API
- useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行，该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容
- 与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同。
使用方法
使用 class 组件实现修改标题
在这个 class 中，我们需要在两个生命周期函数中编写重复的代码，这是因为很多情况下，我们希望在组件加载和更新时执行同样的操作。我们希望它在每次渲染之后执行，但 React 的 class 组件没有提供这样的方法。即使我们提取出一个方法，我们还是要在两个地方调用它。参考React实战视频讲解：进入学习
使用 useEffect 组件实现修改标题
useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。
为什么在组件内部调用 useEffect？ 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 Javascript 的闭包机制，而不用在 Javascript 已经提供了解决方案的情况下，还引入特定的 React API。
useEffect 会在每次渲染后都执行吗？ 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
清除副作用
- 副作用函数还可以通过返回一个函数来指定如何清除副作用，为防止内存泄漏，清除函数会在组件卸载前执行。如果组件多次渲染，则在执行下一个 effect 之前，上一个 effect 就已被清除。
跳过 Effect 进行性能优化
- 依赖项数组控制着 useEffect 的执行
- 如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可
- 如果想执行只运行一次的 effect（仅在组件挂载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行
使用多个 Effect 实现关注点分离
- 使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题。
- 我们可以发现 document.title 的逻辑是如何被分割到 和 中的，订阅逻辑又是如何被分割到 和 中的。而且 中同时包含了两个不同功能的代码。这样会使得生命周期函数很混乱。
- Hook 允许我们按照代码的用途分离他们， 而不是像生命周期函数那样。 将按照 声明的顺序依次调用组件中的 每一个 。
useContext
接收一个 对象（React.createContext 的返回值）并返回该 的当前值。当前的 值由上层组件中距离当前组件最近的 的 value prop 决定。
当组件上层最近的 更新时，该 会触发重渲染，并使用最新传递给 的 值。即使祖先使用 或 ，也会在组件本身使用 时重新渲染。
别忘记 useContext 的参数必须是 context 对象本身：
- 正确：
- 错误：
- 错误：
提示
如果你在接触 前已经对 比较熟悉，那应该可以理解， 相当于 组件中的 或者 。 只是让你能够读取 的值以及订阅 的变化。你仍然需要在上层组件树中使用 来为下层组件提供
自定义 Hooks
- 自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook
- 有时候我们会想要在组件之间重用一些状态逻辑，之前要么用 render props ，要么用高阶组件，要么使用 redux
- 自定义 Hook 可以让你在不增加组件的情况下达到同样的目的
- Hook 是一种复用状态逻辑的方式，它不复用 state 本身
- 事实上 Hook 的每次调用都有一个完全独立的 state
useMemo、useCallback
在和的变量值不变的情况下，的引用不变。即：的第一个入参函数会被缓存，从而达到渲染性能优化的目的。
在和的变量值不变的情况下，的值不变。即：函数的第一个入参函数不会被执行，从而达到节省计算量的目的。
性能优化
Object.is浅比较
- Hook 内部使用 来比较新旧 是否相等。
- 与 组件中的 方法不同，如果你修改状态的时候，传的状态值没有变化，则不重新渲染。
- 与 组件中的 方法不同， 不会自动合并更新对象。你可以用函数式的 结合展开运算符来达到合并更新对象的效果。
减少渲染次数
- 默认情况，只要父组件状态变了（不管子组件依不依赖该状态），子组件也会重新渲染
- 一般的优化：
- 类组件：可以使用 ；
- 函数组件：使用 ，将函数组件传递给 之后，就会返回一个新的组件，新组件的功能：如果接受到的属性不变，则不重新渲染函数。
- 但是怎么保证属性不会变呢？这里使用 ，每次更新都是独立的， 也就是说每次都会生成一个新的值（哪怕这个值没有变化），即使使用了 React.memo ，也还是会重新渲染。
- 更深入的优化-使用 &
常见问题
useEffect 不能接收 async 作为回调函数
规定 接收的函数，要么返回一个能清除副作用的函数，要么就不返回任何内容。而 返回的是 。
如何在 Hooks 中优雅的 Fetch Data
不要过度依赖 useMemo
- 本身也有开销。 会「记住」一些值，同时在后续 时，将依赖数组中的值取出来和上一次记录的值进行比较，如果不相等才会重新执行回调函数，否则直接返回「记住」的值。这个过程本身就会消耗一定的内存和计算资源。因此，过度使用 可能会影响程序的性能。
- 在使用 前，应该先思考三个问题:
- 传递给 的函数开销大不大？ 有些计算开销很大，我们就需要「记住」它的返回值，避免每次 都去重新计算。如果你执行的操作开销不大，那么就不需要记住返回值。否则，使用 本身的开销就可能超过重新计算这个值的开销。因此，对于一些简单的 JS 运算来说，我们不需要使用 来「记住」它的返回值。
- 返回的值是原始值吗？ 如果计算出来的是基本类型的值（string、 boolean 、null、undefined 、number、symbol），那么每次比较都是相等的，下游组件就不会重新渲染；如果计算出来的是复杂类型的值（object、array），哪怕值不变，但是地址会发生变化，导致下游组件重新渲染。所以我们也需要「记住」这个值。
- 在编写自定义 时，返回值一定要保持引用的一致性。 因为你无法确定外部要如何使用它的返回值。如果返回值被用做其他 的依赖，并且每次 时引用不一致（当值相等的情况），就可能会产生 bug。所以如果自定义 Hook 中暴露出来的值是 object、array、函数等，都应该使用 。以确保当值相同时，引用不发生变化。
是 的一个超集，主要提供了类型系统和对 的支持。
- Typescript 增加了代码的可读性和可维护性
- 类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
- 可以在编译阶段就发现大部分错误，这总比在运行时候出错好
- 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等
- Typescript 非常包容
- Typescript 是 Javascript 的超集，.js 文件可以直接重命名为 .ts 即可
- 即使不显式的定义类型，也能够自动做出类型推论
- 可以定义从简单到复杂的几乎一切类型
- 即使 Typescript 编译报错，也可以生成 Javascript 文件
- 兼容第三方库，即使第三方库不是用 Typescript 写的，也可以编写单独的类型文件供 Typescript 读取
- Typescript 拥有活跃的社区
- 大部分第三方库都有提供给 Typescript 的类型定义文件
- Typescript 拥抱了 ES6 规范，也支持部分 ESNext 草案的规范
了解了 React Hooks 和 Typescript，接下来就一起看一下二者的结合实践吧！