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>
        </>
    }

复制