React 简介 宫煌 2014.11.14 

题外话 about Yahoo http://yahooeng.tumblr.com/post/101682875656/evolving-yahoo-mail 

React 

React 

Overview • 只关注 view 层 • ⻚页⾯面细划分为各部分 component • 核⼼心是组件的 render 

Features • ⻚页⾯面渲染性能好，使⽤用 virtual DOM，避免操纵 DOM 损耗性能 • DOM 的读/写批量进⾏行，减少 layout 计算次数 • 当属性变化时，基于 virtual DOM 全部重新渲染 • 不需要借⽤用模版语⾔言实现逻辑，no strings • 不需要专⻔门操作 DOM 的库（jQuery） 

var ExampleApplication = React.createClass({ render: function() { var appName = this.props.appName; var message = 'React has been successfully running.' + ' Appname is: ' + appName; return React.DOM.p(null, message); } }); var ExampleApplicationFactory = React.createFactory(ExampleApplication); React.render( ExampleApplicationFactory({appName: 'Demo'}), document.getElementById('container') ); Basic usage 

Full example Example

Example

var ExampleApplication = React.createClass({ render: function() { var appName = this.props.appName; var message = 'React has been successfully running.' + ' Appname is: ' + appName; return React.DOM.p(null, message); } }); var ExampleApplicationFactory = React.createFactory(ExampleApplication); React.render( ExampleApplicationFactory({appName: 'Demo'}), document.getElementById('container') ); 

props & state • props 是各 component 之间传递的数据，不 可变 • state 是 component 内部的属性 

No content

Flux • ⼀一种应⽤用设计⽅方式，适⽤用性⼲⼴广泛，不仅⽤用于 react • 区别于 MVC，提出 action dispatcher store view 的概念，数据单向传输 

No content

No content

No content

Action • 定义语意化的的⽅方法，被 view 的 component 调⽤用 • 数据由 view 传到 action 

Dispatcher • 应⽤用的枢纽，由 action 调⽤用 • 数据由 action 传⼊入 dispatcher • new Dispatcher() -> dispatch() 

Store • 通过调⽤用 dispatcher 注册 handle • Dispatcher.register(function(payload ){}) • 数据 payload 由 dispatcher 传⼊入 store 

View • 从 store 获取数据，并监听 store 的变化 • 数据由 store 传⼊入 view • 当 view 通过 setState 改变 state 时，重 新渲染 • 当有浏览器事件时，调⽤用 action 对应⽅方法 

Unidirectional data flow 

Flux 的例⼦子 • React docs 

Tools • chrome devtools 

Tools 

Q&A 

Thanks！