对比学习VR - 逻辑复用的进化
在过去一年的时间里，我都是用Vue开发项目。对于这种高度封装的框架，在习惯了Vue的语法后，常处于一种“面向Vue开发”的错觉中。近期有React相关的需求，写起来非常不适应，想重温React语法，发现已经有了中文文档，也更新了Hook相关的知识，自己目前还是个弱鸡，在此粗浅写下学习后的感想。
这篇文章只做概览，并不是学习逻辑复用的最好途径，推荐：
【React深入】从Mixin到HOC再到Hook - 掘金
文中提到了“正值壮年”的高阶组件（Higher-Order Components）非常多的用途以及注意事项。
函数式组件
函数式组件是定义React组件最简单的方式：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
函数式组件在React早期担任无状态函数式组件（Stateless Functional Component）的角色。无状态概念在Vue中也有体现，即函数式组件（functional component），两者名字非常接近，作用也非常接近，由于他们只是函数，提供了更低的渲染开销（无this）。
在单文件组件（Single File Component）中，实现相同功能的代码如下所示：
<template functional>
<h1>Hello, {{props.name}}</h1>
</template>
值得注意的是，这种函数式组件的声明方式将在Vue 3.0中被放弃，改为仅能在普通的函数中声明：
rfcs/0000-functional-async-api-change.md at functional-async-api-change · vuejs/rfcs · GitHub
In 3.x, we intend to support functional componentsonly as plain functions
import { h } from 'vue'
const FunctionalComp = (props, slots) => {
return h('div', `Hello! ${props.name}`)
}
尽早拥抱JSX吧。
但是在这里顺带一提，Vue的JSX支持让我觉得非常怠惰，我最近尝试的时候，官方仓库里提到的下面这种写法事实上已经不生效了：
<input vOn:click={this.newTodoText} />
反而是onClick起作用。详见GitHub - vuejs/jsx: monorepo for Babel / Vue JSX related packages
在16.7版本后，React的Typescript声明文件中的React.SFC被废弃，由React.FC取而代之，原因可以在下面这个PR中看到：
摘录关键如下：
The motivation for this is twofold: firstly the addition of hooks means function components can have state, and secondly the term “stateless component” can equally apply to class components which don’t use any state, causing some confusion.
即：
- 由于Hooks的加入，函数式组件可以拥有状态；
- 在class语法中，也有无状态组件的说法，两者可引起混淆；
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Hook仅能够在React的函数式组件中使用，相当于是原函数式组件的一个扩展，抽象来看，Hook作为一种思想，完全是可以独立于React之外的，这一点尤雨溪老师在下面这个仓库里做了很好的示范：
GitHub - yyx990803/vue-hooks: Experimental React hooks implementation in Vue
用库中所提供的写法，完成上述同样功能的Vue代码大致如下所示：
import { hooks, useData, useComputed } from 'vue-hooks'
Vue.use(hooks)
new Vue({
template: `
<div @click="data.count++">
{{ data.count }} {{ double }}
</div>
`,
hooks() {
const data = useData({ count: 0 })
const double = useComputed(() => data.count * 2)
return { data, double }
}
})
这里有一篇很棒的文章介绍了如何使用useState、useEffect进行数据的处理（包括异步处理、异常处理等）：
How to fetch data with React Hooks? - RWieruch
关于Vue中所提供的useComputed，在React中也有相应的useMemo可以使用：Hook API 索引 – useMemo
Mixin
天下大势，分久必合。条条大路，都通向了逻辑复用的难题。
一个Vue中逻辑被生命周期所分隔的例子如下所示：
export default {
...other,
mounted() { register(); },
beforeDestroy() { unregister(); }
}
但Vue其实也提供了对策：
export default {
...other,
mounted() {
register();
this.$once('hook:beforeDestroy', () => {
unregister();
})
}
}
在独此一处的情形下，这样的可读性更强，也更便于逻辑抽离。但是要在多组件中复用逻辑，这种写法也难免需要进行代码的复制粘贴。
Vue和React都提供了Mixin：
image.png
在实际开发的过程中，Mixin的做法是有问题的，这里有一些关于Mixin的坏处的摘录：
- Mixin引入了隐式依赖（Mixins introduce implicit dependencies）
一个例子：当Mixin依赖组件内部属性时，更改组件属性会使Mixin失效 - Mixin引起了命名冲突（Mixins cause name clashes）
- Mixin复杂度有滚雪球效应（Mixins cause snowballing complexity）
高阶组件
高阶组件是目前实现逻辑复用非常流行的手段。能够帮助我们解决一些横切关注点。关于什么是横切关注点，可以观看下面这个视频：
严肃点，还是看下面这个链接吧。
我们先来回忆一下高阶函数，下面这个也许是非常不合理的例子利用高阶函数给原函数附上了打点功能：
// 高阶函数
function roar() {
console.log('hello');
}
const logRoar = (() => {
return function addLog() {
console.log('log');
roar();
};
})();
logRoar();
// log
// hello
React中的高阶组件（来源）：
function logHoc(WrappedComponent) {
return class extends Component {
componentWillMount() {
this.start = Date.now();
}
componentDidMount() {
this.end = Date.now();
console.log(`${WrappedComponent.dispalyName} 渲染时间：${this.end - this.start} ms`);
console.log(`${user}进入${WrappedComponent.dispalyName}`);
}
componentWillUnmount() {
console.log(`${user}退出${WrappedComponent.dispalyName}`);
}
render() {
return <WrappedComponent {...this.props} />
}
}
}
“继承”是不是解决问题的方案呢？React在组合 vs 继承 – React一文中提到：
在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况。
如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。
在非常年轻的语言golang（2009年）中，也推荐使用组合来进行代码的组织：
type Car struct {
weight int
name string
}
type Bike struct {
Car
lunzi int
}
相比继承，组合更为灵活，且便于扩展。
但高阶组件也有自己的问题，在一些复杂的情况下，我们可能会写出俄罗斯套娃式的组件，并且有可能引起命名冲突，这些情况与Mixin的处境是类似的。
Vue 组合函数
组合函数（Composition Function）是Vue 3.0中最重要的变化，下面这篇文章我想业内多数人已经看过：
Vue Function-based API RFC - 知乎
这是文中的一段鼠标侦听的例子：
function useMouse() {
const x = value(0)
const y = value(0)
const update = e => {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => {
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
window.removeEventListener('mousemove', update)
})
return { x, y }
}
// 在组件中使用该函数
const Component = {
setup() {
const { x: myX, y } = useMouse()
// 与其它函数配合使用
const { z } = useOtherLogic()
return { myX, y, z }
},
template: `<div>{{ myX }} {{ y }} {{ z }}</div>`
}
摘录文中的话如下：
- 暴露给模版的属性来源清晰（从函数返回）
- 返回值可以被任意重命名，所以不存在命名空间冲突；
- 没有创建额外的组件实例所带来的性能损耗。
另外：
- 使用时不需要关注鼠标位置内部的实现逻辑；
- 不需要关注调用顺序（React Hook约束这一点）；
下面简单举一个我自己在开发中遇到的例子，这是通过Mixin复用Vant单例Toast Loading的代码：
import Vue from 'vue';
import { Toast } from 'vant';
export default Vue.extend({
data() {
return {
// 可以看到我在命名这方面下了很大的功夫
// 实际开发可以感受到 $ 让人很不爽 双击无法选中全名
$_m_loadingToaster: '',
};
},
methods: {
// 附带文案的Toast
startLoading(message = '加载中') {
this.$_m_loadingToaster = Toast.loading({ message, duration: 0, mask: true });
},
// 停止loading
stopLoading() {
this.$_m_loadingToaster.clear();
},
},
});
我们使用Vue的新API实现会是怎样的效果呢？
import { value } from 'vue';
import { Toast } from 'vant';
function useLoading() {
const toaster = value('');
const startLoading = () => {
toaster.value = Toast.loading({ message, duration: 0, mask: true });
}
const stopLoading = () => {
toaster.value.clear();
}
return { startLoading, stopLoading }
}
在组件中使用：
// 在组件中使用该函数
const Component = {
setup() {
const { startLoading, stopLoading } = useLoading()
return { startLoading, stopLoading };
}
}
看起来是不是好多了？来源清晰，作用可控，且没有新建Vue实例，引起不必要的性能开销。
当然也有不舒服的地方。
比如对于重型组件来说，在上方的setup函数中将要返回非常多的值才能在template中使用（展开运算符不能解决命名冲突且没有直观显示变量来源），看着是非常多余的，RFC中也承认了这一点：
Hooks 代码和 JSX 并置使得对值的使用更简洁也是其优点。
还有，怎么在composition function中使用scoped css呢？用css module吗？
另外，目前template的高亮问题，以及code intelligence支持非常不友好，当然对于大佬们来说这都是一个插件能解决的小事情。
最后
Vue和React越走越近。在我现在的直觉里，Vue倡导数据驱动，提供了非常多常用的设计模式语法糖，React倡导你自己弄。
回想起尤大之前在知乎的回答：
React 从一开始的定位就是提出 UI 开发的新思路。
Vue 从一开始的定位就是尽可能的降低前端开发的门槛，让更多的人能够更快地上手开发。
可见将来的Vue 3，也不会脱离拥抱传统、关注点分离的核心定位的，不会对现有的Vue项目造成毁灭性的打击。
我个人觉得编辑器的支持也是非常重要的一方面，如果template也能够得到同JSX般的支持（代码提示、跳转到定义、跳转到class等），不过偶尔会心里想这么一下，支持得这么缓慢，是在等我去写吗？
