react 阮一峰_【React】Hook 入门

其实大家直接看看阮一峰老师写的这篇文章就足够了，本人就是想把人家的内容再自己咀嚼一遍而已。

React Hooks 入门教程​www.ruanyifeng.com

react 用过一段时间的人都知道，我们可以写类组件，也可以写函数组件。函数组件写起来简单，好维护，但是唯一的缺点是没有自己的 state。

那有什么样的一种方法，既能利用 react 函数组件的简单，也可以使用 state 呢，这个就是 hooks 诞生的原因。用 react 官方的话说，就是："组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。"

为了约定开发者辨别什么函数是一个钩子，一般用 useXXX 来作为钩子，钩子会返回一个数组，前面一个是状态，后面是修改这一状态的函数。

比如说下面这个函数组件：

import 

除了给函数组件添加 state，我们还可以为函数组件通过 hookes 使用 context。

同样的，对于一个箭头函数组件，我们可以直接使用 useContext 拿到一个 context 对象里的内容，达到多组件复用一个全局对象的目的。

代码为：

import 

下面是一个面试里经常出现的问题，因为 redux 和 hook 的相关知识点都经常在面试里出现，所以，下面这段代码一定要非常熟练才可以。

首先我们要回顾一下，redux 产生的原因是因为需要不同组件实现 state 共享，而 reducer 通过旧的 state 和 action 来产生新的 state，阮老师直接用下面这句话表达了。

(

useReducer 的输入参数是 reducer 和初始的 state，返回值是一个数组，里面是当前的 state 和 dispatch 函数。合成事件函数被调用时，我们运行 dispatch 函数并传入 action type，达到更新状态的目的。

代码为：

import