React.js 概览

查找 React 中文文档请往 https://doc.react-china.org/

这里关于 React 的收集的消息的一个提纲, 具体内容看下边的连接,
微博是常常更新的, 隔一段时间会同步到后边的网页上去:
http://weibo.com/reactchina
http://react-china.org/collec...
GitHub 上有整理的列表:
https://github.com/enaqx/awes...
中文社区的导航页面:
http://nav.react-china.org

项目来源

目前在视频和录音当中据说过两个说法:

一个是 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/r...

因为 Chrome 已经有 JavaScript 自动编译的功能, 加上 React 的刷新方式
能够作到代码热替换, 在有修改以后快速更新界面上的代码

Flux

前端单页面的应用经常使用的架构之间简单的区别看这里:

实际当中结构会更复杂一点, 好比 Backbone 之间模块的划分,
至少能够发现不是图上展现的单向的一个循环:

并且实际上 MVC 很容易被写成这样, 在 View Model 之间产生复杂的关系:

而 Flux 对 MVC 作了调整, 回到近似 MVC 的单向循环当中:

社区活跃人物

Pete Hunt, Instagram 工程师, 即将离开 Facebook
一块儿开发 React 的工程师能够看这个相关的帖子:
https://www.facebook.com/pwh/...
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/r...

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/i...

惰性计算沾点边.. DOM 树并非每次更新, 而是计算以后缓存住内容, 避免了多余的计算

一些函数式编程语言也接纳了 React 或者 Virtual DOM 用于编写界面:
Om(ClojureScript), eliom(OCaml), PureScript, Elm

响应式编程

Functional Reactive Programming, 表明的语言是 Elm
React 和 Elm 很是类似, Component 的组合方式, 数据不变性, Virtual DOM

https://github.com/component/...
https://github.com/yang/react...
http://reactive-extensions.gi...
http://baconjs.github.io/
http://elm-lang.org/

对比

Ractive: http://blog.ractivejs.org/pos...

Angular: ?

Ember: https://docs.google.com/prese...

Backbone: ?

Vue: https://github.com/yyx990803/...

Web Components: http://programmers.stackexcha...

性能

Pete 有个演讲作了比较深刻的分析 www.youtube.com/watch?v=h3KksH8gfcQ

Todo 的测试: http://vuejs.org/perf/

DOOM 3 渲染架构: http://fabiensanglard.net/doo...