Learn React Hooks

定义

它是一个函数组件使用的，用来在组件的各个生命周期执行的函数

有哪些

• useState 用来定义组件的 state
• useEffect 引入组件的副作用方法，比如调用接口、订阅事件、操作 DOM 等
• useContext 使用 context 上下文

规则

1. 它只能定义在最顶级的方法里，不能使用在条件、嵌套、循环中
2. 它只能在函数组件（函数名大写开头）里调用，不能再普通的函数中调用
3. 它在函数组件里是按照定义的顺序执行
4. 它在每次 render 之后都会执行，包括第一次 render

好处

• 使用函数编写的组件更精简
• 状态的定义以及逻辑方便统一在一个方法里
• 相对独立的逻辑能写在一起，比如事件的绑定和移除
• 通过自定义 hook 可以更好的用函数复用组件共有的逻辑

自定义 hook

• 自定义 hook 是一个以 use 开头的函数，它可以调用其它的 hooks
• 命名推荐以 use 开头
• 多个组件调用自定义 hook 不会共用 hook 里的状态
• 因为每次调用自定义组件都是独立状态，就像 useState 多次调用都会有一个独立的状态

import { useEffect } from 'react'
import { EventCenter } from '../utils'

function useLoadMore(callback) {
    function loadMore() {
        callback && callback()
    }

    useEffect(() => {
        EventCenter.on(EventCenter.EVENT_LOAD_MORE, loadMore)

        return (() => {
            EventCenter.off(EventCenter.EVENT_LOAD_MORE, loadMore)
        })
    })
}

export default useLoadMore