Vue3 究竟好在哪里？（和 React Hook 的详细对比）

逻辑重用 相信很多接触过 React Hook 的小伙伴已经对这种模式下组件间逻辑复用的简单性有了一定的认知，自从 React 16.7 发布以来，社区涌现出了海量的 Hook 轮子，以及主流的生态库 react-router，react-redux 等等全部拥抱 Hook，都可以看出社区的同好们对于 Hook 开发机制的赞同。

其实组件逻辑复用在 React 中是经历了很长的一段发展历程的， mixin -> HOC & render-props -> Hook，mixin 是 React 中最早启用的一种逻辑复用方式，因为它的缺点实在是多到数不清，而后面的两种也有着自己的问题，比如增加组件嵌套啊、props 来源不明确啊等等。可以说到目前为止，Hook 是相对完美的一种方案。

当然，我的一贯风格就是上代码对比，我就拿 HOC 来说吧，Github 上的一个真实的开源项目里就出现了这样的场景：

HOC 对比 Hook

class MenuBar extends React.Component { handleClickNew () { const readyToReplaceProject = this.props.confirmReadyToReplaceProject( this.props.intl.formatMessage(sharedMessages.replaceProjectWarning) ); this.props.onRequestCloseFile(); if (readyToReplaceProject) { this.props.onClickNew(this.props.canSave && this.props.canCreateNew); } this.props.onRequestCloseFile(); } handleClickRemix () { this.props.onClickRemix(); this.props.onRequestCloseFile(); } handleClickSave () { this.props.onClickSave(); this.props.onRequestCloseFile(); } handleClickSaveAsCopy () { this.props.onClickSaveAsCopy(); this.props.onRequestCloseFile(); } }

export default compose( injectIntl, MenuBarHOC, connect( mapStateToProps, mapDispatchToProps ) )(MenuBar);

没错，这里用 compose 函数组合了好几个 HOC，其中还有 connect 这种 接受几个参数返回一个接受组件作为函数的函数 这种东西，如果你是新上手（或者哪怕是 React 老手）这套东西的人，你会在 「这个 props 是从哪个 HOC 里来的？」，「这个 props 是外部传入的还是 HOC 里得到的？」这些问题中迷失了大脑，最终走向堕落（误）。

不谈 HOC，我的脑子已经快炸开来了，来看看用 Hook 的方式复用逻辑是怎么样的场景吧？

function MenuBar () { // 菜单 const { onClickRemix, onClickNew } = useMenuBar() // 国际化 const { intl } = useIntl() }

export default MenuBar 一切都变得很明朗，我可以非常清楚的知道这个方法的来源，intl 是哪里注入进来的，点击了 useMenuBar 后，就自动跳转到对应的逻辑，维护和可读性都极大的提高了。

当然，这是一个比较「刻意」的例子，但是相信我，我在 React 开发中已经体验过这种收益了。随着组件的「职责」越来越多，只要你掌握了这种代码组织的思路，那么你的组件并不会膨胀到不可读。

常见的请求场景 再举个非常常见的请求场景。

在Vue2中如果我需要请求一份数据，并且在loading和error时都展示对应的视图，一般来说，我们会这样写：

failed to load

loading...

hello {{fullName}}!