反应同构的不便

时间:2016-01-18 20:01:12

标签: node.js reactjs isomorphic-javascript

我正在使用Node.jsReactJS构建同构应用。

我遇到一种情况,当在一些同构React组件内部(在客户端和服务器端都呈现)时,我需要只包含客户端依赖(例如某些通知库)。

在服务器端/客户端上工作(编译)的最佳方法是什么?

PS:我对可能的解决方法几乎没有想法,例如检查浏览器env变量(例如一些typeof window !== 'undefined')等但我不确定这是一个好方法

3 个答案:

答案 0 :(得分:0)

使用服务器上未调用的生命周期方法componentDidMount,而不是检查窗口是否未定义。

“缺点”是如果您的客户端依赖项增强了一个元素或者更改了它的任何属性,它将首先获得默认属性,因为它是在服务器端呈现的,而componentDidMount运行它时变得引起“眨眼”。

答案 1 :(得分:0)

如果您使用的是browserify,我经常使用process.browser,这只适用于浏览器化代码。

如果您希望从浏览器中获取幻想并删除服务器代码,那么还有isbrowser就可以做到这一点。

另一种方式(webpack或browserify)是利用package.json中的browser field。你可以使服务器需要一个noop文件,浏览器需要一个文件暴露客户端api。

答案 2 :(得分:0)

我已经在webpack配置文件中定义了一个名为process.env.WEBPACK的变量,在我的代码中,当我需要像bottstrap js或者别的东西我只是写

  if(process.env.WEBPACK){
     //awesome lib included or scss or whatever
  }