三《hook》_牛客博客

Hook 简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
完全可选的。无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，也不必现在去学习或使用 Hook
100% 向后兼容。Hook 不包含任何破坏性改动
官方没有计划从 React 中移除 class，建议我们渐进式使用 Hook

Hook 是什么？

Hook 是一个特殊的函数，它可以让你“钩入”React 的特性。例如，useState 允许你在 React 函数组件中添加 state 的 Hook

什么时候会用 Hook？

编写函数组件并意识到需要向其添加一些 state ，可以使用 Hook

Hook是否全新的东西？

从技术上讲 Hook 是 React 16.8 新增特性，从概念上讲 Hook 实现了现有 React API:props、state、context、refs以及生命周期在无状态函数组件上的应用，因此 Hook 是新的 React 原生概念，也是现有 React 概念在无状态函数中的全新应用

Hook影响对 React 概念理解？

Hook 不会影响对 React 概念的理解。恰恰相反，从概念上讲，React 组件一直更像是函数，而 Hook 则拥抱函数，同时没有牺牲 React 精神原则

Hook 为已知的 React 概念提供了更直接的API:props、state、context、refs以及生命周期。同时提供了一种更强大的方式来组合他们

确保组件的状态逻辑在代码中清晰可见，需要遵循那些规则？为什么？

只在最顶层使用 Hook 不要在循环，条件或嵌套函数中调用 Hook。需要在我们组件的最顶层调用。因为 Hook 的 state 值以链表结构按照创建顺序作为属性保存至当前函数组件实例对象上。因此创建顺序是正确找到指定值的唯一途径

只在 React 函数中调用 Hook 不要再普通的 JavaScript 函数调用 Hook。可以在 React 的函数中调用，也可以在自定义 Hook 中调用其他 Hook。因为 Hook 机制的运行依赖于 React.createElement 相关函数对其的解释行为

为什么使用 Hook？

在组件之间复用状态逻辑很难。React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。因此可能有熟悉的解决方案render props 和 高阶组件,但是这类方案需要重新组织你的组件结构，同时观察代码发现此类抽象层组成组件会形成“嵌套地狱”

Hook 使你在无需修改组件结构的情况下复用状态逻辑

复杂组件变得难以理解。组件起初很简单，但是生命周期事件逐渐会被渲染逻辑、业务逻辑、DOM相关逻辑充斥。相关联代码因生命周期被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug ，并且导致逻辑不一致

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

难以理解的 class。使用 class 必须去理解 javascript 中 this 的工作方式，还不能忘记绑定事件处理器，这些代码非常冗余。有经验的 React 开发者之间对于函数组件与 class 组件的差异存在分歧

使用 State Hook 技巧

使用示例

'' import React, { useState } from 'react';
''
'' function Example() {
'' // 声明一个叫 "count" 的 state 变量
'' const [count, setCount] = useState(0);
'' }

useState 是什么？

useState 是在函数组件中使用 state 的方法

什么时候用 useState？

编写函数组件并意识到需要向其添加一些 state ，可以使用 state Hook

为什么用 useState？

在函数组件中，我们没有 this ，所以我们不能分配或读取 this.state

使用 Effect Hook

useEffect 是什么？

useEffect 是在函数组件中使用 副作用(组件事件也可以解释为程序在特定情况支持的方法这里指React生命周期事件) 的方法

什么时候用 useEffect？

编写函数组件并意识到要监听 副作用，可以使用 effect Hook

为什么用 useEffect？

在函数组件中，我们没有 extends ，所以我们不能继承或扩展 React.Component

useEffect 会在每次渲染后都执行吗？

默认情况下，它在第一次渲染之后和每次更新之后都会执行

参考文献

使用 State Hook
使用 Effect Hook

三 《hook》

目录