React Hook

[licong96]

Hook解决的问题

1. 在组件之间复用状态逻辑很难
2. 复杂组件变得难以理解
3. 可以不使用class

1.在组件之间复用状态逻辑很难

之前的相关解决方案是：高阶组件、render props。
缺点是组件会形成“嵌套地狱”。

现在，React为共享状态逻辑提供了更好的原生途径。使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。

2.复杂组件变得难以理解

起初很简单的组件，会逐渐被状态逻辑和副作用充斥。相关的代码被进行了拆分，而不相关的代码却被组合在一起，这样会导致逻辑混乱，很容易产生BUG。

为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数。

3.难以理解的 class

Hook 使你在非 class 的情况下可以使用更多的 React 特性。

Hook是什么

Hook 就是 JavaScript 函数。更具体的来说Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

• 只能在函数最外层调用 Hook。
• 只能在 React 的函数组件中调用 Hook。
• 在自定义的 Hook 中调用。

React 怎么知道哪个 state 对应哪个 useState？

答案是 React 靠的是 Hook 调用的顺序。
只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。

自定义 Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

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

useState

用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

• 函数式更新

• 惰性初始 state。

  • 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state。

• 跳过 state 更新。

  • React 使用 Object.is 比较算法 来比较 state。

Effect Hook

useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。

React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得额外操作很方便。

第二个参数，依赖列表

推荐把函数逻辑移动到你的 effect 内部。这样就能很容易的看出来你的 effect 使用了哪些 props 和 state。

当 effect 执行时，我们会创建一个闭包，并将 state 的值保存在该闭包当中。要解决这个问题，我们可以使用 setState 的函数式更新形式。它允许我们指定 state 该 如何 改变而不用引用 当前 state。

React 是如何把对 Hook 的调用和组件联系起来的？

每个组件内部都有一个「记忆单元格」列表。它们只不过是我们用来存储一些数据的 JavaScript 对象。当你用 useState() 调用一个 Hook 的时候，它会读取当前的单元格（或在首次渲染时将其初始化），然后把指针移动到下一个。这就是多个 useState() 调用会得到各自独立的本地 state 的原因。