浅谈react同构之样式直出-创新互联

前言

上文讲到通过同构服务端渲染，可以直出html结构，虽然讲解了样式，图片等静态资源在服务端引入问题的解决方案，但是并没有实际进行相关操作，这篇文章就讲解一下如何让样式像html一样直出。

PS: 直出，我的理解就是输入url发起get请求访问服务端，直接得到完整响应结果，而不是同过ajax异步去获取。

React 同构的关键要素

完善的 Compponent 属性及生命周期与客户端的 render 时机是 React 同构的关键。

DOM 的一致性

在前后端渲染相同的 Compponent，将输出一致的 Dom 结构。

不同的生命周期

在服务端上 Component 生命周期只会到 componentWillMount，客户端则是完整的。

客户端 render 时机

同构时，服务端结合数据将 Component 渲染成完整的 HTML 字符串并将数据状态返回给客户端，客户端会判断是否可以直接使用或需要重新挂载。

以上便是 React 在同构/服务端渲染的提供的基础条件。在实际项目应用中，还需要考虑其他边角问题，例如服务器端没有 window 对象，需要做不同处理等。下面将通过在手Q家校群上的具体实践，分享一些同构的 Tips 及优化成果

加入样式文件

目前我们的项目中还不存在任何样式文件，所以需要先写一个，就给组件App写一个样式文件吧。

安装依赖

下面这些依赖都是后续会用到的，先安装一下，下面会详细讲解每个依赖的作用。

复制代码 代码如下:

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。