在 React 和 Vue 中尝鲜 Hooks

原创 黎云锐 教程 前端 1074阅读 13 天前 举报

在美国当地时间 10 月 26 日举办的 React Conf 2018 上,React 官方宣布 React v16.7.0-alpha 将引入名为 Hooks 的新特性,在开发社区引发震动。

在 React 和 Vue 中尝鲜 Hooks
而就在同月 28 日左右,作为 “摸着鹰酱过河” 优秀而典型代表的 Vue.js 社区,其创始人 Evan You 就在自己的 github 上发布了 vue-hooks 工具库,其简介为 “实验性的 React hooks 在 Vue 的实现”。

在 React 和 Vue 中尝鲜 Hooks

到底是怎样的一个新特性,让大家如此关注、迅速行动呢?本文将尝试做出简单介绍和比较,看看其中的热闹,并一窥其门道。

I. 新鲜的 React Hooks

在 React v16.7.0-alpha 版本中,React 正式引入了新特性 Hooks ,其定义为:

Hooks 是一种新特性,致力于让你不用写类也能用到 state 和其他 React 特性

在琢磨这个定义之前,先直观感受下官网中给出的第一个例子:

换成之前的写法,则等价于:

猜也差不多猜得到,useState() 这个新的内建方法抽象了原有的 this.setState() 逻辑。

为什么又有新 API ?

自从 React 诞生后,其创建组件的方式从 ES5 时期声明式的 createClass ,到支持原生 ES6 class 的 OOP 语法,再到发展出 HOC 或 render props 的函数式写法,官方和社区一直在探索更方便合理的 React 组件化之路。

随之而来的一些问题是:

组件往往变得嵌套过多
各种写法的组件随着逻辑的增长,都变得难以理解
尤其是基于类写法的组件中, this 关键字暧昧模糊,人和机器读起来都比较懵
难以在不同的组件直接复用基于 state 的逻辑
人们不满足于只用函数式组件做简单的展示组件,也想把 state 和生命周期等引入其中
Hooks 就是官方为解决类似的问题的一次最新的努力。

II. 几种可用的 Hooks

对开头的官方定义稍加解释就是:Hooks 是一种函数,该函数允许你 “勾住(hook into)” React 组件的 state 和生命周期。可以使用内建或自定义的 Hooks 在不同组件之间复用、甚至在同一组件中多次复用基于 state 的逻辑。

Hooks 在类内部不起作用,官方也并不建议马上开始重写现有的组件类,但可以在新组件中开始使用。

Hooks 主要分为以下几种:

基础 Hooks
useState
useEffect
useContext
其他内建 Hooks
useReducer
useCallback
useMemo
useRef
useImperativeMethods
useMutationEffect
useLayoutEffect
自定义 Hooks
2.1 State Hook

文章开头的计数器例子就是一种 State Hook 的应用:

这种最常用的 Hook 也展示了 Hooks 的通用逻辑:

调用 useState 方法,返回一个数组
这里使用了 “array destructuring” 语法
数组首个值相当于定义了 this.state.count ,命名随意
数组第二个值用来更新以上值,命名随意,相当于 this.setState({count: })
useState 方法唯一的参数,就是所定义值的初始值
多次调用 Hooks

当需要用到多个状态值时,不同于在 state 中都定义到一个对象中的做法,可以多次使用 useState() 方法:

const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
应该注意到,同样有别于传统 state 的是,调用相应更新函数后,只会用新值替换旧值,而非合并两者。

2.2 Effect Hook

所谓的 “Effect” 对应的概念叫做 “side effect”。指的是状态改变时,相关的远端数据异步请求、事件绑定、改变 DOM 等;因为此类操作要么会引发其他组件的变化,要么在渲染周期中并不能立刻完成,所以就称其为“副作用”。

传统做法中,一般在 componentDidMount、componentDidUpdate、componentWillUnmount 等生命周期中分别管理这些副作用,逻辑分散而复杂。

在 Hooks 中的方案是使用 useEffect 方法,这相当于告诉 React 在每次更新变化到 DOM 后,就调用这些副作用;React 将在每次(包括首次) render() 后执行这些逻辑。

同样看一个示例:

可以看出:

useEffect 一般可以搭配 useState 使用
useEffect 接受一个函数作为首个参数,在里面书写副作用代码,比如绑定事件
若该函数返回一个函数,则返回的这个函数就作为相应副作用的 “cleanup”,比如解绑事件
同样可以用多个 useEffect 分组不同的副作用,使逻辑更清晰;而非像原来一样都方针同一个生命周期中
跳过副作用以优化性能

副作用往往都带来一些性能消耗,传统上我们可能这样避免不必要的执行:

useEffect 中的做法则是传入第二个可选参数:一个数组;数组中的变量用来告诉 React,在重新渲染过程中,只有在其变化时,对应的副作用才应该被执行。

useEffect(() => {
document.title = You clicked ${count} times;
}, [count]);
2.3 自定义 Hooks

传统上使用 HOC 或 render props 的写法实现逻辑共享;而定义自己的 Hooks,可以将组件中的逻辑抽取到可服用的函数中去。

比如将之前例子中的 isOnline 状态值逻辑抽取出来:

如上所示:

自定义 Hook 函数的参数是自由定义的
因为只是个纯函数,所以不同组件都可以各自调用
使用 use 前缀不是硬性要求,但确实是推荐使用的约定
不同组件只共享状态逻辑,而不共享任何状态
2.4 调用 Hooks 的两个原则

只在 top level 调用 Hooks,而不能在循环、条件或嵌套函数中使用
只在 React 函数组件或自定义 Hooks 中调用,而不能在普通 JS 函数中
可以使用官方提供的 eslint 插件保证以上原则: https://www.npmjs.com/package/eslint-plugin-react-hooks

在 React 和 Vue 中尝鲜 Hooks
在 React 和 Vue 中尝鲜 Hooks
III. Vue.js 社区的追赶

vue-hooks 库: https://github.com/yyx990803/vue-hooks

目前该库也声明为实验性质,并不推荐在正式产品中使用。

3.1 “React-style” 的 Hooks

vue-hooks 支持以下 Hooks,嗯呢,看着相当眼熟:

useState
useEffect
useRef
以及一个辅助方法:

3.2 “Vue-style” 的 Hooks

vue-hooks 也支持以下 Hooks,这些就非常接地气了:

useData
useMounted
useDestroyed
useUpdated
useWatch
useComputed
以及一个 mixin 插件:

hooks
这样在不提供 Vue 实例的显式 data 属性的情况下,也实现了一种更函数式的开发体验:

3.3 实现浅析

vue-hooks 的源码目前只有不到 200 行, 非常简明扼要的实现了以上提到的 Hooks 和方法等。

首先大体看一下:

基本的结构非常清楚,可以看出:

withHooks 返回一个包装过的 Vue 实例配置
hooks 以 mixin 的形式发挥作用,注入两个生命周期
用模块局部变量 currentInstance 记录了 Hooks 生效的 Vue 实例
其次值得注意的是处理副作用的 useEffect :

其核心大致轨迹如下:

声明 effect 函数和 cleanup 函数
将调用 Hook 时传入的 rawEffect 赋值到 effect.current 属性上
effect() 运行后,将 rawEffect 运行后的返回值赋值到 cleanup.current 上
在 Vue 本身就支持的几个 hook:xxx 生命周期钩子事件中,调用 effect 或 cleanup

这样再去看这两个 Hook 就敞亮多了:

另外常用的 useData 也是利用了 Vue 实例的 $set 方法,清晰易懂:

同样利用实例方法的:

其余几个 Hooks 的实现大同小异,就不逐一展开说明了。

IV. 总结

React Hooks 是简化组件定义、复用状态逻辑的一种最新尝试
vue-hooks 很好的实现了相同的功能,并且结合 Vue 实例的特点提供了适用的 Hooks

评论 ( 1 )
最新评论
tonylua 9 天前 1F

我是文章原作者,请在11月6日之前删除或注明出处,否则后果自负