javascript - 如何正确处理 react 服务器端渲染中的 window=undefined 错误

Question

我在使用窗口对象的浏览器上使用 websockets。但是因为我正在使用服务器端渲染和 react 。我的服务器在编译时崩溃并引发以下错误

 [Error] ReferenceError: window is not defined

特别是因为我的组件之一需要客户端套接字才能与服务器通信。

我尝试在我的 server.js 文件的开头添加以下代码

if (typeof(window) == 'undefined'){
    global.window = new Object();
}

但由于某种原因它仍然会引发错误。我还能做什么？有人处理过这个问题吗？

更新 - 问题可能不仅仅特定于套接字。基本上，我从我的组件中的以下文件中导入了几个对象

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {createStore} from 'redux';
import { Router, Route, browserHistory ,IndexRoute} from 'react-router'
import routes from '../shared/routes/routes';
import rootReducer from '../shared/reducers/index';
import SocketCluster from 'socketcluster-client';

const initialState = window.__INITIAL_STATE__

export const store = createStore(rootReducer,initialState)

const options = {
  port: 3000
}

if(store.getState().User.isAuthenticated){
  const socket = SocketCluster.connect(options)
}

console.log(store.getState())

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      {routes}
    </Router>
  </Provider>
  ,document.getElementById('app')
)

在我的组件中

import React from 'react';
import Skill from './skill';
import Select from 'react-select';
import {socket ,store} from '../../client/index';

我收到错误是因为某些原因。服务器也在查看 window.__INITIAL_STATE__。所以问题是我似乎无法从客户端的 index.js 文件导入任何内容。

我能做什么？

Answer 1

Javascript 不一定有编译阶段。诚然，大多数实现都可以编译，但没有一个阶段会发生这种情况。访问 window变量在执行之前不会抛出。

使用 React 时，仅在客户端运行代码的正常方法是将其放在 componentDidMount 中.

在任何情况下，我都建议不要尝试在服务器上创建伪造的客户端 API 版本以防止损坏。相反，请确保您的客户端代码只在客户端上运行。

您可以将它包装在一个函数中，并仅从 componentDidMount 调用它或者您可以测试环境。

function clientInitialize() {
  // start your client side app here
  // create client-side store here
}

function serverInitialize() {
  // create server-side store here
}

if (typeof window === 'object') {
  clientInitialize();
} else {
  serverInitialize();
}

我应该指出，出于安全和代码大小的原因，服务器端代码最好永远不要发送到客户端。最好从客户端根本不可用的代码中初始化商店。

没有一种方法可以完成这些事情，每种方法都各有利弊。

我相信 Redux 的创建者 Dan Abramov 大力支持了解您拥有的每段代码的原因，理解您使用的库，并更喜欢您理解的方法而不是公认的标准方法。 Redux 本身在很大程度上基于这些想法，这就是为什么它没有规定太多。这也是为什么围绕 Redux 有如此众多的附加组件社区。

确实没有必要强制所有代码都与服务器和客户端兼容。只需将必须分开的部分分开即可。