Hooks 邂逅 MobX ，代码变得更丝滑了！

发表于 3年以前 | 总阅读数：598 次

React 16.8 正式推出 Hooks 至今已经两年多了，有些朋友却一直觉得这是个新技术，对上手使用 Hooks 仍然处于观望状态，即使大多数使用React 技术栈的公司，他们所开发的项目也是多数采用React.Component的形式。

还有些朋友想要使用 React Hooks 来重构升级部分业务，或者封装优化一些通用的业务组件，来提升项目的可扩展性，但是却困于不知如何在 Hooks 中继续使用Mobx 这一状态管理库了，使用过程中感觉畏手畏脚奇奇怪怪的。

其实吧，Mobx 作为当下炙手可热的状态管理库，很早就推出了 v6 版本，紧跟技术潮流，极大的方便了我们在 Hooks 环境下，更好的对 React 进行状态管理。我想这也是它炙手可热的原因之一吧！

这篇文章主要想深入研究一下，Mobx 和 React Hooks 两者的一个配合使用，可以极大的提高开发体验，学习成本也相对偏低。

如果你对 Mobx 及 Hooks 感兴趣，想要更进一步了解并使用，那么这边文章非常适合你。

阅读之前请注意：

本文不会介绍太过于基础的内容，你需要对 Mobx 以及 Hooks 有基础的了解;
本文会介绍一些配合应用的最佳实践，方便小伙伴们有一个更加深入的认识。

接下来我们开始学习吧！

Hooks很强大，为何还需要Mobx?

不可否认，Hooks很强大，而且我认为，尤大大的 Vue3 很大程度上也参考了 React Hooks 的实现，虽然两者实现存在差异，但是思想是可以借鉴的。（仅代表个人观点，望各位大佬不想吐槽我）

但是呢，在实际开发过程中，纯粹使用Hooks 的话，还是会遇到一些问题：

依赖传染性 —— 这导致了开发复杂性的提高、可维护性的降低
缓存雪崩 —— 这导致运行性能的降低
异步任务下无法批量更新 —— 这也会导致运行性能的降低

没明白啥意思对不对？很正常！再听我来给你解释。

使用Hooks 编写代码时候，你必须清楚代码中useEffect和useCallback的“依赖项数组”的改变时机。有时候，你的useEffect 依赖某个函数的不可变性，这个函数的不可变性又依赖于另一个函数的不可变性，这样便形成了一条依赖链。一旦这条依赖链的某个节点意外地被改变了，你的 useEffect 就被意外地触发了。

是不是感觉比传统的React.Component 更伤脑细胞？

为什么说是缓存雪崩呢？造成这个问题主要是因为 Hooks 函数运行是独立的，每个函数都有一份独立的作用域。函数的变量是保存在运行时的作用域里面，这里也可以理解成闭包。每次都会创建闭包数据，从性能角度来讲，此时缓存就是必要的了。而缓存就会牵扯出一堆问题。另外当我们有异步操作的时候，经常会碰到异步回调的变量引用是之前的，也就是旧的，于是就导致无法批量更新。

其实 Hooks 这些问题都是因为没有一个公共的空间来共享数据导致的，在 Class 组件中，我们有 this , 在 Vue3 中，我们有 setup作用域。Hooks 你只能依靠useRef + ref.current 来 hack 了。但它极其不优雅，丢失了函数编程的味道。

我们是有追求的程序猿，当然不能这样就了事。

这时候你是不是也想到了我们的 Mobx ，它不就是提供统一作用域的神器吗？

这就是Hooks很强大，还是需要Mobx 的原因！

Mobx 为 Hooks 准备的倚天屠龙 API

Hooks 存在的问题，我们刚刚介绍过了，Mobx 在 v6 版本中推出的API 又是如何在保留 Hooks 的强大特性的前提下，帮她搞定这些问题的呢？

我们先介绍一下这两个 API:

01 useLocalStore

Mobx 推荐使用 useLocalStore 来组织组件的状态。其实它就是在 Hooks 的环境下封装的一个更加方便的 observable。作用就是给它一个函数，函数返回一个需要响应式的对象。

const store = useLocalStore(() => ({key: 'value'}))

它就等价于

const [store] = useState(() => observable({key: 'value'}))

这个 API 看着是不是平平无奇，但是就是它的存在，为Hooks 解决了依赖传递和缓存雪崩的问题。它作为一个不变的对象存储数据，可以保证不同时刻对同一个函数的引用保持不变，任意时刻都可以引用到同一个对象或者数据。不再需要手动添加相关的 deps 。可以避免 useCallback 和 useRef 的滥用，同时解决了 Hooks 带来的闭包相关的坑。

02 useObserver

Mobx 使组件响应数据状态的变化主要有以下三种方式：

observer HOC
Observer Component
useObserver Hooks

传统React.Component 中使用 mobx 时候我们使用 observer HOC 的方式，它的主要能力是给类组件提供 pure component 的能力，可以将类组件的 props 和 state 转换为 observable 态，从而来响应数据状态的变化。

同样，这种 HOC 形式也可以直接在 Hooks 中正常使用。但是 Hooks 并不推荐 HOC 的方式。于是乎就出现了 useObserver。

import React from 'react';
import { useObserver, useLocalStore } from 'mobx-react';
import {store} from './store';

function Demo1() { 
    const localStore = useLocalStore(() => store);
    return useObserver(() => <div onClick={localStore.setCount}>{localStore.count}</div>)
}

有没有感觉很丝滑，直接将要返回的 Node 使用useObserver 包裹后再 return 就 ok 了。

如此简单的一步就可以使得这个组件成功的监听数据变化了，当数据变化的时候，组件自动 re-render 当前组件。关于Observer Component 这种方式在最新版本的 Mobx 中，已经变为基于useObserver 来实现了。也可以配合 Hooks 丝滑使用，好像最新版本的 Mobx 更加推荐这种方式。

import React from 'react';
import { Observer, useLocalStore } from 'mobx-react';
import {store } from './store';

// 更新Observer包裹的位置，注意这里包裹的必须是一个函数
function Demo2() { 
    const localStore = useLocalStore(() => store);
    return <Observer>{() => <span>{localStore.count}</span>}</Observer>
}

Hooks + Mobx = 效率

有了以上两个API 后，我们开发一个组件时候，只需要这么几步：

1、创建store

import { action, observable } from 'mobx';

class Store {
    @observable
    count = 1;

    @action
    setCount = () => {
        this.count++;
    }
}
export const store = new Store();

2、注入store，既可以在class中使用，也可以在hooks中使用

// 注入store
import { Provider } from 'mobx-react';
import {store} from './store';

function App () {
  return (
    <Provider store={store}>
      <Demo />
    </Provider>
  )
}

3、Demo 使用

Class 使用方法

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

@inject('scope')
@observer
class Demo1 extends Component { 
    render() {
        return <div>{this.props.count}</div>
    }
}

Hooks 使用方法

import React from 'react';
import { useObserver, Observer, useLocalStore } from 'mobx-react';
import {store } from './store';

// 方法1
function Demo1() { 
    const localStore = useLocalStore(() => store);
    return useObserver(() => <div onClick={localStore.setCount}>{localStore.count}</div>)
}

// 方法2
function Demo2() { 
    const localStore = useLocalStore(() => store);
    return <Observer>{() => <span>{localStore.count}</span>}</Observer>
}

最后，通过以下两个例子，可以观摩下， Hooks 配合 Mobx 的那种丝滑感：

1、mobx 通过两个 API 避免了 useRef 的滥用。

/**
* 实现一个方法，只有当鼠标移动超过多少像素之后，才会触发组件的更新
*/

// props.size 控制移动多少像素才触发回调
function MouseEventListener(props) {
    const [pos, setPos] = useState({x: 0, y: 0})
    const posRef = useRef()
    const propsRef = useRef()
    // 这里需要用 Ref 存储最新的值，保证回调里面用到的一定是最新的值
    posRef.current = pos
    propsRef.current = propsRef

    useEffect(() => {
        const handler = (e) => {
            const newPos = {x: e.xxx, y: e.xxx}
            const oldPos = posRef.current
            const size = propsRef.current.size
            if (
                Math.abs(newPos.x - oldPos.x) >= size
                || Math.abs(newPos.y - oldPos.y) >= size
            ) {
                setPos(newPos)
            }
        }
        // 当组件挂载的时候，注册这个事件
        document.addEventListener('mousemove', handler)
        return () => document.removeEventListener('mousemove', handler)
    }, [])

    return (
        props.children(pos.x, pos.y)
    )
}

// 用 mobx 改写之后，这种使用方式远比原生 hooks 更加符合直觉。
// 不会有任何 ref，任何 current 的使用，任何依赖的变化
function MouseEventListenerMobx(props) {
    const state = useLocalStore(target => ({
        x: 0,
        y: 0,
        handler(e) {
            const nx = e.xxx
            const ny = e.xxx
            if (
                Math.abs(nx - state.x) >= target.size ||
                Math.abs(ny - state.y) >= target.size
            ) {
                state.x = nx
                state.y = ny
            }
        }
    }), props)

    useEffect(() => {
        document.addEventListener('mousemove', state.handler)
        return () => document.removeEventListener('mousemove', state.handler)
    }, [])

    return useObserver(() => props.children(state.x, state.y))
}

2、针对异步数据的批量更新问题，mobx 的 action 可以很好的解决这个问题。

// 组件挂载之后，拉取数据并重新渲染。不考虑报错的情况
function AppWithHooks() {
    const [data, setData] = useState({})
    const [loading, setLoading] = useState(true)
    useEffect(async () => {
        const data = await fetchData()
        // 由于在异步回调中，无法触发批量更新，所以会导致 setData 更新一次，setLoading 更新一次
        setData(data)
        setLoading(false)
    }, [])
    return (/* ui */)
}

function AppWithMobx() {
    const store = useLocalStore(() => ({
        data: {},
        loading: true,
    }))
    useEffect(async () => {
        const data = await fetchData()
        runInAction(() => {
            // 这里借助 mobx 的 action，可以很好的做到批量更新，此时组件只会更新一次
            store.data = data
            store.loading = false
        })
    }, [])
    return useObserver(() => (/* ui */))
}

好了，放心的把 Mobx+Hooks 加入到自己的项目中去吧~