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.1k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
Other Decks in Programming
See All in Programming
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
540
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
Synchronizationを支える技術
s_shimotori
1
150
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
320
EventSourcingの理想と現実
wenas
6
2.1k
CSC509 Lecture 09
javiergs
PRO
0
100
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
150
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
Golang と Erlang
taiyow
8
1.9k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Documentation Writing (for coders)
carmenintech
65
4.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
668
57k
Scaling GitHub
holman
458
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
The Language of Interfaces
destraynor
154
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
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