前言 本文由阿里信息平台前端@昊祯投稿。早读君在记忆中应该是第一次推送react相关的文章，本文利用前后端同构的特性来设计一个公用组件。 正文从这开始～ 越来越多的前端应用开始基于Facebook 的 React，React 在组件化方面有着更为灵活的实现和简便的配置，在组件的使用成本上也有很大程度的降低。 除了这些优点，了解 React 服务端渲染的同学应该还知道 React 还有一个非常大的特性前后端同构特性，本文就将基于这一特性去研究如何设计一个可以前后端公用的组件。 讲解原理之前，先来看 demo (https://github.com/harbin1053020115/koa-react-render-demo ) React 前后端同构的原理 React 由 render() 方法定义该组件最后输出的 html 片段；前端利用 React 的内置渲染引擎将其渲染成 DOM 树，而后端也同样提供了两个方法去渲染一个 React 组件：
由这两个方法在服务端生成的 html 字符串输出到浏览器，浏览器生成对应的 DOM 树，然后再引用编译好的 react js 文件，再次在浏览器端进行 render。 由于输出的 DOM 树结构并无改变，所以肉眼看起来页面并没有再次渲染（一些现代高级浏览器也会对页面的 DOM 树进行对比，如果 DOM 树 结合 CSS 的渲染树并没有改变，也不会真正进行渲染），这就是 React 实现前后端同构的主要原理。 前后端公用一套组件进行页面渲染的优势
首屏服务端渲染的好处是可以让用户更早的见到页面主体，而且服务端渲染另外一个好处是可以减少很多 ajax 接口请求，利用 nodejs 的事件机制，也可以很方便的在 Node 端实现接口的并行异步获取。
搜索引擎只能抓取“页面源代码”中的字符串。
|
|
声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|
注册
登录
