web1.0 静态页面

Back-End

Front-End

web1.0 动态页面

Back-End

Front-End

web1.0 动态页面

Back-End

Front-End

代码混杂

前后端交互流程

前后端分离

进阶方案 -- 数据直出

理想方案 -- 服务端直出

Virtual DOM

Virtual DOM是内存中的对象树，用于最小化Real DOM操作

服务端没Document,无法直接操作DOM

服务端渲染为HTML String

HTML String拼接到页面中，返回客户端解析为DOM

React.render

React component life cycle

ReactDOMServer.renderToString

React@0.14.1

React component life cycle

判断是否需要重新render

Redux

Acitons 包括 React component 的异步数据请求

技术要点

实践实例

订单页面

测试(已经过期)

Server Render

Client Render

测试结果