此处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中如何实现全局变量