hooks组件（为何要使用React Hooks）

本文目录

• 为何要使用React Hooks
• Hooks概念理解
• unitysend需要hook吗
• react封装自动滚动组件（hooks）
• react-hooks实现下拉刷新
• react自定义组件中使用ref
• react hook内定时器怎么能不影响子组件更新
• React Hook

为何要使用React Hooks

在了解React Hooks之前，我们必须先知道React的函数组件性质以及的函数组件为什么要用Hooks。

大伙儿都知道，无组件不React，而React的组件又分为类式组件和函数式组件，为什么函数式组件大受React开发者的推广？

首先我们从源码的角度来简单谈一下类式组件和函数式组件的区别：

定义类组件时，我们必须继承React.Component

同时，它具有一个render函数

咱们见好就收，毕竟具体操作需要涉及源码，不是一时半会解释的清的。那么render加载组件时，发生了什么？

1.根据组件标签，找到组件

2.由于是类式组件，创建新的实例，并通过该实例调用到原型上的render方法

3.将虚拟Dom转化为真实DOM

类式组件被定义为复杂的组件，这不是React所希望的，React想要的组件是纯函数组成的管道，那么便引出了作为简单组件的函数组件。

而函数组件作为一个函数，是没有继承React.Component的，他只需要两步 1.找到组件 2.渲染组件 ，所以也就 不存在生命周期，以及状态及this。

这就意味着，函数组件实现有关state的管理，需要借助redux，秉承redux能不用就不用的准则（其实有的时候还蛮香的，全局管理方便），往往会另功能简单的React组件变得笨重。

于是React团队自16.8版本以来，推出了稳定的React HOOKS来解决上述问题。

React约定钩子的前缀为use，所以需要自定义钩子时，一般使用use为前缀创建钩子。除此之外，React默认提供了四种钩子：

1）useState

相当于一种静态声明，目的是引入状态，此时的钩子保存状态。useState()接收函数状态的初始值，具有两个参数，第一个为状态变量，第二个为改变状态的方法，比如const = useState(0)

2)useEffect

副作用钩子，用来替代生命周期，最常见是向服务器请求数据

useEffect()作为常用的钩子之一，接收两个参数，第一个参数是函数，第二个参数是一个数组，给出依赖项，数组里的值代表需要监测的对象。

问题来了，生命周期那里体现？

当组件参数发生改变时，useEffect()就会执行。组件第一次渲染时，useEffect()也会执行。是不是相当于生命周期中的 componentDidMount() 呢？而useEffect()下的return，一般写在第一个参数的异步操作后，相当于 componentWillUnmount() ，在组件卸载前执行，做收尾工作。

3）useReducer

属于action钩子，useReducer()将算出新的state，返回一个数组。例如const = useReducer(ReducerFunc, initState)

第一个值是当前状态值，第二个值是发送action的dispatch。与Redux的Reducer一样，能够共享状态，但是不同之处是没法提供中间件和时间旅行(time travel)。

4)useContext

共享状态的一个钩子，在组件外部建立一个Context，包裹组件时，可以将被包裹组件的状态共享给组件内部调用的其他组件，即：

1.外部建立Context()

2.包裹含有状态的组件1

3.在其他函数组件内部调用该Context()时，可以将组件1的状态共享

但是有一点需要注意的是，使用useContext进行的数据流管理，每当context更新时，所有 使用 到该context的组件都会重新渲染。所以需要方法对useContext()进行优化，减少不必要的更新，优化方法可以参考： 如何优雅地处理使用React Context 导致的不必要渲染问题？

除此之外还有一些自带的钩子，比如：

5)useCallback和useMemo

可以用做React性能优化

react很烦，一但更新数据，render依次diff刷新节点，拦都拦不住。useCallback和useMemo就是拦住他刷新的方法。

假设React组件中有个button，同时声明了click方法，每次render时，button和click方法都会重新render。于是可以使用useCallback()，避免组件重复无意义的渲染。

比如：

原因是缓存了相同的引用，以此避免了无效render。

useMemo参数用法一致，不过useCallback一般用于缓存函数，useMemo用于缓存计算结果之类。

useCallback(fn, deps)相当于useMemo(()=》fn, deps)

*可以推出，使用useCallback实现useMemo的方法：

useMemo(fun,...deps)  

useCallback(fun(...deps), )

这两者是等价的。

Hooks概念理解

本节任务: 能够理解hooks的概念及解决的问题

1. 什么是hooks

Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子”

React体系里组件分为 类组件 和 函数组件

经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生

注意点：

有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用

有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态

hooks只能在函数组件中使用

2. Hooks解决了什么问题

Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题

组件的逻辑复用

在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式

但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等

class组件自身的问题

class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的’快艇’

unitysend需要hook吗

需要。
Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件来强制执行这些规则。
只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)
只在 React 函数中调用 Hook
**不要在普通的 JavaScript 函数中调用 Hook。**你可以：
在 React 的函数组件中调用 Hook
在自定义 Hook 中调用其他 Hook
遵循此规则，确保组件的状态逻辑在代码中清晰可见。
ESLint 插件
我们发布了一个名为 eslint-plugin-react-hooks 的 ESLint 插件来强制执行这两条规则。如果你想尝试一下，可以将此插件添加到你的项目中：
我们打算后续版本默认添加此插件到 Create React App 及其他类似的工具包中。
npm install eslint-plugin-react-hooks --save-dev
1
1
// 你的 ESLint 配置
{
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
"react-hooks/exhaustive-deps": "warn" // 检查 effect 的依赖
}
}
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
说明
正如我们之前学到的，我们可以在单个组件中使用多个 State Hook 或 Effect Hook
function Form() {
// 1. Use the name state variable
const = useState(’Mary’);
// 2. Use an effect for persisting the form
useEffect(function persistForm() {
localStorage.setItem(’formData’, name);
});
// 3. Use the surname state variable
const = useState(’Poppins’);
// 4. Use an effect for updating the title
useEffect(function updateTitle() {
document.title = name + ’ ’ + surname;
});
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
那么 React 怎么知道哪个 state 对应哪个 useState？答案是 React 靠的是 Hook 调用的顺序。因为我们的示例中，Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作
// ------------
// 首次渲染
// ------------
useState(’Mary’) // 1. 使用 ’Mary’ 初始化变量名为 name 的 state
useEffect(persistForm) // 2. 添加 effect 以保存 form 操作
useState(’Poppins’) // 3. 使用 ’Poppins’ 初始化变量名为 surname 的 state
useEffect(updateTitle) // 4. 添加 effect 以更新标题
// -------------
// 二次渲染
// -------------
useState(’Mary’) // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm) // 2. 替换保存 form 的 effect
useState(’Poppins’) // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle) // 4. 替换更新标题的 effect
// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果我们将一个 Hook (例如 persistForm effect ) 调用放到一个条件语句中会发生什么呢？
// 在条件语句中使用 Hook 违反第一条规则
if (name !== ’’) {
useEffect(function persistForm() {
localStorage.setItem(’formData’, name);
});
}
1
2
3
4
5
6
1
2
3
4
5
6
在第一次渲染中 name !== ’’ 这个条件值为 true，所以我们会执行这个 Hook。但是下一次渲染时我们可能清空了表单，表达式值变为 false。此时的渲染会跳过该 Hook，Hook 的调用顺序发生了改变：
useState(’Mary’) // 1. 读取变量名为 name 的 state（参数被忽略）
// useEffect(persistForm) // 此 Hook 被忽略！
useState(’Poppins’) // 2 （之前为 3）。读取变量名为 surname 的 state 失败
useEffect(updateTitle) // 3 （之前为 4）。替换更新标题的 effect 失败
1
2
3
4
1
2
3
4
React 不知道第二个 useState 的 Hook 应该返回什么。React 会以为在该组件中第二个 Hook 的调用像上次的渲染一样，对应的是 persistForm 的 effect，但并非如此。从这里开始，后面的 Hook 调用都被提前执行，导致 bug 的产生。
这就是为什么 Hook 需要在我们组件的最顶层调用。如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：
useEffect(function persistForm() {
// 将条件判断放置在 effect 中
if (name !== ’’) {
localStorage.setItem(’formData’, name);
}
});
1
2
3
4
5
6
1
2
3
4
5
6
注意：如果使用了提供的 lint 插件，就无需担心此问题。 不过你现在知道了为什么 Hook 会这样工作，也知道了这个规则是为了避免什么问题。
打开CSDN，阅读体验更佳


React Hook介绍（三）: Hook必须遵守的两个规则
一、两个强制性规则： (一）只在最顶层使用 Hook 记住别在循环，条件或嵌套函数中定义即可，因为hook它必须按顺序执行，它对state的控制才正确。 （二）只在 React 函数中调用 Hook： 不要在普通的 JavaScript 函数中调用 Hook，即只能在React的函数组件中调用，另外也可以在自定义hook中调用其它的hook. 二、安装ESLink插件： 为了保证Hook开发中符合以上2个规则要求，可以在开发工具中安装：eslint-...
继续访问
React Hooks
文章目录React Hooks概述由来基本语法Hooks的规则构建自己的hooks自定义Hooks在 Hooks 之间传递信息代码对比Hooks API参考链接 React Hooks概述 由来 Hooks 允许您在不更改组件层次结构的情况下重用有状态逻辑。 Hooks允许您根据相关内容（例如设置订阅或获取数据）将一个组件拆分为较小的函数，而不是基于生命周期方法强制拆分。您还可以选择使用 red...
继续访问
Hook 规则以及自定义Hook
文章目录Hook规则只在最顶层使用 Hook只在 React 函数中调用 Hook自定义Hook Hook规则 只在最顶层使用 Hook 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用
继续访问
5-8 Hook规则
钩子是JavaScript函数，但在使用它们时需要遵循两个规则。我们提供了一个 linter 插件来自动执行这些规则 只在最顶层调用Hook 不要在循环、条件和嵌套的函数中调用Hook。 遵循此规则可以确保每次组件render时都以相同的顺序调用Hook。这是React能在多个useState和useEffect之间正确保存Hook的state原因。 （下面将深入解释。） 只在React函数和自定...
继续访问
26【React基础-5】React Hook
hook出现的意义 hook是react 16.8版本才增加的知识，它出现的目的就是让我们可以在函数组件中使用很多类组件中才有的特性，例如state、生命周期等。 hook简介 hook说白了其实就是一些react中特殊的函数，只不过这些函数允许我们通过钩子的形式钩入一些react的特性，例如我们想要在函数组件中使用state的话就不用将其转为类组件，直接使用useState()这个hook函数即可；如果想要在函数组件中使用类似于类组件的生命周期这些函数的话，直接使用useEffect()这个h.
继续访问
理解 Hook 规则
Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。只在最顶层使用 Hook不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最...
继续访问
React Hook 基本使用规则
React Hook 基本使用规则 Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。 1.只在最顶层使用 Hook 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。 2.只在 React 函数中调用 Hook 不要在普通
继续访问
滑动窗口求最大值 leetcode 59
滑动窗口最大值问题 利用递减队列实现 Dequeue dequeue = new LinkedList《》(); 递减队列方法说明 peekFirst获取队头元素 pollFirsr队头元素出队 offerLast == add在队尾插入新元素 public int; }
继续访问
react的Hook使用的规则（注意事项）
只在最顶层使用 Hook 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。) 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook。你可以： 在 React 的函数组件中调用 Hoo
继续访问
为什么不能再循环，条件或嵌套函数中调用 React Hook
React 官网介绍了 Hook 的这样一个限制： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。) 这个限制在开发中也确实会时常影响到我们的开发体验，比如函数组件中出现 if 语句提前 return
继续访问

hook技术--优化代码hook
. 1.简介 在代码hook中,由于频繁的进行hook和unhook,而且又加上多线程的一些不可靠的因素,会使程序执行效率降低而且可能会导致错误,即 多线程对其hook和unhook导致不稳定的可能性增加, 因此需要找一种不需要频繁进行hook和unhook的方法. 而windows的一些API提供了一种很好的优化方式. 即API代码以mov edi,edi 指令开头,这条执行占了2个字节...
继续访问
react hook（基础详解）
首先我们知道Hook是可以100%向下兼容的，就是说即便在你以前的代码中加入hook写法也没有问题，同时提供了一个更直接的API包括props， state，context，refs以及生命周期，hook编写时使用的代码量也会更少，但这也是一个过渡，hook的使用去掉了class的概念，虽然以前的写法依旧可行，但新增hook的同时官方也表示没有计划移除class，这对程序员来说是很友好的，但react更推荐用户使用hook来编写代码 首先我们看一下state在传统和hook中的使用方式区别 首先演示.
继续访问
React Hook规则
Hook 本质是 JavaScript 函数，但在使用的时候它有着它需要遵循的规则： 只在最顶层使用 Hook，这能够让 React 在多次的 useState 和 useEffect 调用中保持 hook 的状态正确。 只在 React 函数中调用 Hook，也就是说在 React 的函数组件中调用 Hook，还有一点是在自定义 Hook 中调用其他 Hook。 ...
继续访问
React学习笔记（八）--- HooK
一、简介 ​在之前的学习中，我们了解到只有类组件中才能使用 state，函数组件是无法使用的。但Hook的出现，改变这种情况，Hook是React 16.8 版本的新增特性，可以让我们在函数组件中使用state、生命周期以及refs、context等其他相关特性。而且Hook可以让我们在不更改组件结构的前提下复用状态逻辑，使得在组件间共享Hook变得十分便利。 ​简单来说，Hook就是一些React中封装好的state以及生命周期、refs等特性的方法，本质就是 JavaScript 函数。除了Re
继续访问
深入理解React Hooks
前言：Hook 是 React 16.8的新增特性。它可以让你在不编写 class 的情况下使用state以及其他的 React 特性。即react hook只存在于函数组件中，在类组件中不受用. 1.首先为什么要使用Hook？ 动机 Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你都可能对这些问题似曾相识。 痛点问题： 1.在组件之间复用状态逻辑很难 a.之前的解决方案是
继续访问

最新发布 React hooks的规则
不要再循环语句、条件语句或者嵌套函数中声明hooks。相反，在任何返回之前，总是在React函数的顶层声明hook。通过遵循此规则，您可以确保在每次呈现组件时以相同的顺序调用hook。这使得React能够在多个useState和useEffect调用之间正确保存hook的状态。(如果你感到好奇，我们将在下面深入解释。)如之前所述，我们可以在单一组件中声明多个state或者Effect 那么React如何知道哪个状态对应于哪个useState调用呢?答案是React依赖于hook的调用顺序。我们的例子之所以有
继续访问
前端学习-React Hook(钩子)
一.概述 1.什么是 Hook hook（钩子）是一种特殊的消息处理机制，它可以监视系统或者进程中的各种事件消息，截获发往目标窗口的消息并进行处理。 1.1 Hook 例子 函数记录日志、节流、缓存 Windows 窗口消息拦截 键盘事件拦截（木马和外挂） 流量识别分析 1.2 React Hook 我们可以通过 Hook 把需要的状态、副作用方法 “钩” 进来，放到函数内部使用。让原来呆板的 React 函数拥有状态和生命周期。 2. Hook 出现的意义 函数一等公民 - 函数式编程
继续访问
hooks 系列六：hook 规则
***隐藏网址***
继续访问
【React】HOOK的使用规则
什么是HOOK? 我们都知道，在react的函数组件中，是不能维护state的，函数组件也没有生命周期。而HOOK的出现，使得函数组件可以维护state，也可以拥有生命周期。 HOOK使用规则 （1）只能在函数最外层调用HOOK。不要在循环、条件语句或子函数中调用useState、useEffect等。 （2）只能在React函数组件或者自定义HOOK中调用HOOK，不能在其他JavaScript函数中调用。 useState const = useStat.
继续访问
react.js
javascript
前端

react封装自动滚动组件（hooks）

控制好定时器的使用 注意在触发useEffect的时候清除上一次的定时器 否则在webApi内会堆积 导致无法单一控制
此组件限制了只有在滚动条位于组件底部时才会触发滚动 滑动滚轮也会停止滚动

使用方法

continued～

react-hooks实现下拉刷新

index.js文件

index.less

quote.jsx 组件引用

这是我基于react-hooks写的一个下拉刷新组件，如果有谁在使用的过程中，发现问题，请麻烦指出。

react自定义组件中使用ref

自定义组件中使用ref需要用到react的2个hooks：
1.forwardRef
2.useImperativeHandle

自定义组件：

使用：

先使用 React.forwardRef;再使用 connect 包一层会使 ref 属性漏掉，导致 内部实例无法传到外部；
正确的操作方式要调整高阶组件的顺序，先用connect包裹，然后再用React.forwardRef包裹。

这样就可以同时使用2个高阶组件了。

react hook内定时器怎么能不影响子组件更新

通过给子组件添加不同的key即可。
每次父组件执行rend方法时，发现key不同就会重新加载子组件：key=Math.random()。
React，它的设计思想极其独特，属于革命性创新，性能出众，特点是：声明式设计，React采用声明范式，可以轻松描述应用。高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活：React可以与已知的库或框架很好地配合。实现一个render()方法，并且根据输入的数据返回相应的结果。输入的数据作为XML属性传递给组件，render()方法通过this.props访问这些输入的数据。

React Hook

react 16.8 以后加上了 react hook，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。16.8之前，react组件可以分为类组件和函数组件。

我们为什么要拥抱react hook？由于类组件存在以下几点问题：

下面逐一介绍官方提供的hook API。
1.useState()
作用：返回一个状态以及能修改这个状态的setter，在其他语言称为元组（tuple），一旦mount之后只能通过这个setter修改这个状态。

2.useEffect(callback, arr)
作用：处理函数组件中的副作用，如异步操作、延迟操作等。useEffect有两个参数，callback和数组依赖项，无arr时相当于componentDidMount生命周期，有arr时相当componentDidMount和componentDidUpdata生命周期。如果callback中有return，则相当于componentWillUnmount。

3.useContext
作用：跨组件共享数据钩子，使用可分为三步：

4.useReducer

作用：用于管理复杂的数据结构（useState一般用于管理扁平结构的状态），基本实现了redux的核心功能。 useState 的替代方案。它接收一个形如 (state, action) =》 newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

5.useMemo、useCallback
这俩个Api与性能优化有关。react中，性能的优化点在于：

基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState；在shouldComponentUpdate中判断前后的props和state，如果没有变化，则返回false来阻止更新。
在hooks出来之后，我们能够使用function的形式来创建包含内部state的组件。但是，使用function的形式，失去了上面的shouldComponentUpdate，我们无法通过判断前后状态来决定是否更新。而且，在函数组件中，react不再区分mount和update两个状态，这意味着函数组件的每一次调用都会执行其内部的所有逻辑，那么会带来较大的性能损耗。因此useMemo 和useCallback就是解决性能问题的杀手锏。

useCallback和useMemo的参数跟useEffect一致。useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

通过一个例子来看useMemo的作用：

不使用useMemo，无论count还是val改变都会执行expensive()

使用useMemo，只有在count发生改变使才会会执行expensive()

useCallback跟useMemo比较类似，但是使用场景不同：比如有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。

6.useRef

useRef是一个方法，返回一个可变的 ref 对象；其 .current 属性被初始化为传入的参数（initialValue）；可以保存任何类型的值:dom、对象等任何可变值；返回的 ref 对象在组件的整个生命周期内保持不变；修改 ref 的值是不会引发组件的重新 render 。

useRef非常常用的一个操作，访问DOM节点，对DOM进行操作，监听事件等等，如下：

除了传统的用法之外,它还可以“跨渲染周期”保存数据。

在上面的例子中，点击了 打印like 按钮后，连续点击数字按钮，会发现2s后 likeRef.current 打印出11，而 like 打印出1。

因为，在任意一次渲染中，props和 state 是始终保持不变的，如果props和state在任意不同渲染中是相互独立的话，那么使用到他们的任何值也是独立的。所以onButtonClick时拿到的时未点击数字按钮时的 like 值。
而ref 在所有 render 都保持着唯一的引用，因此所有的对 ref 的赋值或者取值拿到的都是一个 最终 的状态，而不会存在隔离。

7.useImperativeHandle

当userRef用于一个组件时，useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值；如果不使用，父组件的ref(chidlRef)访问不到任何值（childRef.current==null）；且 useImperativeHandle 应当与 forwardRef 一起使用。

8.useLayoutEffect
用法与useEffect 相同，但它会在所有的 DOM 变更之后同步调用（立即执行）。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。由于会在浏览器进行任何绘制之前运行完成，阻塞了浏览器的绘制。
使用场景：当useEffect里面的操作需要处理DOM,并且会改变页面的样式,就需要用这个,否则可能会出现闪屏问题。

9.useDebugValue
useDebugValue 用于在 React 开发者工具中显示 自定义 Hook 的标签。
useDebugValue 接受一个格式化函数作为可选的第二个参数。该函数只有在 Hook 被检查时才会被调用。它接受 debug 值作为参数，并且会返回一个格式化的显示值。