浅谈react 同构之样式直出

前言

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

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

React 同构的关键要素

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

DOM 的一致性

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

不同的生命周期

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

客户端 render 时机

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

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

加入样式文件

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

安装依赖

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

创建.pcss文件

css文件的后缀是.css，less文件的后缀是.less，这里我选择使用PostCSS配合其插件来写样式，所以我就自己定义一个后缀.pcss好了。

// ./src/client/component/app/style.pcss

.root {
 color: red;
}

设定一个root类，样式就是简单的设置颜色为红色。然后在App组件里引用它。

// ./src/client/component/app/index.tsx

...
import * as styles from './style.pcss';
...
 public render() {
  return (
   <div className={styles.root}>hello world</div>
  );
 }
...

这个时候你会发现编辑器里是这样的：