1、介绍

轻量级的React状态管理工具

2、安装

安装 npm install —save unstated-next

3、API 使用及优化

createContainer(useHook)


Container.useContainer()
useContainer(Container)

Example:

  1. import React, { useState, createContext, useContext, useCallback } from "react";
  2. import { createContainer } from "unstated-next";
  3. // import { createContainer } from "./unstated-next";
  4. // 通过自定义hook 共享逻辑
  5. function useConter(initialState = 0) {
  6.   let [count, setCount] = useState(initialState);
  7.   let decrement = useCallback(() => setCount(count - 1), [count]);
  8.   let increment = useCallback(() => setCount(count + 1), [count]);
  9.   return {
  10.     count,
  11.     decrement,
  12.     increment,
  13.   };
  14. }
  16. // 通过Context共享状态
  17. let Counter = createContainer(useConter);
  18. console.log(Counter, "Counter....111");
  19. // let Counter = createContext(null);
  21. function InnerCounter() {
  22.   let counter = Counter.useContainer();
  23.   return (
  24.     <div>
  25.       <button onClick={counter.decrement}>-</button>
  26.       <p>You clicked {counter.count} times</p>
  27.       <button onClick={counter.increment}>+</button>
  28.     </div>
  29.   );
  30. }
  32. function CounterHandle() {
  33.   let counter = Counter.useContainer(Counter);
  34.   return (
  35.     <div>
  36.       <CounterDisplay {...counter}></CounterDisplay>
  37.     </div>
  38.   );
  39. }
  41. let CounterDisplay = React.memo((props) => {
  42.   return (
  43.     <div>
  44.       <button onClick={props.decrement}>-</button>
  45.       <p>You clicked {props.count} times</p>
  46.       <button onClick={props.increment}>+</button>
  47.     </div>
  48.   );
  49. });
  51. function App() {
  52.   return (
  53.     <Counter.Provider initialState={2}>
  54.       <CounterHandle />
  55.       <Counter.Provider initialState={1}>
  56.         <InnerCounter />
  57.       </Counter.Provider>
  58.     </Counter.Provider>
  59.   );
  60. }
  61. export default App;

4、原理

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

简版源码

  1. import React, { createContext, useContext } from "react";
  2. export function createContainer(useHook) {
  3.   let Context = createContext(null);
  4.   const Provider = function Provider(props) {
  5.     let value = useHook(props.initialState);
  6.     return <Context.Provider value={value}>{props.children}</Context.Provider>;
  7.   };
  8.   const useContainer = function () {
  9.     let value = useContext(Context);
  10.     return value;
  11.   };
  12.   return {
  13.     Provider,
  14.     useContainer,
  15.   };
  16. }

5、参考

参考地址