查找 React 中文文档请往
https://doc.react-china.org/
简聊代码用了 React 存在, 存在加载缓慢的问题. 一些表单页面也会受到影响
于是开始尝试做服务端渲染, 方便在打开时能更快渲染页面
JavaScript 代码以 defer 模式等待页面渲染完成, 然后开始加载
脚手架和打包相关的代码我做了整理托管在 Teambition GitHub 上
https://github.com/teambition…
另外一些注意点在下边做一些笔记
服务端渲染
- checksum 问题
React 在服务端渲染之后, 会在根节点生成一个 checksum 用于校验
同时 React 在浏览器端也会进行一次判断, 看 HTML 内容和客户端渲染是否一致
一般都用 React 不会出问题, 但是比如空白符, 或者内容不一致, 就会给出提示
- script defer 执行
为了 JavaScript 延迟加载, 可以用 defer 属性指明, 或者直接把标签放在 <body> 后边
因为我们渲染的 HTML 是直接把 <body> 替换的, 所以用 defer 完成了功能
- 上线之后 CSS 加载问题
实际使用虽然 Webpack 能够打包 CSS, 但是页面加载时的效果不能缺少 CSS
所以 CSS 实际上还是应该跟着 HTML 的 <header> 一起加载的
这个实际上会影响打包的复杂度, 在我的例子当中, 所以使用了一个 CSS 文件
- 初始化数据
JavaScript 的初始化数据使用 HTML 形式的 <script> 方式写入变量, 客户端运行过程读取
JSX
初始 HTML 内容, 也就是 <body> 外面的部分, 不属于 React Component
但也可以用 React 的方式写, 不过要注意 <!DOCTYPE HTML> 在 React 中不存在
- script 标签关闭方式
JSX 语法类似 XML, 标签都是需要关闭的
- body 周围空白符验证
生成的 HTML 不要有随便的空格或者换行, 否则会出现警告
即便是挂载的 React 组件外面有空格, 也会出现警告
- stir-template
https://github.com/mvc-works/…stir 是个小模块, 我用来生成 HTML, 语法类似 React, 但仅仅用于生成字符串
这种写法在 CoffeeScript 当中写起来会比较清晰, 对于 JavaScript 用户开发不是很必要
因为个人原因, 部分 HTML 代码会使用 CirruScript 书写, 避免一些特殊符号, 区别一下就好了
Webpack
代码热替换方案比较啰嗦, 目前的用法主要参考这篇文章
http://kevinold.com/2015/02/0…
具体涉及打包等等, 看开头我们仓库当中给出的例子
前后端共用代码
- 特殊代码的
try
前后端共享代码对于有些库来说还是会麻烦, 我们遇到的是一些 jQuery 组件没有做好判断
原理上我们应该 fork 代码提供一个两种环境都能运行的版本
实际操作中部分代码我们临时用了 try 语句捕捉 Node 环境当中的错误
目前尝试的项目很小, 未来这个问题应该会凸显, 需要注意一下
