React 实作笔记2

(6个月前的文章乱版了, 重新发布)

服务器端渲染(与客户端渲染共存)

更换为使用 react-engine,出发点是因为其支持一份路由(react-route)在两端共享

浏览器中提示 Invariant Violation时,指示的问题组件可能跑偏

遇到的具体情况是,说A组件在服务器端和客户端渲染的结果不一致,并且像模像样的给出了差异,能明显看出A在服务器端渲染时,checked="", 而在客户端为 checked

为此特意去看了 react-engine/lib/server的代码,并且打了日志,事实上服务端渲染也是 checked,并没有后面的=""。

后来想到另一个组件B,在修改时,对一个state在初始化时,尾部拼装了Date.now(),这还是容易想到会导致两端渲染不一致的。改好后,浏览器里也不报A的错误了!

使用了类似 arrow functions 这样的ES6 语法,需要加入相应的支持

  • node-jsx
require("node-jsx").install({extension:'.jsx',harmony:true});
  • reactify
var reactifyES6 = function(file) {
  return reactify(file, {'es6':true});
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,860评论 1 18
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,586评论 7 249
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,666评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,014评论 19 139
  • 你是谁?你在做什么?最近结束了第二轮专注自己训练营活动,完成了自己今年梦寐以求的马拉松,明明还有很多事情等着我去完...
    西诺Cici阅读 1,242评论 0 0