React Hooks 状态管理方案探索

Posted 2023-02-21 Songlcy

React 中的状态声明，一般会这么写

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&g