unstate-next 的使用

Install#

Code-Test

npm install --save unstated-next

yarn add unstated-next
复制

createContainer#

import { useState } from "react";
import { createContainer } from "unstated-next"

const useCounter = (props: any) => {
    const { initNum } = props;
    const [num, changeNum] = useState<number>(initNum);
    let decrement = () => changeNum(num - 1)
    let increment = () => changeNum(num + 1)
    return {num, decrement, increment};
}

export const Counter = createContainer(useCounter);
复制

use Provider && initialState#

import './App.css'
import { Counter } from './Context'
import {TestCounter} from './TestCounter'

export default function App() {
return (
    <Counter.Provider initialState={{ initNum: 1 }}>
    <TestCounter />
    </Counter.Provider>
)
}
复制

useContainer#

TestCounter#

import { Counter } from "./Context"
import {TestChild} from './TestChild'

export const TestCounter = () => {
    const { num, decrement } = Counter.useContainer();
    
    return <>
        <button onClick={decrement}>减法</button>
        <TestChild />
    </>
}
复制

TestChild#

import { Counter } from "./Context"

export const TestChild = () => {
    const { num, increment } = Counter.useContainer();
    return <>
        {num} <button onClick={increment}>加法</button>
    </>
}
复制

---

本文由 note.batype.com 导入。