Hooks上手

6 分钟读完

之前在reactConf大会上看到dan神关于hooks的演讲，很期待这个新特性，终于hooks在16.8发布了。

官网上也是第一时间出了hooks相关的一系列文档，接下来让我细细品味下，哧溜～

hooks的作用

文档第一句就指出，hooks让你在函数组件中可以使用react的诸多特性（状态，生命周期等），很明显，这是对函数组件的赋能，至于为什么这样做，文档中也给出了解释：

复用组件state相关的逻辑（不需要像高阶组件那样让你的组件层级变得复杂）
将组件的逻辑分成一个个函数，是的组件的逻辑更易测试，并且让组件更清晰

hooks API

useState

/*
 * @params initialValue: 状态的初始值
 * @return [yourState, setHandler]: 即你此次调用useState获得的状态变量yourState，
 *		以及设置这个变量值的函数setHandler
 */
function useState(initialValue) {
    // ...
}

useEffect, useLayoutEffect

/*
 * @params hookFunc: ToFixed
 * @params FireArray(Array): 只有当数组中任意一个变量的值改变的时候，才会执行hookFunc
 */
function useEffect(hookFunc, FireArray) {
    // ...
}

// useLayoutEffect与此api相同，只不过useEffect的hookFunc执行是异步的，而useLayoutEffect是同步的

useContext

/*
 * @params context: React.createContext()返回的context对象
 */
function useContext(context) {
    // ...
}

useReducer

一种用refux的模式管理组件state的hook

useCallback

/*
 * @params fn: 内联回调函数
 * @params inputs(Array): 回调函数中所需要的变量数组，在多次render的过程中，只有当数组中任何一个值改变时，回调函数才会被更新（=重新声明）
 *
 * @return 一个自动被记忆的回调函数
 */
function useCallback(fn, inputs) {
    // ...
}

useMemo

/*
 * @params fn: 一个函数
 * @params inputs(Array): 回调函数中所需要的变量数组，数组中任何一个值改变，才会重新执行fn函数
 *		否则将返回上一次执行的结果。
 *
 * @return 一个自动被记忆的变量
 */
function useMemo(fn, inputs) {
    // ...
}

useRef

一般来说，函数组件中定义一个变量，每次render的时候都会执行这条定义，但有时候我们想要一些变量在多次render中共用，这时候就可以调用useRef拿到一个ref对象，ref.current即可以被多次render共用，直到组件被unmount

useImperativeHandle

配合React.forwardRef()使用，在被当作参数传入forwradRef的函数组件中，我们可以用useImperativeHandle来自定义ref.current对象,往里面塞一些子组件中的东西。

使用hooks需要遵循的两点规则：

必须在函数组件的顶级作用域中，不能在块级作用域中（如循环，条件，嵌套函数）

这是因为react是根据hooks调用的顺序来匹配hooks函数返回的变量的，块极作用域可能会引起顺序变化。
只能在react组件函数或自定义hook函数中调用hooks

自定义hooks

自定义hooks的命名通常按照useXXX的格式，这并不是强制规定的，但是这个格式是lint插件检查语法的基准，所以最好还是按照这个格式来。

自定义hooks其实就一个调用了其他hooks的函数，仅此而已

整个hooks文档读下来，感觉api的用法不难理解，但hooks带来的新的设计模式还是需要尝试后才能有所体会，后面准备在自己的side project试用一下。

旅伴