在开始本章学习前,你需要了解的基本用法。

    如果你还未使用过Hooks,可以从官方文档 (opens new window)开始。

    你可以从了解Hooks的设计动机。作为一名框架使用者,了解设计动机对于我们日常开发就足够了。

    但是,为了更好的理解Hooks源码架构,我们需要转换身份,以框架开发者的角度来看待Hooks设计理念

    React LOGO的图案是代表原子atom)的符号。世间万物由原子组成,原子类型属性决定了事物的外观与表现。

    同样,在React中,我们可以将UI拆分为很多独立的单元,每个单元被称为Component。这些Component属性类型决定了UI的外观与表现。

    React中,我们可以说ClassComponent是一类原子

    但对于Hooks来说,与其说是一类原子,不如说他是更贴近事物运行规律电子

    我们知道,React的架构遵循schedule - render - commit的运行流程,这个流程是React世界最底层的运行规律

    ClassComponent作为React世界的原子,他的生命周期componentWillXXX/componentDidXXX)是为了介入React的运行流程而实现的更上层抽象,这么做是为了方便框架使用者更容易上手。

    相比于ClassComponent的更上层抽象,Hooks则更贴近React内部运行的各种概念(state | context | life-cycle)。

    作为使用React技术栈的开发者,当我们初次学习时,不管是官方文档还是身边有经验的同事,总会拿ClassComponent的生命周期来类比Hooks API的执行时机。

    这固然是很好的上手方式,但是当我们熟练运用Hooks时,就会发现,这两者的概念有很多割裂感,并不是同一抽象层次可以互相替代的概念。

    可能有些同学会回答,是useEffect

    但是componentWillReceiveProps是在render阶段执行,而useEffect是在commit阶段完成渲染后异步执行。

    所以,从源码运行规律的角度看待Hooks,可能是更好的角度。这也是为什么上文说HooksReact世界的电子而不是原子的原因。

    以上见解参考自

    总结

    Concurrent ModeReact未来的发展方向,而Hooks是能够最大限度发挥Concurrent Mode潜力的Component构建方式。

    正如Dan在React Conf 2018演讲结尾所说:你可以从ReactLOGO中看到这些围绕着核心电子飞行轨道Hooks可能一直就在其中。