Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react overview
Search
yiminghe
January 27, 2015
Programming
1
120
react overview
yiminghe
January 27, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
150
支付宝小程序的开放架构
yiminghe
0
170
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
260
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.1k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Writing documentation can be fun with plugin system
okuramasafumi
0
120
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Spring gRPC について / About Spring gRPC
mackey0225
0
220
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
CI改善もDatadogとともに
taumu
0
110
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
技術を根付かせる / How to make technology take root
kubode
1
240
WebDriver BiDiとは何なのか
yotahada3
1
140
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Pragmatic Product Professional
lauravandoore
32
6.4k
A designer walks into a library…
pauljervisheath
205
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Automating Front-end Workflow
addyosmani
1367
200k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Transcript
React overview
[email protected]
• React • Flux • Ecosystem
• Prac:ce
React • Component • Virtual dom • Life
cycle • Server render
Component
Virtual dom
Dom diff
Virtual dom • Updates the dom as efficiently as possible
• Huge performance boost • Avoid thinking about managing the DOM
Lifecycle • Construc:on – getDefaultProps() – getIni:alState() – componentWillMount()
– render() – componentDidMount() – componentWillUnmount()
Lifecycle • Update status – componentWillReceiveProps() – shouldComponentUpdate() – componentWillUpdate()
– render() – componentDidUpdate()
flux • Single-‐direc:on data flow applica:on paRer – Ac:on
– Dispatcher – Store – View
dispatcher store view ac:on
None
principle • Unidirec:onal data flow • Composability •
Predictable reliable testable • Declara:ve
ecosystem • commonjs • npm • spm/browserify/webpack
教程 – npm based front-‐end development – 如何写一个 react 组件
– react 组件规范(编码,设计) – 如何移植传统组件(kissy)到 react
Our prac:ce • hRp://github.com/react-‐component/
React vs angular • Framework vs library – concepts
• Direc:ve vs component – Easy vs hard • Performance – Watch vs diff – String/dom template vs jsx/virtual • Server render – Client vs Isomorphic • BaRle tested – Google? vs Yahoo,facebook • Cross browser – pc vs pc/mobile