基于 React Hooks 实现一个状态管理库

Posted 2022-02-26 Songlcy

local state hooks

const Button = () => 
    const [number, setNumber] = useState(0);
    return (
        <Button onPress=setNumber((preState) => preState + 1)>number</Button>
    )

状态逻辑和视图强耦合，违反视图归视图，逻辑归逻辑的常理。多组件内共享状态是通过层层传递的方式实现的，带来冗余代码的同时，根组件的状态将会逐渐变成 “庞然大物”。

将状态逻辑抽离成独立的hook

function useNumber() 
    const [number, setNumber] = useState(0);
    const increment = useCallback(() => 
        setNumber((preState) => preState + 1)
    , [number]);
    return 
        number,
        increment 
    ;

const Button = () => 
    const [number, increment] = useNumber();
    return (
        <Button onPress=increment>number</Button>
    )

舒服多了，状态逻