react前后端同构渲染_react前后端交互的逻辑描述

前后端同构渲染：当客户端请求一个包含React组件页面的时候，服务端首先响应输出这个页面，客户端和服务端有了第一次交互。然后，如果加载组件的过程需要向服务端发出Ajax请求等，客户端和服务端又进行了一次交互，这样，耗时相对较长。前后端同构渲染可以在页面初次加载时把所有地方渲染好一次性响应给客户端

实现方式：保证包管理工具和模块依赖方式一致
包管理工具-npm管理，保证前后端都使用同一个兼容包
模块依赖方式-webpack，保证前后端都采用commonjs的依赖方式，确保代码可以互相依赖

服务端如何渲染：
react全家桶：react、react-router、redux
react 和 reactDOM
reactDOM在这里提供的支持就是reactDOM.render和reactDOM.renderToString函数，其中欠着会在浏览器生成DOM结构，后者会在服务端生成对应的HTML字符串模板。react会在生成的DOM结构上添加一个 data-react-checksum的属性，这是一个 adler32 算法的校验和，用以确保两份模板的一致性。

同时 react 的生命周期在前后端渲染过程中也有所不同。前端渲染的组件拥有完整的生命周期，而后端渲染仅有 componentWillMount 的生命周期。这就意味着，如果我们想进行前后端共同操作的逻辑，如发送数据请求等，可以放在 componentWillMount 的生命周期中；如果想单独处理客户端的逻辑，可以放在其他生命周期，如 componentDidMount 中。

react-router
react-router是react的路由-视图控制库，可以书写边界的声明式路由以控制不同页面的渲染。react-router 本身是一个状态机，根据配置好的路由规则，和输入的 url 路径，通过 match 方法找到对应的组件并进行渲染。

这套机制在前端和后端都是相通的，例如在后端，就是下面这样一种实现形式来进行渲染：

app.use(async (ctx, next) => {
match({
location: ctx.originalUrl,
routes
}, callback)
// 渲染完成之后，调用 callback 回调
// 将 组件 renderToString 返回前端即可
})
对于前端来说，其实也是处理的上面这些逻辑，不过它被很好的封装在 组件中，我们只需要写好声明式的路由，这一切就可以随着 url 的变化自动发生。

redux
redux是react的数据流管理库，他对服务端渲染的支持很简单，就是单一的store和状态可初始化。后端在进行渲染的时候会构建好单一的store，并将构建好的初始状态通过以json格式，通过全局