React 生命周期与 Hooks 的关系

作为 React 初学者，使用过 React 一段时间之后，进行总结一下。

首先接触的项目类型是医学类「临床试验电子数据采集系统/数据管理系统」，项目中主要结合 fusion design、Bizcharts 等。

一、Hooks 组件

Hook 不会影响你对 React 概念的理解。 Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。Hook 还提供了一种更强大的方式来进行组合。

Q：React class 是有生命周期的，那么 React hooks 有没有生命周期呢？

A：函数组件的本质是函数，没有 state 的概念，因此不存在生命周期一说，它仅仅是一个 render 函数而已。但是引入 Hooks 后就不同了，它能让组件在不使用 class 的情况下使用 state 以及其他的 React 特性，相比与 class 的生命周期概念来说，它更接近于实现状态同步，而不是响应生命周期事件。

但我们可以利用 useState()、 useEffect() 和 useLayoutEffect() 来模拟实现生命周期。

想具体了解 生命周期 与 Hooks 的对应关系可参考

二、提取自定义 Hook

也可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

当我们想在多个函数之间共享逻辑时，我们会把它提取成一个公共的函数。而组件和 Hook 都是函数，所以也同样适用这种方式。

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。 例如，下面的 useStudyInfo 是我们第一个自定义的 Hook:

import { useEffect, useState } from 'react'

export default function useStudyInfo(studyId: number) {
    const [studyInfo, setStudyInfo] = useState(null)
    useEffect(() => {
        $api.studyDetail.studyInfo(studyId)
        .then((res) => {
            const { code, data, message } = res
            if (code === 0) {
                setStudyInfo(data)
            } else {
                Message.error(message)
            }
        })
    }, [])
    return studyInfo
}

此处 useStudyInfo 的 Hook 目的是为了获取当前登录的用户信息。

Q：自定义 Hook 必须以 'use' 开头吗？ A：是的，必须的。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含对其内部 Hook 的调用，React 将无法自动检查你的 Hook 是否违反了 Hook 的规则。

未完待续。。。