React 新手请教个问题：如何在 React 组件运行前做一点点初始化？

[rrfeng]

是这样的，一个站点可能部署到不同环境，使用不同域名来访问，然后有一些环境相关的配置项。

当前方案是：为每个环境单独做静态配置，打包进代码里。
当前问题是：环境太多了，而且在不断增加，每次都要改代码很费劲。

解决方法：因为每个环境都有独立的后端，那么自然可以通过 api 来获取这些配置。
新方案遇到的问题：
由于这个配置散落在非常多的地方引用，比如各种组件代码里 config.env === "xx" ? <a/> : <b/>，甚至比如一些 http 请求的初始化。
改起来非常的费劲，原来是个静态的直接用就行了，如果要变成请求，那就变成异步的了，就会掉进异步的地狱里，要改几百个地方。

所以请问怎么搞合理？

[vace]

不想改代码的话，就同步获取 env ，直接赋值给 config：1. 后端输出 html ，把 env 直接注入到页面，直接全局变量拿，2. 提供一个 jsonp 的接口，或者直接输出一段 js ，在渲染前直接 script 加载，然后同 1 。

异步的方案非常多了，看你代码架构了，但既然有很多散落的引用，那说明原来的东西也不咋合理，你要做的就是确保在异步完成后取值。

[rrfeng]

@vace 谢谢你，现在有了一个新问题，怎么做 server rendering

[ixixi]

我们是后端渲染输出 html 一段 全局变量 简单的 base64 加密一下

[ZoeeoZ]

试试看能不能抽出来放到顶层判断,然后传递给组件?
比如在动态路由加载过程中去判断,判断完成之后直接返回需要显示的信息,子组件固定渲染信息就行了,如果还需要改动就只在顶层修改就可以

[rrfeng]

@ZoeeoZ
抽不动，下面太多直接引用了，如果开始渲染时还没有准备好，页面就直接炸了。

本来找到个办法，在 react.render 之前 fetch 一下。
但是结果各种组件的 import 里就有很多直接执行的代码依赖……

最后的解决办法：
在最开始执行下 fetch ，然后放到 localstorage 里，然后刷新下页面。
如果一开始 localstorage 就有，那就不 fetch 。

[JavenXiao]

每个环境弄个 js 文件，里面写个立即执行函数把配置挂在 window 上，让后把这个 js 文件地址直接放在 html 模板的 script 标签上，打开页面时会阻塞执行，react 开始执行的时候 window 上的变量已经挂好了，可以直接取

[rrfeng]

@JavenXiao
听起来是个靠谱的办法。必须在 react 之外写。