unstate-next 的实现原理

Posted on In , , Views: Changyan: Word count in article: 461 Reading time ≈ 2 mins.
unstate-next 的实现原理，根据 React.createContext 和 React.useContext 方法重新包装，简化使用步骤。

定义实现 Container 接口

需要实现包装方法和获取数据的 hooks

1
2
3
4
5
6
7
/**
 * 实现接口
 */
export interface Container<Value, State> {
Provider: React.ComponentType<ContainerProviderProps<State>>;
useContainer: () => Value;
}

定义实现 Provider 接口

定义接口需要初始化参数和需要使用的子节点。

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * ContainerProviderProps 定义类型
 * @param {State} State
 * @return {State} initialState
 * @return {React.ReactNode} children
 */
export interface ContainerProviderProps<State = any> {
initialState?: State;
children: React.ReactNode;
}

createContainer 方法

在 createContainer 方法中，使用后会返回两个方法 Provider 和 useContainer。

步骤：

  1. 使用 React.createContext 创建 Context；
  2. 自定义 hooks 获取属性；
  3. 需要使用 Context 子组件使用 Provider 包装， 将数据写入 Context；
  4. 使用 React.useContext 从 Context 中获取属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export function createContainer<Value, State = void>(
useHook: (initialState?: State) => Value
): Container<Value, State> {
// 使用React.createContext 创建Context
const Context = React.createContext<Value | typeof EMPTY>(EMPTY);

function Provider(props: ContainerProviderProps<State>) {
    // 自定义hooks 获取属性
    let value = useHook(props.initialState);
    // 需要使用Context 子组件使用Provider 包装， 将数据写入Context。
    return <Context.Provider value={value}>{props?.children}</Context.Provider>;
}

function useContainer(): Value {
    // 使用React.useContext 从 Context 中获取属性
    let value = React.useContext(Context);
    if (value === EMPTY) {
    throw new Error("Component must be wrapped with <Container.Provider>");
    }
    return value;
}
return {
    Provider,
    useContainer,
};
}

useContainer

使用 useContainer 从 Container 中直接获取属性。

1
2
3
4
5
export function useContainer<Value, State = void>(
container: Container<Value, State>
): Value {
return container.useContainer();
}

unstate-next 使用

实现 code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React from "react";

const EMPTY: unique symbol = Symbol();

/**
 * ContainerProviderProps 定义类型
 * @param {State} State
 * @return {State} initialState
 * @return {React.ReactNode} children
 */
export interface ContainerProviderProps<State = any> {
initialState?: State;
children: React.ReactNode;
}

/**
 * 实现接口
 */
export interface Container<Value, State> {
Provider: React.ComponentType<ContainerProviderProps<State>>;
useContainer: () => Value;
}

export function createContainer<Value, State = void>(
useHook: (initialState?: State) => Value
): Container<Value, State> {
// 使用React.createContext 创建Context
const Context = React.createContext<Value | typeof EMPTY>(EMPTY);

function Provider(props: ContainerProviderProps<State>) {
    // 自定义hooks 获取属性
    let value = useHook(props.initialState);
    // 需要使用Context 子组件使用Provider 包装， 将数据写入Context。
    return <Context.Provider value={value}>{props?.children}</Context.Provider>;
}

function useContainer(): Value {
    // 使用React.useContext 从 Context 中获取属性
    let value = React.useContext(Context);
    if (value === EMPTY) {
    throw new Error("Component must be wrapped with <Container.Provider>");
    }
    return value;
}
return {
    Provider,
    useContainer,
};
}

export function useContainer<Value, State = void>(
container: Container<Value, State>
): Value {
return container.useContainer();
}