react 简介

React 简介宫煌 2014.11.14

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

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

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

Full example <!DOCTYPE html> <html> <head> <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>Example</title> <link rel="stylesheet" href="../shared/css/base.css" /> </head> <body> <h1>Example</h1> <div id="container"> </div> <script src="../../build/react.js"></script> <script> 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') ); </script> </body> </html>

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

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

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

Thanks！

react 简介

react 简介

Yuheng Zhang

More Decks by Yuheng Zhang

Featured

Transcript

React 简介宫煌 2014.11.14

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

React

React

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

Features • ⻚页⾯面渲染性能好，使⽤用 virtual DOM，避免操纵 DOM 损耗性能 • DOM 的读/写批量进⾏行，减少

var ExampleApplication = React.createClass({ render: function() { var appName =

Full example <!DOCTYPE html> <html> <head> <meta http-equiv='Content-type' content='text/html; charset=utf-8'>

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

Flux • ⼀一种应⽤用设计⽅方式，适⽤用性⼲⼴广泛，不仅⽤用于 react • 区别于 MVC，提出 action dispatcher store

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

Dispatcher • 应⽤用的枢纽，由 action 调⽤用 • 数据由 action 传⼊入 dispatcher

Store • 通过调⽤用 dispatcher 注册 handle • Dispatcher.register(function(payload ){}) •

View • 从 store 获取数据，并监听 store 的变化 • 数据由 store

Unidirectional data flow

Flux 的例⼦子 • React docs

Tools • chrome devtools

Tools

Q&A

Thanks！