库地址

https://github.com/jamiebuilds/unstated-next#migration-from-unstated

安装方式

  1. npm install --save unstated-next

示例代码

  1. import React, { useState } from "react"
  2. import { createContainer } from "unstated-next"
  3. import { render } from "react-dom"
  5. function useCounter(initialState = 0) {
  6.   let [count, setCount] = useState(initialState)
  7.   let decrement = () => setCount(count - 1)
  8.   let increment = () => setCount(count + 1)
  9.   return { count, decrement, increment }
  10. }
  12. let Counter = createContainer(useCounter)
  14. function CounterDisplay() {
  15.   let counter = Counter.useContainer()
  16.   return (
  17.     <div>
  18.       <button onClick={counter.decrement}>-</button>
  19.       <span>{counter.count}</span>
  20.       <button onClick={counter.increment}>+</button>
  21.     </div>
  22.   )
  23. }
  25. function App() {
  26.   return (
  27.     <Counter.Provider>
  28.       <CounterDisplay />
  29.       <Counter.Provider initialState={2}>
  30.         <div>
  31.           <div>
  32.             <CounterDisplay />
  33.           </div>
  34.         </div>
  35.       </Counter.Provider>
  36.     </Counter.Provider>
  37.   )
  38. }
  40. render(<App />, document.getElementById("root"))

参考文章