React 跨端同构逻辑:处理 React 组件在 Web、Node.js 与 React Native 间的环境兼容隔离

各位,大家好。 今天我们不聊那些虚头巴脑的架构图,也不聊什么“微前端”或者“Serverless”这种听起来很酷但落地全是坑的概念。今天,我们要聊的是 React 开发者的“三明治”夹层——同构。 你们有没有过这种经历?你写了一个超级漂亮的 React 组件,用了 document.getElementById,用了 window.addEventListener,甚至还用了 localStorage。你以为你写的是纯逻辑,结果一打包,Web 端跑得好好的,一扔到 Node.js 服务端渲染(SSR)就报错:“window is not defined”;再扔到 React Native 手机上,又报错:“document is not defined”。 这时候,你的内心是不是有一万只草泥马奔腾而过?你觉得自己写的是代码,结果写的是“跨平台特供”的限定版。 别急,这就是我们今天要解决的核心问题:如何在 React 组件里,让 Web、Node.js 和 React Native 这三个性格迥异的“室友”和平共处。 这就像是在家里养了猫、狗和鱼,你不能指望猫去喂鱼,也不能指望鱼去遛狗。 …