关于前端:手写一个mini版本的React状态管理工具

手写一个 mini 版本的 React 状态管理工具

目前在 React 中，有很多各式各样的状态管理工具，如：

• React Redux
• Mobx
• Hox

每一个状态管理工具都有着不尽相同的 API 和应用形式，而且都有肯定的学习老本，而且这些状态管理工具也有肯定的复杂度，并没有做到极致的简略。在开发者的眼中，只有用起来比较简单，那么才会有更多的人去应用它，Vue 不就是因为应用简略，上手快，而风行的吗？

有时候咱们只须要一个全局的状态，防治一些状态和更改状态的函数就足够了，这样也达到了最简化准则。

上面让咱们一起来实现一个最简略的状态管理工具吧。

这个状态管理工具的外围就应用到了 Context API, 在理解本文之前务必先理解并相熟应用这个 API 的用法。

首先咱们来看这个状态管理工具是如何应用的。假如有一个计数器状态，而后咱们通过二个办法别离去批改计数器，也就是做加法和减法，换句话说咱们须要用到一个计数器状态，二个办法来批改这个状态。在 React 函数组件中，咱们应用 useState 办法来初始化一个状态，因而，咱们能够很容易的写出如下代码：

import {useState} from 'react'
const useCounter = (initialCount = 0) => {const [count,setCount] = useState(initialCount);
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    return {
        count,
        increment,
        decrement
    }
}
export default useCounter;

当初，让咱们创立一个组件来应用这个 useCounter 钩子函数，如下:

import React from 'react'
import useCounter from './useCounter'

const Counter = () => {const { count,increment,decrement} = useCounter();
    return (
        <div className="counter">
            {count}
            <button type="button" onClick={increment}>add</button>
            <button type="button" onClick={decrement}>plus</button>
        </div>
    )
}

而后在根组件 App 当中应用，如下:

import React from 'react'
const App = () => {
    return (
        <div className="App">
            <Counter />
            <Counter />
        </div>
    )
}

这样，一个计数器组件就功败垂成了，可是真的只是这样吗？

首先，咱们应该晓得计数器组件的状态应该是统一的，也就是说咱们的计数器组件应该是共享同一个状态，那么如何共享同一个状态？这时候就须要 Context 出场了。将以上的组件革新一下，咱们将状态放在根组件 App 当中初始化，并且传到子组件中去。先批改 App 根组件的代码如下:

新建一个 CounterContext.ts 文件，代码如下:

const CounterContext = createContext();
export default CounterContext;

import React,{createContext} from 'react'
import CounterContext from './CounterContext'

const App = () => {const { count,increment,decrement} = useCounter();
    return (
        <div className="App">
            <CounterContext.Provider value={{count,increment,decrement}}>
                <Counter />
                <Counter />
            </CounterContext.Provider>
        </div>
    )
}

而后在 Counter 组件代码咱们也批改如下:

import React,{useContext} from 'react'
import CounterContext from './CounterContext'

const Counter = () => {const { count,increment,decrement} = useContext(CounterContext);
    return (
        <div className="counter">
            {count}
            <button type="button" onClick={increment}>add</button>
            <button type="button" onClick={decrement}>plus</button>
        </div>
    )
}

如此一来，咱们就能够共享 count 状态，无论是在多深的子组件当中应用都没有问题，然而这并没有完结，让咱们持续。

尽管这样应用解决了共享状态的问题，可是咱们发现，咱们在应用的时候还要额定的传入一个 context 名，所以咱们须要包装一下，到最初，咱们只须要像如下这样应用：

const Counter = createModel(useCounter);
export default Counter;

const {Provider,useModel} = Counter;

而后咱们的 App 组件就应该是这样:

import React,{createContext} from 'react'
import counter from './Counter'

const App = () => {const { Provider} = counter;
    return (
        <div className="App">
            <Provider>
                <Counter />
                <Counter />
            </Provider>
        </div>
    )
}

持续批改咱们的 Counter 组件，如下:

import React,{useContext} from 'react'
import counter from './Counter'

const Counter = () => {const { count,increment,decrement} = counter.useModel();
    return (
        <div className="counter">
            {count}
            <button type="button" onClick={increment}>add</button>
            <button type="button" onClick={decrement}>plus</button>
        </div>
    )
}

通过以上代码的展现，其实咱们也就明确了，咱们无非是将 useContext 和 createContext 内置到咱们封装的 Model 外面去了。

接下来咱们就来揭开这个状态管理工具的神秘面纱，首先要用到 React 相干的 API，所以咱们须要导入进来。如下:

// 导入类型
import type {ReactNode,ComponentType} from 'react';
import {createContext,useContext} from 'react';

接下来定义一个惟一标识，用于确定传入的 Context，并且这个用来确定使用者应用 Context 时是正确应用的。

const EMPTY:unique symbol = Symbol();

接下来咱们要定义 Provider 的类型。如下:

export interface ModelProviderProps<State = void> {
    initialState?: State
    children: ReactNode
}

以上咱们定义了 context 的状态类型，是一个泛型，参数就是状态的类型，默认初始化为 undefined 类型，并且定义了一个 children 的类型，因为 Provider 的子节点是一个 React 节点，所以也就定义成 ReactNode 类型。

而后就是咱们的 Model 类型，如下:

export interface Model<Value,State = void> {
    Provider: ComponentType<ModelProviderProps<State>>
    useModel: () => Value}

这个也很好了解，因为 Model 裸露了两个货色，第一个是 Provider，第二个就是 useContext，只是换了一个名字而已，定义这两个的类型就够了。

接下来就是咱们的外围函数 createModel 函数的实现，咱们一步一步来，首先当然是定义这个函数，留神类型，如下:

export const createModel = <Value,State = void>(useHook:(initialState?:State) => Value): Model<Value,State> => {// 外围代码}

以上函数难以了解的应该是类型的定义，咱们 createModel 函数传入一个 hook 函数，hook 函数传入一个状态作为参数，而后返回值就是咱们定义好的 Model 泛型，参数为类型就是咱们定义好的这个函数的泛型。

接下来，咱们要做的天然是创立一个 context，如下:

// 创立一个 context
const context = createContext<Value | typeof EMPTY>(EMPTY);

而后咱们要创立一个 Provider 函数，实质上也是一个 React 组件，如下:

const Provider = (props:ModelProviderProps<State>) => {
    // 这里应用 ModelProvider 次要是不能和定义的函数名起抵触
    const {Provider:ModelProvider} = context;
    const {initialState,children} = props;
    const value = useHook(initialState);
    return (<ModelProvider value={value}>{children}</ModelProvider>
    )
}

这里也很好了解，实际上就是通过父组件拿到初始状态和子节点，从 context 中拿到 Provider 组件，而后返回即可，留神咱们的 value 是通过传入的自定义 hook 函数包装后的值。

第三步，咱们就须要定义一个 hook 函数拿到这个自定义的 Context，如下:

const useModel = ():Value => {const value = useContext(context);
    // 这里确定一下用户是否正确应用 Provider
    if(value === EMPTY){
        // 抛出异样，使用者并没有用 Provider 包裹组件
        throw new Error('Component must be wrapped with <Container.Provider>');
    }
    // 返回 context
    return value;
}

这个函数的实现也很好了解，就是获取 context，判断 context 是否正确应用，而后返回。

最初咱们在这个函数外部返回这 2 个货色，即返回 Provider 和 useModel 两个函数。如下:

return {Provider,useModel}

把以上代码全副合并起来，createModel 函数就功败垂成啦。

最初，咱们把所有代码合并起来，这个状态管理工具也就实现了。

// 导入类型
import type {ReactNode,ComponentType} from 'react';
import {createContext,useContext} from 'react';
const EMPTY:unique symbol = Symbol();
export interface ModelProviderProps<State = void> {
    initialState?: State
    children: ReactNode
}
export interface Model<Value,State = void> {
    Provider: ComponentType<ModelProviderProps<State>>
    useModel: () => Value}
export const createModel = <Value,State = void>(useHook:(initialState?:State) => Value): Model<Value,State> => {
    // 创立一个 context
    const context = createContext<Value | typeof EMPTY>(EMPTY);
    // 定义 Provider 函数
    const Provider = (props:ModelProviderProps<State>) => {const { Provider:ModelProvider} = context;
        const {initialState,children} = props;
        const value = useHook(initialState);
        return (<ModelProvider value={value}>{children}</ModelProvider>
        )
    }
    // 定义 useModel 函数
    const useModel = ():Value => {const value = useContext(context);
        // 这里确定一下用户是否正确应用 Provider
        if(value === EMPTY){
            // 抛出异样，使用者并没有用 Provider 包裹组件
            throw new Error('Component must be wrapped with <Container.Provider>');
        }
        // 返回 context
        return value;
    }
    return {Provider,useModel};
}

更近一步，咱们再导出一个 useModel 函数，如下:

export const useModel = <Value,State = void>(model:Model<Value,State>):Value => {return model.useModel();
}

到目前为止，咱们的整个状态管理工具就实现啦，应用起来也很简略，很多轻量的共享状态我的项目当中咱们也就再也不须要应用像 Redux 这样的比较复杂的状态管理工具了。

当然这个想法也并不是我自己想的，文末已注明起源，本文对源码做了一遍剖析。

源码地址。

PS: 本文源码来自 unstated-next。