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
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
Other Decks in Programming
See All in Programming
C++でシェーダを書く
fadis
6
4.1k
Click-free releases & the making of a CLI app
oheyadam
2
120
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
cmp.Or に感動した
otakakot
3
190
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
130
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
初めてDefinitelyTypedにPRを出した話
syumai
0
420
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
GraphQLとの向き合い方2022年版
quramy
43
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Navigating Team Friction
lara
183
14k
Practical Orchestrator
shlominoach
186
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
96
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Done Done
chrislema
181
16k
Building Applications with DynamoDB
mza
90
6.1k
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