React-hooks实战总结

共计 10699 个字符，预计需要花费 27 分钟才能阅读完成。

react 于 19 年 2 月份在 16.8 版本中新增了 hook 这一特性，已经过去了半年多了，社区的各种文章解析页汗牛充栋，本文将结合自己的项目实践，对 react hooks 做一个全面的讲解，俗话说没吃过猪肉，还没见过猪跑吗？确实，可能大部分同学对 hooks 特性都有了自己的了解，但是在实际项目中使用又是另一回事了，实践出真知，这篇文章是自己对 react hooks 的理解，也是在上一个项目中使用 react hooks 的总结
看着猪跑一千次，不如自己吃一次猪肉。

官方解释：hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
个人理解：让传统的函数组件 function component 有内部状态 state 的函数function。

在以往的 react 开发流程中，我们的自定义组件通常需要定义几个生命周期函数，在不同的生命周期处理各自的业务逻辑，有可能他们是重复的。

解决上一个问题我们通常通过 mixins（不推荐）或者 HOC 实现，在 hooks 出现之前，的确是非常好的解决途径，但是它不够好，为什么这么说呢？来看一下我们的一个具有中英文切换，主题切换同时 connect 一些redux 状态仓库里面的数据的全局组件alert:

```export default translate('[index,tips]')(withStyles(styles, { withTheme: true})(connect(mapStateToProps,mapDispatchToProps)(Alert)));```

其实如果我们还可以将 `withTheme` 也提取成一个高阶函数，那么我们的组件就将由现在的 3 层变成 4 层，实际使用的时候可能还有别的属性通过别的高阶函数添加，嵌套层级就会更深。给人明显的感觉就是不够直观。

this 指向问题，react 绑定 this 有几种方式？哪一种方式性能相对来说好一些？

  如果你答不上来，可以戳一下下面两个链接。- [React 事件处理](https://zh-hans.reactjs.org/docs/handling-events.html)。- [React.js 绑定 this 的 5 种方法](https://juejin.im/post/5b13c3a16fb9a01e75462a64)。

hook 只能在 FunctionComponent 内部使用, 而相比 ClassComponent，传统的FunctionComponent(FC) 具有更多的优势, 具体体现在：

- FC 容易测试，相同的输入总是有相同的输出，- FC 其实就是普通的 `javascript` 函数，相比于 `ClassComponent`，具有潜在的更好的性能。- FC 没有生命周期函数，更容易 `debug`。- FC 具有更好的可重用性。- FC 可以减少代码耦合。- [September 10th, 2018 Comments React Functional or Class Components: Everything you need to know](https://programmingwithmosh.com/react/react-functional-components/)。- [45% Faster React Functional Components, Now](https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f)。- `FC` 有更多的优势，但是他没有生命周期，也没有自己的内部状态，我们需要复杂的状态管理机制的时候，不得不转向 `ClassComponent`。FC 现有的这些问题，我们能轻松结合 `hook` 解决。

React 目前官方支持的 hook 有三个基础 Hook：
useState,
useEffect,
useContext,
和几个额外的 Hook：
useReducer,
useCallback,
useMemo,
useRef,
useImperativeHandle,
useLayoutEffect,
useDebugValue ,
他们的作用各不相同，但是可以这么总结一下：让 Function Component 有状态 (state)，流氓不可怕，就怕流氓有文化。当我们给比较有优势的 FC 插上state 的翅膀之后，他就要起飞了。原来 ClassComponent 能干的事情他也能干起来了，加上前文分析的优势，还干的更加有声有色。这里我们使用 useState 做一个全面的解析,
首先我们来看一下一个简单的的计数器，点击 click 按钮，state 加 1 并渲染到页面上：

ClassComponent实现：
```
import React from 'react';
interface ITestState {count: number;}
class Test extends React.Component<{}, ITestState> {constructor(props: {}) {super(props);
        this.state = {count: 0};
    }
    public handleClick = () => {const { count} = this.state;
        this.setState({count: count + 1});
    }
    public render() {
        return (
            <>
                <div>{this.state.count}</div>
                <button onClick={this.handleClick}>click</button>
            </>
        );
    }
}
export default Test;
```
hooks实现:
```
import React, {useState} from 'react';
const Test: React.FunctionComponent<{}> = () => {const [count, setCount] = useState<number>(0);
    return (
        <>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>click</button>
        </>
    );

};
export default Test;
```
- 对比两种实现，直观感受是代码变少了，没错，也不用关心 this 指向了，ClassComponent里面通过 class fields 正确绑定回调函数的 this 指向，使得我们在 handleClick 函数中能正确的访问 this，并调用this.setState 方法更新state。
```
public handleClick = () => {const { count} = this.state;
        this.setState({count: count + 1});
    }
```
深入源码分析 hooks, 这里我们以刚使用过的 hook useState为例，看看他是怎么管理我们的 FC state 的。
```
 export function useState<S>(initialState: (() => S) | S) {const dispatcher = resolveDispatcher();
     return dispatcher.useState(initialState);
 }
```
这个函数接收一个参数 initialState: (() => S) | S, 初始 state 的函数或者我们的 state 初始值。
然后调用
dispatcher.useState(initialState);, 这里我们看一下dispatcher 是怎么来的：
```
function resolveDispatcher() {
    const dispatcher = ReactCurrentDispatcher.current;
    ...
    return dispatcher;
}
```
发现是通过 ReactCurrentDispatcher.current 得到，那 ReactCurrentDispatcher 又是何方神圣呢？
```
我们进一步看看它怎么来的
```
```
import type {Dispatcher} from 'react-reconciler/src/ReactFiberHooks';

const ReactCurrentDispatcher = {current: (null: null | Dispatcher),
};
export default ReactCurrentDispatcher;
```
根据 type，我们可以判断 dispatcher 的类型是 react-reconciler/src/ReactFiberHooks 里面定义的 Dispatcher, 可以看到这个 current 属性是个 null。那它是什么时候被赋值的呢？
我们来看看 functionComponent 的 render 过程renderWithHooks，
```
export function renderWithHooks(
    current: Fiber | null,
    workInProgress: Fiber,
    Component: any,
    props: any,
    refOrContext: any,
    nextRenderExpirationTime: ExpirationTime,
): any{
    ....
    if (__DEV__) {ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;} else {
        ReactCurrentDispatcher.current =
        nextCurrentHook === null
            ? HooksDispatcherOnMount
            : HooksDispatcherOnUpdate;
    }

}
```
这里 react 源码根据 nextCurrentHook 做了一些判断，我移除掉了，只关注 ReactCurrentDispatcher.current 的值，可以看到它的取值分为两种，HooksDispatcherOnMount和 HooksDispatcherOnUpdate分别对应 mount/update 两个组件状态; 这里我们先看HooksDispatcherOnMount：
```
const HooksDispatcherOnMount: Dispatcher = {
...
useState: mountState,
...
};
```
这就是我们寻寻觅觅的 Dispatcher 的长相，最终我们 useState 在组件 mount 的时候执行的就是这个 mountState 了，那我们就迫不及待如饥似渴的来看看 mountState 又做了什么吧。
```
function mountState<S>(initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {const hook = mountWorkInProgressHook();
if (typeof initialState === 'function') {initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
const queue = (hook.queue = {
    last: null,
    dispatch: null,
    lastRenderedReducer: basicStateReducer,
    lastRenderedState: (initialState: any),
});
const dispatch: Dispatch<
    BasicStateAction<S>,
> = (queue.dispatch = (dispatchAction.bind(
    null,
    // Flow doesn't know this is non-null, but we do.
    ((currentlyRenderingFiber: any): Fiber),
    queue,
): any));
return [hook.memoizedState, dispatch];
}
```
进入这个函数首先执行的 mountWorkInProgressHook() 获取到当前的 workInProgressHook, 看这个名字就知道他是和workInProgress 分不开了，这个 workInProgress 代表了当前正在处理的 fiber，fiber是当前组件的需要完成或者已经完成的 work 的对象, 也可以理解为我们的这个正在执行 mountState 的组件的各种数据和状态的集合。我们来具体的看一下 mountWorkInProgressHook 的执行逻辑：
```
function mountWorkInProgressHook(): Hook {
    const hook: Hook = {
        memoizedState: null,
        baseState: null,
        queue: null,
        baseUpdate: null,
        next: null,
    };

    if (workInProgressHook === null) {
    // This is the first hook in the list
        firstWorkInProgressHook = workInProgressHook = hook;
    } else {
    // Append to the end of the list
        workInProgressHook = workInProgressHook.next = hook;
    }
    return workInProgressHook;
}
```
判断当前 fiber 的workInProgressHook是不是 null，如果是，将全新的 hook 赋值给全局的workInProgressHook 和firstWorkInProgressHook，否则，将初始值赋值给 workInProgressHook。相当于mountState 里面的 hook 值就是
```
    const hook: Hook = {
        memoizedState: null,
        baseState: null,
        queue: null,
        baseUpdate: null,
        next: null,
    };
```
实际上，workInProgressHook 是这样的一个链表结构，React 里面广泛使用了这样的结构存储副作用。
```
{
    memoizedState: null,
    baseState: null,
    queue: null,
    baseUpdate: null,
    next: {
        ...
        next: {
            ...
            next: {next: {...},
                ...
            },
        },
    }
}
```
继续往下看：
```
if (typeof initialState === 'function') {initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
```
useState 接收的参数类型如果是函数，这里就会执行传进来的函数获取 initialState，赋值给hook.memoizedState = hook.baseState 这两个属性，再往下，建立了当前 hook 的更新队列 queue:<UpdateQueue>，这个我们后续再讲，这里暂时不用知道。继续往下看，是我们修改 state 的回调函数，通常是 setState，通过改变dispatchAction 的 this 指向，将当前 render 的 fiber 和上面创建的 queue 作为参数传入，当我们执行 setState 的时候实际上调用的就是这里的 dispatchAction，最后一行：
return [hook.memoizedState, dispatch];
将state 和setState以数组的形式返回，这也是我们使用 useState hook 的正确姿势。到这里相信大家都很清楚了，useState通过将我们的初始 state 暂存到 workInProgressHook 的memoizedState中，每次更新的时候通过 dispatchAction 更新 workInProgressHook。
我们回过头来再看看刚才没深入过的queue，通过类型我们可以知道他是<UpdateQueue>，具体看看<UpdateQueue> 的定义：
```
type UpdateQueue<S, A> = {
    last: Update<S, A> | null,
    dispatch: (A => mixed) | null,
    lastRenderedReducer: ((S, A) => S) | null,
    lastRenderedState: S | null,
};
```
看到这个结构，熟悉 react fiber 的同学已经心中有数了，它的 last 属性是一个链表，用来存储当前 hook 的变化信息，能够通过 next 迭代处理所有变更信息和状态。这里我们就到此为止，感兴趣的同志可以自行深入琢磨，对于这个 hook，掌握到这里已经够了，很多文章说useState 和useReducer的基友关系，从这里我们就看出来了，useState最终使用的也是 useReducer 一致的 api，通过类似 redux 的理念，通过 dispatchAction 修改 state，有兴趣的同志可以看这里useReducer 源码；

- 其他的 hook 就不展开了，感兴趣的同志可以去看看源码，欢迎交流探讨。

阿西吧，东拉西扯的到了这块最有趣的地方。这块以项目中实际用到的几个 hook 来举例说明。先说一下，其实官方的 hook 已经很多很全了，状态我们可以 useState，复杂多状态我们可以用useReducer，共享和传递状态可以使用useContext，引用组件、引用状态可以useRef，组件 render 完成之后的操作通过useEffect 完成 … 还有其他几个 hook，那么我们为什么还需要自定义 hooks 呢？

其实，自定义 hook 也是基于官方的 hook 进行组合，逻辑复用，业务代码解耦抽象后进一步提炼出来的具备一定功能的函数。它应当具有一定条件下的的通用性，可移植性。
目前的 hook 可能并不十分契合我们的需求，我们需要进行二次加工，成为我们的业务 hook，官方推荐自定义 hook 命名以 use 开头。

在项目过程中有这样一个业务场景，许多个地方（几十到几百不等）需要监听 window.onload 事件，等待 onload 后执行特定的业务逻辑，如果 window 已经 load，需要返回当前的，同时希望拿到 window loaded 的状态，处理后续的其他逻辑，这里我们将业务逻辑用这个函数表示一下：
```
const executeOnload:()=>{alert('alert after loaded')}
```
传统的实现思路：
```
{if(window.loaded)executeOnload();return;
    const old = window.onload;
        window.onload = () => {
            window.loaded = true;
            executeOnload();
            old && old();};
}
```
在使用我们的自定义 hook useWindowLoad 之后
```
const isWindowLoaded= useWindowLoad(executeOnload)
```
每一处需要监听的地方都变得十分简单有没有，话不多说，直接上码：
```
export default function useWindowLoad(func?: (params?: any) => any): boolean {useEffect(() => {let effect: (() => void) | null = null;
    const old = window.onload;
    window.onload = () => {effect = func && func();
        old && old();
        window.loaded = true;
    };
    return () => {if (typeof effect === 'function') {effect();
        }
    };
});
return window.loaded;
})
```
最后，我们返回 load 状态。这里我们主要使用了 useEffect 这个 hook，并在接受的参数的返回值中清除了对应的副作用。useEffect 在每次组件 render 完成后执行，具体使用参考文档。注意，副作用的清除很重要，因为我们不能保证传入的回调函数不会带来副作用，所以使用时应该传递 return 一个函数的函数作为参数

这样一个场景：我们需要一个全局的消息提示，已经写好了一个全局组件，并通过 redux 管理状态控制 Message 的显示和隐藏，这其实是一个很常见的功能，在使用 hook 之前，我们的实现可能是这样的：

 import React from 'react';
 import {connect} from 'react-redux';
 import {message} from './actions';
 import Errors from './lib/errors';

 interface IDemoProps {message(params: Message): void;
 }
 const mapStateToProps = (state: IStore) => ({});
 const mapDispatchToProps = (dispatch: any) => ({message: (params: Message) =>dispatch(message(params)) 
 });
 class Demo extends React.Component<IDemoProps, {}> {public handleClick() {this.props.message({ content: Errors.GLOBAL_NETWORK_ERROR.message, type: 'error', duration: 1600, show: true});
     }
     public render() {return <button className='demo' onClick={this.handleClick}>click alert message</button>;
     }
 }

 export default connect(mapStateToProps, mapDispatchToProps)(Demo);

每次我们要使用就得 mapDispatchToProps，引入 action,connect，... 繁琐至极，我们也可以用 ** 高阶组件 ** 包装一下，透传一个 message 函数给需要的子组件，这里我们使用自定义 hook 来解决，先看看最终达到的效果：

 import React from 'react';
 import Errors from './lib/errors';

 const Demo: React.FC<{}> = () => {const message = useMessage();
     const handleClick = () => {message.info(content: Errors.GLOBAL_NETWORK_ERROR.message);
     };
     return <button className='demo' onClick={handleClick}>alert message</button>;
 };
 export default Demo;

简单了许多，每次需要全局提示的地方，我们只需要通过 `const message = useMessage();`
然后再组件内部任何地方使用 `message.info('content')`,`message.error('content')`,`message.success('content')`,`message.warn('content')` 即可, 再也不关心 action，redux connect 等一系列操作。我们来看看这个逻辑如何实现的：

 import {useDispatch} from 'react-redux';
 import {message as alert} from '../actions/index';
 export default function useMessage() {const dispatch = useDispatch();
     const info = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'info'}));
     const warn = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'warn'}));
     const error = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'error'}));
     const success = (content: Partial<Message>['content']) => dispatch(alert({ content, duration: 3000, show: true, type: 'success'}));
     const message = {
         success,
         info,
         warn,
         error
     };
     return message;
 }

我们内部使用 useDispatch 拿到 dispatch，封装了四个不同功能的函数，直接对外提供封装好的对象，就实现使用上了类似 antd message 组件的功能，哪里需要哪里 useMessage 就可以开心的玩耍了。- 项目中还有其他的自定义 hook，但是思路很上面两个一致，提取共性，消除副作用。这里给大家推荐一个自定义的 hook 的一个[站点](https://usehooks.com)。我从这里吸收了一些经验。

文章写得杂乱，各位多多包含，有不对的地方欢迎指正。限于篇幅太长，其他 hook 就不一一细说了，有兴趣，有问题的同学欢迎交流探讨。
距离 hook 提出大半年了，很多第三方库也逐渐支持 hook 写法，现在使用起来遇到坑的机会不多了。总体写起来比 class 写法舒服，不过对几个基础 hook，特别是useState，useEffect 的掌握十分重要，结合 setTimeout，setInterval 往往会有意料之外的惊喜，网上文章也很多，往往需要。目前项目还没写完，目前看来，选择 React hook 赚到了, 过程中也学习了不少知识。

React hooks 实战总结

一、什么是 hooks？

二、为什么需要 hooks？

三、useState hook 的执行过程追踪

四、自定义 hooks

useWindowLoad

useMessage

五、总结

Just My Socks（注册教程内含优惠码）