每个人都可以，
拥有SSL证书

写 React 的时候，window 这个全局对象基本绕不开。取屏幕宽度、监听 resize、挂个全局配置，都会用到。但直接在组件里写 window.xxx，经常会在某些环境下报错，尤其是服务端渲染或者首次渲染的时候。

这里整理一下我在项目里用 window 的几个安全实践，希望能少走点弯路。

很多人一开始会直接在函数组件体里访问 window.innerWidth，结果服务端渲染直接报 window is not defined，或者首次渲染时拿到的是 undefined。原因很简单，组件函数体在渲染阶段就会执行，但客户端挂载还没完成，window 可能不可用。正确做法是把访问逻辑放到 useEffect 里。

import React, { useEffect } from 'react';

const ExampleComponent = () => {
  useEffect(() => {
    console.log(window.innerWidth);
  }, []);

  return <div>Check the console for window width</div>;
};

export default ExampleComponent;

useEffect 只在客户端执行，而且是在 DOM 更新之后，这时候 window 一定存在。

如果需要在渲染时使用窗口尺寸，可以配合 useState 初始值为 null，然后在 effect 里更新，触发重新渲染。

如果项目用 TypeScript，直接写 window.myGlobalVar 会提示类型错误。这时候需要声明全局类型。

declare global {
  interface Window {
    myGlobalVar: string;
  }
}

window.myGlobalVar = 'Hello, world!';

这个声明文件最好单独放，比如 types/window.d.ts。注意 declare global 要放在模块内，也就是说文件里要有 export {} 或者 import，否则会被当成全局脚本，声明不生效。

tsconfig 的 include 也要把这个文件包含进去。声明完之后，在组件里访问 window.myGlobalVar 就不会报类型错误了。

import React, { useEffect } from 'react';

const ExampleComponent: React.FC = () => {
  useEffect(() => {
    console.log(window.myGlobalVar);
  }, []);

  return <div>Check the console for myGlobalVar</div>;
};

export default ExampleComponent;

关于 SSR 兼容，其实 useEffect 天然只在客户端跑，所以多数情况不用额外判断。我一开始也以为每个地方都要判断，后来发现 useEffect 里根本不需要，因为服务端不会执行 effect。

真正需要判断的是那些可能在 Node 环境执行的模块初始化代码，或者某些工具函数。

import React, { useEffect } from 'react';

const SSRSafeComponent = () => {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      console.log(window.innerWidth);
    }
  }, []);

  return <div>Safe for SSR</div>;
};

export default SSRSafeComponent;

像上面这样在 useEffect 里再加一次 typeof window 判断其实意义不大，但有些团队为了保险会统一加，看习惯。如果代码不在 effect 里，比如模块顶层直接访问 window，那这个判断就是必须的了。

事件监听是另一个容易出问题的地方。

直接在 useEffect 里 addEventListener，如果不写清理函数，组件卸载后监听还在，每次卸载再挂载就多一个监听器，内存泄漏慢慢就来了。

import React, { useEffect } from 'react';

const EventListeningComponent = () => {
  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized!');
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Listening for resize events</div>;
};

export default EventListeningComponent;

依赖数组要写对，如果依赖写错了，监听器会反复绑定和解绑，有时候会有诡异的表现。这个坑我踩过，线上跑起来问题就出来了，排查半天才发现是 cleanup 没生效。

常见的使用场景大概就这几类。访问浏览器 API，记住放 useEffect；挂自定义全局变量，先扩 Window 接口；代码可能跑在 Node 端，就加 typeof window 判断；事件监听，清理函数别忘。

这几条覆盖了大部分 React 中 window 的使用场景，处理好之后，SSR 报错和内存泄漏这类问题基本能避免。

另外，如果项目部署需要 HTTPS，证书申请和续期可以交给 lcjmSSL，免费支持多域名和泛域名，自动部署，省得每次手动折腾。这个和 window 关系不大，但线上环境配置证书也是绕不开的一步，提一嘴。