官网学习

1、简介

• 问题：在组件之间复用状态逻辑很难

• 你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。

• Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据） ，而并非强制按照生命周期划分。

2、概览

• State Hook

  • React 会在重复渲染时保留这个 state。useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。

  • 数组解构的语法让我们在调用 useState 时可以给 state 变量取不同的名字。当然，这些名字并不是 useState API 的一部分。React 假设当你多次调用 useState 的时候，你能保证每次渲染时它们的调用顺序是不变的。

• Effect Hook

  • 你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。

• Hook 使用规则

  • Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

  • 只能在 React 的函数组件中调用 Hook。

• 自定义 Hook

  • Hook 是一种复用状态逻辑的方式，它不复用 state 本身。事实上 Hook 的每次调用都有一个完全独立的 state —— 因此你可以在单个组件中多次调用同一个自定义 Hook。

State Hook

Effect Hook

• 在函数组件中执行副作用操作。React组件中有两种常见的副作用操作：需要清除的和不需要清除的。

• 无需清除的effect

  • 在 React 更新 DOM 之后运行一些额外的代码。 比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。

  • 

• 需要清除的effect

  • 还有一些副作用是需要清除的。例如订阅外部数据源。

  • 

• 通过跳过effect进行性能优化

  • 

  • 

Hook 规则

自定义Hook

• 当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中

• 自定义 Hook 必须以 “use” 开头吗？ 必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。

• 在两个组件中使用相同的 Hook 会共享 state 吗？ 不会。自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值)，所以每次使用自定义 Hook 时，其中的所有 state 和副作用都是完全隔离的。