vue和react中使用Hooks的优势( 三 ) _Hooks

多次使用，没开N度？你看上面的代码块内不就“梅开三度” 了吗？

就冲 “状态逻辑复用” 这个理由，Hooks 就已经香得我口水直流了。
3.2 代码组织

熵减，宇宙哲学到编码哲学。

项目、模块、页面、功能，如何高效而清晰地组织代码，这一个看似简单的命题就算写几本书也无法完全说清楚。
但一个页面中，N件事情的代码在一个组件内互相纠缠确实是在 Hooks 出现之前非常常见的一种状态。
那么 Hooks 写法在代码组织上究竟能带来怎样的提升呢？

文章插图

（假设上图中每一种颜色就代码一种高度相关的业务逻辑）
无论是 vue 还是 react, 通过 Hooks 写法都能做到，将“分散在各种声明周期里的代码块”，通过 Hooks 的方式将相关的内容聚合到一起。
这样带来的好处是显而易见的：“高度聚合，可阅读性提升” 。伴随而来的便是 “效率提升，bug变少” 。
按照“物理学”里的理论来说，这种代码组织方式，就算是“熵减”了。
3.3 比 class 组件更容易理解

尤其是 this 。

在 react 的 class 写法中，随处可见各种各样的 .bind(this) 。（甚至官方文档里也有专门的章节描述了“为什么绑定是必要的？”这一问题）
vue 玩家别笑，computed: { a: () => { this } } 里的 this 也是 undefined 。
很显然，绑定虽然“必要”，但并不是“优点”，反而是“故障高发”地段。
但在Hooks 写法中，你就完全不必担心 this 的问题了。
因为：

本来无一物，何处惹尘埃。

Hooks 写法直接告别了 this，从“函数”来，到“函数”去。
妈妈再也不用担心我忘记写 bind 了。
3.4 友好的渐进式

随风潜入夜，润物细无声。

渐进式的含义是：你可以一点点深入使用。
无论是 vue 还是 react，都只是提供了 Hooks API，并将它们的优劣利弊摆在了那里。并没有通过无法接受的 break change 来强迫你必须使用 Hooks 去改写之前的 class 组件。
你依然可以在项目里一边写 class 组件，一边写 Hooks 组件，在项目的演进和开发过程中，这是一件没有痛感，却悄无声息改变着一切的事情。
但是事情发展的趋势却很明显，越来越多的人加入了 Hooks 和组合式API 的大军。
四、如何开始玩 hooks ？
4.1 环境和版本
在 react 项目中， react 的版本需要高于 16.8.0 。
而在 vue 项目中， vue3.x 是最好的选择，但 vue2.6+ 配合 @vue/composition-api，也可以开始享受“组合式API”的快乐。
4.2 react 的 Hooks 写法
因为 react Hooks 仅支持“函数式”组件，因此需要创建一个函数式组件 my-component.js 。

// my-component.jsimport { useState, useEffect } from 'React'export default () => {// 通过 useState 可以创建一个 状态属性 和一个赋值方法const [ name, setName ] = useState('')// 通过 useEffect 可以对副作用进行处理useEffect(() => {console.log(name)}, [ name ])// 通过 useMemo 能生成一个依赖 name 的变量 messageconst message = useMemo(() => {return `hello, my name is ${name}`}, [name])return <div>{ message }</div>}

细节可参考 react 官方网站：
https://react.docschina.org/docs/hooks-intro.html
4.3 vue 的 Hooks 写法
vue 的 Hooks 写法依赖于组合式API，因此本例采用 <script setup> 来写：

<template><div>{{ message }}</div></template><script setup>import { computed, ref } from 'vue'// 定义了一个 ref 对象const name = ref('')// 定义了一个依赖 name.value 的计算属性const message = computed(() => {return `hello, my name is ${name.value}`})</script>

很明显，vue 组合式API里完成 useState 和 useMemo 相关工作的 API 并没有通过 useXxx 来命名，而是遵从了 Vue 一脉相承而来的 ref 和 computed 。