React Hooks 还不如类？

本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。

在这篇文章中，作者按照官方文档的描述，分析用 React Hooks 代替类的动机，一如标题所示，作者并不是很喜欢这一特性。

动机 1：类令人困惑

我们发现，类可能是学习 React 道路上的一大障碍。你必须了解 this 在 JavaScript 中的工作机制，这和大多数语言中的机制截然不同。你必须记得绑定事件处理程序。没有不稳定的语法提案，代码就非常冗长，React 中函数和类组件之间的区别，以及何时该使用哪一个的话题，即便在经验丰富的 React 开发人员之间也存在分歧。

好的，我同意当你刚开始使用 Javascript 时，this 可能会有些令人头疼，但是箭头函数解决了这种困惑；而且调用一个 Typescript 已经开箱支持的阶段 3 特性都被称作是“不稳定的语法提案”，这就纯粹是耸人听闻。React 团队指的是 类字段 语法，这种语法已经被广泛使用并且可能很快就会得到正式支持：

 复制代码

classFooextendsReact.Component{
onPress = () => {
console.log(this.props.someProp);
}
render() {
return<ButtononPress={this.onPress} />
}
}

如你所见，使用类字段箭头函数时，你无需在构造函数中绑定任何内容，并且 this 始终指向正确的上下文。

如果类是令人困惑的，那么新的 hooked 函数又能强到哪儿去呢？一个 hooked 函数并不是一个常规函数，因为它具有状态，有一个看上去很奇怪的 this（也就是 useRef），并且可以具有多个实例。但它绝对不是类，而是介于两者之间，后文我都会叫它 Funclass 。那么，对于人类和机器而言，那些 Funclass 理解起来会更容易吗？机器这边我不确定，但我真的不认为 Funclass 从概念上来讲比类更容易理解。类是一个广为人知且经过深思熟虑的概念，每位开发人员都熟悉 this 的概念，就算在 javascript 中有所不同也不是大事。相比之下，Funclass 是一个新概念，一个很奇怪的概念。它们更像是魔法，而且过多地依赖约定而不是严格的语法。你必须遵循一些 严格而怪异的规则 ，需要注意代码放置的位置，并且这里面存在许多陷阱。我不能将一个hook 放在一个if 语句中，因为hooks 的内部机制是基于调用顺序的，这简直太疯狂了！这种事情更像是半吊子的POC 库会做出来的，而不是像React 这样的知名库中应该做的。而且我们还要准备好接受一些可怕的名称，例如useRef（this 的一个花哨的叫法）、useEffect、useMemo、useImperativeHandle（这啥？）等等。