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
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
テストをしないQAエンジニアは何をしているか?
nealle
0
130
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
CI改善もDatadogとともに
taumu
0
110
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Formの複雑さに立ち向かう
bmthd
1
720
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
ARA Ansible for the teams
kksat
0
150
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Statistics for Hackers
jakevdp
797
220k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Music & Morning Musume
bryan
46
6.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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