unstated-next 源码解析

1、介绍

轻量级的React状态管理工具

2、安装

安装 npm install --save unstated-next

3、API 使用及优化

createContainer(useHook)
<Container.Provider>
<Container.Provider initialState>
Container.useContainer()
useContainer(Container)

Example:

import React, { useState, createContext, useContext, useCallback } from "react";
import { createContainer } from "unstated-next";
// import { createContainer } from "./unstated-next";
// 通过自定义hook 共享逻辑
function useConter(initialState = 0) {
  let [count, setCount] = useState(initialState);
  let decrement = useCallback(() => setCount(count - 1), [count]);
  let increment = useCallback(() => setCount(count + 1), [count]);
  return {
    count,
    decrement,
    increment,
  };
}

// 通过Context共享状态
let Counter = createContainer(useConter);
console.log(Counter, "Counter....111");
// let Counter = createContext(null);

function InnerCounter() {
  let counter = Counter.useContainer();
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  );
}

function CounterHandle() {
  let counter = Counter.useContainer(Counter);
  return (
    <div>
      <CounterDisplay {...counter}></CounterDisplay>
    </div>
  );
}

let CounterDisplay = React.memo((props) => {
  return (
    <div>
      <button onClick={props.decrement}>-</button>
      <p>You clicked {props.count} times</p>
      <button onClick={props.increment}>+</button>
    </div>
  );
});

function App() {
  return (
    <Counter.Provider initialState={2}>
      <CounterHandle />
      <Counter.Provider initialState={1}>
        <InnerCounter />
      </Counter.Provider>
    </Counter.Provider>
  );
}
export default App;

4、原理

• 通过React.createContext() API 提供Provider， 通过React.useContext获取最新状态， 在Provider方法上调用用户自定义的useHook， 拿到最新的状态和方法注入， 通过useContainer获取最新的值
• 解决： 如何拿到Provider 上设置的 initialState，  通过重写Context对象上的Provider方法通过props传入拿到

简版源码

import React, { createContext, useContext } from "react";
export function createContainer(useHook) {
  let Context = createContext(null);
  const Provider = function Provider(props) {
    let value = useHook(props.initialState);
    return <Context.Provider value={value}>{props.children}</Context.Provider>;
  };
  const useContainer = function () {
    let value = useContext(Context);
    return value;
  };
  return {
    Provider,
    useContainer,
  };
}

5、参考

参考地址