【转】React.js 概览
原文转自:http://segmentfault.com/blog/jiyinyiyong/1190000000693651
这里关于 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
【转】React.js 概览的更多相关文章
- 收集的React.JS资料
主页 http://facebook.github.io/react/ https://github.com/facebook/react 中文站 http://www.reactjs.cn/ h ...
- React JS快速开始手册
怎样用React JS构建一个用户界面?本文将快速地给你一个React JS的概览.代码,请君移步react-starter 概念 React只有很少的API,这使得它很容易去学习与理解.当然,使用它 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- React.js入门笔记(再续):评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
随机推荐
- 再谈HTML
关于WEB 采用B/S计算模式开发的应用程序我们一般称为Web应用程序. WEB三大层面: 网页的结构部分:结构的定义使用HTML语言(超文本标记语言Hyper Text Mark Up Langua ...
- MongoDb系列
这个系列主要总结学习MongoDb过程中的一些经验. 简单介绍及环境搭建 常用命令 C#驱动及应用 管理工具MongoVUE使用
- ASCII字符集
十进制 八进制 十六进制 二进制 字符 ASCII名称 0 0 0 0000 0000 ^@ NUL 1 1 1 0000 0001 ^A SOH 2 2 2 0000 0010 ^B STX 3 3 ...
- eclipse常用10个快捷键[转载]
转载自:http://www.jb51.net/softjc/139467.html
- hduacm 5255
http://acm.hdu.edu.cn/showproblem.php?pid=5255 枚举a和c 求解b #include <cstdio> #include <cstri ...
- 二模 (8) day2
第一题: 题目描述: 有 n 个炸弹,有些炸弹牵了一根单向引线(也就是说引线只有在这一端能被炸弹点燃),只要引爆了这个炸弹,用引线连接的下一个炸弹也会爆炸.每个炸弹还有个得分,当这个炸弹被引爆后就能得 ...
- NOIP 2003解题报告
第一题(神经网络): 题目大意,给出一些点,每个点都有2个值,c和u,给出一些有向边,权值为w.入度为0的点的c已知,其它点的c未知,每个入度不为0的点node的c等于sum(c[k]*w[k][no ...
- subString用法,字符串保持一定位数,不足补0
Substrinig(a,b): 从下标a开始截取,共截取b位 实现:一串数字,中间两位数字+2,生成新的一串数字 "; , number.Length - );//前8位 );//后6位 ...
- ROS主题发布订阅控制真实的机器人下位机
先模拟控制小乌龟 新建cmd_node.ccpp文件: #include"ros/ros.h" #include"geometry_msgs/Twist.h" ...
- POJ 3237
题目大意:指定一颗树上有3个操作:询问操作,询问a点和b点之间的路径上最长的那条边的长度:取反操作,将a点和b点之间的路径权值都取相反数:变化操作,把某条边的权值变成指定的值. #include &l ...