这里关于 React 的收集的消息的一个提纲,具体内容看下边的链接,
微博是经常更新的,隔一段时间会同步到后边的网页上去:
http://weibo.com/reactchina
http://react-china.org/collections/
GitHub 上有整理的列表:
https://github.com/enaqx/awesome-react
项目来源
目前在视频和录音当中听说过两个说法:
一个是 Facebook 以前用过模版渲染,用过双向绑定,但是应用复杂度增加了
因为数据只有有复杂关系,后面加入的代码非常容易把前面的功能破坏了
于是 React 用了解决这个问题,因为 DOM 总是跟着数据渲染的,不容易出错
另一个说法,Facebook 有 XHP 改良了 PHP,更安全地处理 HTML 转义:
https://github.com/facebook/xhp
而且 XHP 当中实现了定义和嵌套 Component 的功能,复用模块非常清晰
为了把后端技术的成功复制到前端,就做了 JSX,在前端插入类似的数据结构
并且想要做到每当有数据更新,就对整个页面进行渲染,而避免复杂的状态维护
最后不断优化性能,甚至通过 DOM diff 达到了比手写更好的性能
功能
React 框架本身作为 MVC 当中的 V 存在,提供两个功能:
- 渲染和维护 DOM
- 监听 DOM 的事件
其他的好处是:
- React Component 设计得非常适合模块化
- Component 和 DOM 得益于 Virtual DOM 的 diff 和合并操作,有性能提升
- 没有 Model 的复杂关系,编写应用逻辑非常清晰
- 服务端渲染
调试工具
Chrome 扩展,很方便查看 Component 对应的 props 和 state
https://github.com/facebook/react-devtools
由于 Chrome 已经有 JavaScript 自动编译的功能,加上 React 的刷新方式
可以做到代码热替换,在有修改之后快速更新界面上的代码
Flux
前端单页面的应用常用的架构之间简单的区别看这里:
实际当中结构会更复杂一点,比如 Backbone 之间模块的划分,
至少可以发现不是图上展示的单向的一个循环:
而且实际上 MVC 很容易被写成这样,在 View Model 之间产生复杂的关系:
而 Flux 对 MVC 做了调整,回到近似 MVC 的单向循环当中:
社区活跃人物
Pete Hunt,Instagram 工程师,即将离开 Facebook
一起开发 React 的工程师可以看这个相关的帖子:
https://www.facebook.com/pwh/posts/10101869605197995
Pete 九月份有不少关于 React 的演讲,是理解 React 很重要的资源
Twitter 帐号 https://twitter.com/floydophone
Ben Alpert,@spicyj 是 Khan Academy 的工程师
https://github.com/spicyj
社区看到很多他参与的地方
Christopher Chedeau @vjeux 是 Facebook 工程师
http://blog.vjeux.com/
如果在网上搜索教程,很容易搜到他的博客上,他也有一个演讲的视频
使用 React 的公司
官方仓库的 Wiki 上记录了一些使用的公司:
https://github.com/facebook/react/wiki/Sites-Using-React
Instagram 全站用的 React,Facebook 部分用了 React
Khan Academy 的编辑器用了 React.
其他公司并不清楚
国内听到豌豆荚,豆瓣,WiredCraft 有在生产环境用过 React
信息不是很准确,以后尝试收集更多出来..
模块
模块目前对比其他 MV* 框架不够丰富,应该的很快能赶上,
目前模块主要在 npm 上,通过标签可以声明,在这里查看:
http://react-components.com/
函数式编程: 不可变数据
Component 的 props 被认为是不可修改的,保证同样的数据得到一致的界面
在 Om 当中借助了 ClojureScript 的数据不变性,性能甚至更高
Facebook 开源了他们的关于 immutable 数据结构的类库:
https://github.com/facebook/immutable-js
惰性计算沾点边.. DOM 树并不是每次更新,而是计算之后缓存住内容,避免了多余的计算
一些函数式编程语言也接纳了 React 或者 Virtual DOM 用于编写界面:
Om(ClojureScript),eliom(OCaml),PureScript,Elm
响应式编程
Functional Reactive Programming,代表的语言是 Elm
React 和 Elm 非常相似,Component 的组合方式,数据不变性,Virtual DOM
https://github.com/component/reactive
https://github.com/yang/reactive-coffee
http://reactive-extensions.github.io/RxJS/
http://baconjs.github.io/
http://elm-lang.org/
对比
Ractive: http://blog.ractivejs.org/posts/whats-the-difference-between-react-and-ractive/
Angular: ?
Ember: https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/edit
Backbone: ?
Vue: https://github.com/yyx990803/vue/wiki/FAQ
Web Components: http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer
性能
Pete 有个演讲做了比较深入的分析 www.youtube.com/watch?v=h3KksH8gfcQ
Todo 的测试: http://vuejs.org/perf/
DOOM 3 渲染架构: http://fabiensanglard.net/doom3/renderer.PHP
