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
Synchronizationを支える技術
s_shimotori
1
150
GCCのプラグインを作る / I Made a GCC Plugin
shouth
1
150
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
570
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
340
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
CSC305 Lecture 13
javiergs
PRO
0
130
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.7k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Six Lessons from altMBA
skipperchong
26
3.5k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
For a Future-Friendly Web
brad_frost
175
9.4k
What's in a price? How to price your products and services
michaelherold
243
12k
Git: the NoSQL Database
bkeepers
PRO
426
64k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
How to Ace a Technical Interview
jacobian
275
23k
4 Signs Your Business is Dying
shpigford
180
21k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
800
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