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
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
みんなでプロポーザルを書いてみた
yuriko1211
0
280
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
260
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.2k
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
1
110
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
CSC509 Lecture 11
javiergs
PRO
0
180
Realtime API 入門
riofujimon
0
150
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
BBQ
matthewcrist
85
9.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Building Applications with DynamoDB
mza
90
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
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