react 简介

react 简介

Transcript

1. React 简介 宫煌 2014.11.14
2. 题外话 about Yahoo http://yahooeng.tumblr.com/post/101682875656/evolving-yahoo-mail
3. React
4. React
5. Overview • 只关注 view 层 • ⻚页⾯面细划分为各部分 component • 核⼼心是组件的 render
6. Features • ⻚页⾯面渲染性能好，使⽤用 virtual DOM，避免操纵 DOM 损耗性能 • DOM 的读/写批量进⾏行，减少 layout 计算次数 • 当属性变化时，基于 virtual DOM 全部重新渲染 • 不需要借⽤用模版语⾔言实现逻辑，no strings • 不需要专⻔门操作 DOM 的库（jQuery）
7. 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
8. 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>
9. props & state • props 是各 component 之间传递的数据，不 可变 • state 是 component 内部的属性
11. Flux • ⼀一种应⽤用设计⽅方式，适⽤用性⼲⼴广泛，不仅⽤用于 react • 区别于 MVC，提出 action dispatcher store view 的概念，数据单向传输
15. Action • 定义语意化的的⽅方法，被 view 的 component 调⽤用 • 数据由 view 传到 action
16. Dispatcher • 应⽤用的枢纽，由 action 调⽤用 • 数据由 action 传⼊入 dispatcher • new Dispatcher() -> dispatch()
17. Store • 通过调⽤用 dispatcher 注册 handle • Dispatcher.register(function(payload ){}) • 数据 payload 由 dispatcher 传⼊入 store
18. View • 从 store 获取数据，并监听 store 的变化 • 数据由 store 传⼊入 view • 当 view 通过 setState 改变 state 时，重 新渲染 • 当有浏览器事件时，调⽤用 action 对应⽅方法
19. Unidirectional data flow
20. Flux 的例⼦子 • React docs
21. Tools • chrome devtools
22. Tools
23. Q&A
24. Thanks！