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
110
react overview
yiminghe
January 27, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
58
支付宝小程序的开放架构
yiminghe
0
140
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
170
react-based architecture
yiminghe
2
130
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
200
react best practice
yiminghe
3
160
react at alipay
yiminghe
43
4k
Other Decks in Programming
See All in Programming
Rethinking UI building strategies @ SFI 2024
letelete
0
270
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Fragment Composition of GraphQL
quramy
7
1k
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Netty Chicago Java User Group 2024-04-17
sullis
0
180
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Writing Fast Ruby
sferik
621
60k
Docker and Python
trallard
34
2.7k
Designing the Hi-DPI Web
ddemaree
276
33k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
BBQ
matthewcrist
80
8.8k
Atom: Resistance is Futile
akmur
259
25k
Web Components: a chance to create the future
zenorocha
305
41k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
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