ahooks，一个 react hooks好用的库

前言

这几天重新过了一遍hook，在项目中自定义hook之后发现非常的爽，逻辑层可复用，与视图分离，找了找文档后发现了这个好用的库

使用前提

对react hooks 较为熟练

地址

ahooks

方便在哪里？

下面这里用它的一个最简单的demo来说明

• 使用useToggle，

const ToggleTest=() => {
    //shook写法
    const [ state, { toggle,setLeft,setRight } ] = useToggle('left的值','right的值');
    return (
        <div>
            <p>Current Boolean: {String(state)}</p>
            <p>
                <button onClick={() => toggle()}>Toggle</button>
                <button onClick={() => setLeft()}>setLeft</button>
                <button onClick={() => setRight()}>setRight</button>
            </p>
        </div>
    );
};

• 不使用hook手写

const ToggleNormal=()=>{
    let left='left的值'
    let right='right的值'
    //不用hook
    const [state,setState]=useState(left)

    function toggle() {
        if(state!==left)
            setState(left)
        if(state!==right)
            setState(right)
    }
    function setLeft() {
        if(state!==left)
            setState(left)
    }
    function setRight() {
        if(state!==right)
            setState(right)
    }
    return (
        <div>
            <p>Current Boolean: {String(state)}</p>
            <p>
                <button onClick={() => toggle()}>Toggle</button>
                <button onClick={() => setLeft()}>setLeft</button>
                <button onClick={() => setRight()}>setRight</button>
            </p>
        </div>
    );
}

方便了什么？

你可能会觉得

• 你可能觉得我不用hook封装好像也不难，就算封装，里面不也要写这么多判断代码吗?
• 我用一个boolean值和三目运算符不也能搞定吗

是这样的

• 逻辑层的复用，一次封装，多处都可以使用
• 有十个地方要写这个逻辑，难道你都要重新写一遍吗
• 这个useToggle只是非常简单的demo，ahooks封装了很多用起来特别爽的hook,自己去看文档就知道了。

后言

ahooks只是别人封装的比较好用的hooks，当发现不能满足自己需求时，可以封装自己的hook。