React useModel之全局变量

现如今，利用react+umi框架开发项目已成为主流，umi也出了很多非常好用的api和hooks。这篇文章打算来讲一下umi框架的全局变量useModal。

useModel

首先，在项目src文件夹下的model文件夹中创建一个存放全局变量的文件。这里可以创建多个，根据文件名字即可引用到相应的全局文件。

然后在文件中可以直接使用react hooks的方法。这里以useState为例

import { useState } from 'react';

export default function globalFun() {
    const [count, setCount] = useState<number>(0);

    return {
        count,
        setCount
    };
}

最后在需要使用到全局变量的文件中引入即可。

import { useModel } from 'umi';

const {count, setCount} = useModel("xxx");  // xxx处填入创建model文件的名字

console.log(count);

return (
    <div onClick={()=>setCount(1)}></div>
)

额外补充（函数式组件下的redux）

以前的react会将全局变量存在redux中，使得项目每次要引用全局变量时会调用redux的那一套方法（每个页面都要与store连接起来），这样写起来会增加一些麻烦，其次就是对于新手来说非常的不友好，这个可能是个人看法，我当初就是很久都没明白。后来随着函数式组件越来越火热，dva推出了useSelector，useDispatch方法来直接获取相应的存在redux中的值，这样使得函数式组件省去了connect那一系列的操作。

import { useDispatch, useSelector } from 'dva';

// useSelector
const { userInfo } = useSelector(state => state.global);

// useDispatch
const dispatch = useDispatch();

dispatch({
    type: 'global/save',
    payload: {
        userInfo: {
            username:'JabFury'
        },
    },
});