react overview - Speaker Deck

Slide 1

Slide 1 text

React overview [email protected]

Slide 2

Slide 2 text

•  React •  Flux •  Ecosystem •  Prac:ce

Slide 3

Slide 3 text

React •  Component •  Virtual dom •  Life cycle •  Server render

Slide 4

Slide 4 text

Component

Slide 5

Slide 5 text

Virtual dom

Slide 6

Slide 6 text

Dom diﬀ

Slide 7

Slide 7 text

Virtual dom •  Updates the dom as eﬃciently as possible •  Huge performance boost •  Avoid thinking about managing the DOM

Slide 8

Slide 8 text

Lifecycle •  Construc:on – getDefaultProps() – getIni:alState() – componentWillMount() – render() – componentDidMount() – componentWillUnmount()

Slide 9

Slide 9 text

Lifecycle •  Update status – componentWillReceiveProps() – shouldComponentUpdate() – componentWillUpdate() – render() – componentDidUpdate()

Slide 10

Slide 10 text

ﬂux •  Single-‐direc:on data ﬂow applica:on paRer – Ac:on – Dispatcher – Store – View

Slide 11

Slide 11 text

dispatcher store view ac:on

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

principle •  Unidirec:onal data ﬂow •  Composability •  Predictable reliable testable •  Declara:ve

Slide 14

Slide 14 text

ecosystem •  commonjs •  npm •  spm/browserify/webpack

Slide 15

Slide 15 text

教程 – npm based front-‐end development – 如何写一个 react 组件 –  react 组件规范（编码，设计） – 如何移植传统组件(kissy)到 react

Slide 16

Slide 16 text

Our prac:ce •  hRp://github.com/react-‐component/

Slide 17

Slide 17 text

React vs angular •  Framework vs library –  concepts •  Direc:ve vs component –  Easy vs hard •  Performance –  Watch vs diﬀ –  String/dom template vs jsx/virtual •  Server render –  Client vs Isomorphic •  BaRle tested –  Google? vs Yahoo,facebook •  Cross browser –  pc vs pc/mobile