技术分享-自定义hook（2021/12/6-10）

这一期分享的技术是关于react 的自定义hooks

首先说明，要想自定hooks，肯定是比较熟练使用hooks的，所以就不一一介绍hooks的使用了

通俗的来说hook其实就是一个函数，它的命名规范是以use开头的；为何要自定义hook？

我这边有个需求是设计本地存储的读写的，而且还挺多组件要用到这个的，如果放到js里面就是封装一个函数来解决重复的代码，现在用的是react hooks 技术开发

于是我把所有的hook看了一遍，发现好像并不能解决我的需求，于是我决定要自定义hook, 先展示自定hook的代码吧

    import {useState} from 'react';

    export function useStorage(key){
        let data = localStorage.getItem(key);
        try{
            data = JSON.parse(data);
        }catch(err){
            data = data;
        }

        const [state,setState] = useState(data);

        const setData = function(newData){
            if(typeof newData === 'object'){
                newData = JSON.stringify(newData);
            }
            localStorage.setItem(key,newData);

            setState(newData);
        }

        return [state,setData]
    }

不能看出来我参照了useState,不过它确实跟我需求比较像，就读和写；至于我为什么要在自定义hook里面使用useState呢？

我现在遇到的问题是，数据是实现更新了，但是UI没有更新，即视图没有更新，为什么会这样？

其实是跟react的思想有关，react想要更新视图，无非就是调用了render函数，但是函数组件没有render,说白一点就是刷新组件（页面）；

我总结了组件刷新的几个条件

1. props改变
2. state改变
3. 父组件刷新（其实就是props的改变）
4. 强制刷新：this.foreUpdate()

综合来看state的改变符合我当下的情况，所有我在自定义hook里面使用useState,看完了自定义hook的代码，自然要看一下怎么使用了

    import {useStorage} from '../../utils/hooks';

    function MyHook(){
        const [user,changeUser] = useStorage('currentUser');
        return (
            <div className="container">
                <h4>自定hook: useStorage()</h4>
                <p>user: {JSON.stringify(user)}</p>
                <button className="btn btn-success" onClick={()=>{
                    user.username = user.username + ' plus'
                    changeUser(user)
                }}>修改user</button>

            </div>
        )
    }

export default MyHook;

可以看出我自定义hook的名称叫useStorage,用于本地存储的读和写；