最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS中如何实现全局变量

ReactJS crifan 14313浏览 0评论

此处ReactJS项目中,想要保存用户登录后的所以相关信息,不同的页面都可以方便的访问和读写。希望实现类似于全局变量的功能。

之前的一些ReactJS的折腾,其实已经对于如何实现全局变量有个基本的了解了,但是还是存在问题:

感觉还是没有找到更好的,更优雅的实现方式。

目前已知的有:

(1)别人已经搭建好的一个ReactJS(Preact)的项目框架,其中用到redux,其中设置了全局函数,其中可以放置全局变量,通过props传递下去,但是不太好用,而且此处暂时不太会用,感觉暂时也用不到dedux

(2)直接给全局的值加到window上:window.xxx

现在想要去找找有没有其它更好的方式去实现。

react js global variable

reactjs – How to declare a global variable in React? – Stack Overflow

Context – React

可以借用Context去实现 全局变量的功能

-》但是很明显,官网不建议,最少不要用,Context

或者已经知道的:

window.xxx

reactjs – JavaScript and ES6, “global” variables – Stack Overflow

可以用:

window.MyClass = whatever

即window.xxxClass

用更高级一点的单实例的方式去实现全局变量,倒是也不错。

因为这样可以避免污染window的全局变量的作用域

save Store as global variable ? · Issue #776 · reactjs/redux

以后还是尽量去用redux吧

但是去改了很多代码后才发现,原先的从最开始的Index页面,传递到Login或者Main,以及从Login传回Main的curUserInfo,虽然很麻烦,但是可以方便的保持数据同步,即:

父页面的数据变化了,自动会刷新子页面的数据

而此处全局变量的话导致一个问题:

当其它地方修改了数据,别的地方没发及时更新

比如别的地方重新命名了,但是导致数据不能及时同步到其它显示区域。

不过,别的地方,倒是可以考虑使用全局变量的。

但是此处又有点背离了最开始使用全局变量的初衷:

就是希望,全局只有一个保留用户信息,包括登录后的信息,选择了其它的配置的信息等地方

便于统一维护的。

如果一部分信息是通过传递变量,另外一部分信息通过全局变量,则就有点混乱了。。

不过,目前还是暂时使用全局变量的方式吧:

代码:

/src/common/app-global.js

import { EMPTY_USER_INFO } from ‘./define’;
class AppGlobal {
  curUserInfo = {
    isLogin: false,
    account: ”,
    password: ”,
    orgCode: ”,
    name: ”,
    roleName: ”,
    loginTime: null
};
  constructor() {
    console.log(`AppGlobal constructor`, this.curUserInfo);
  }
  logout(){
    console.log(‘AppGlobal: curUserInfo=’, this.curUserInfo);
    this.curUserInfo = EMPTY_USER_INFO;
  }
}
export default (new AppGlobal);

src/components/header-bar/header-bar.js

import AppGlobal from ‘common/app-global’;
    render() {
        console.log(‘HeaderBar render: AppGlobal.curUserInfo=’, AppGlobal.curUserInfo);
        // let curDateStr = this.state.curUserInfo.loginTime.format(‘yyyy/MM/dd’);
        let curDateStr = AppGlobal.curUserInfo.loginTime.format(‘yyyy/MM/dd’);

转载请注明:在路上 » 【已解决】ReactJS中如何实现全局变量

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.180 seconds, using 22.05MB memory