此处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去实现 全局变量的功能
-》但是很明显,官网不建议,最少不要用,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中如何实现全局变量