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
130
react overview
yiminghe
January 27, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
Other Decks in Programming
See All in Programming
Goで作る、開発・CI環境
sin392
0
200
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
C++20 射影変換
faithandbrave
0
560
PicoRuby on Rails
makicamel
2
120
WindowInsetsだってテストしたい
ryunen344
1
230
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
450
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
620
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
5.1k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
540
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Designing for Performance
lara
610
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Facilitating Awesome Meetings
lara
54
6.4k
Code Review Best Practice
trishagee
69
18k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
React overview yiminghe@gmail.com
• 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