react overview

Transcript

1. React  overview yiminghe@gmail.com
2. •  React   •  Flux   •  Ecosystem     •  Prac:ce
3. React •  Component   •  Virtual  dom   •  Life  cycle   •  Server  render
4. Component
5. Virtual  dom
6. Dom  diff
7. Virtual  dom •  Updates  the  dom  as  efficiently  as  possible   •  Huge  performance  boost   •  Avoid  thinking  about  managing  the  DOM
8. Lifecycle •  Construc:on   – getDefaultProps()   – getIni:alState()   – componentWillMount()   – render()   – componentDidMount()   – componentWillUnmount()
9. Lifecycle •  Update  status   – componentWillReceiveProps()   – shouldComponentUpdate()   – componentWillUpdate()   – render()   – componentDidUpdate()
10. flux •  Single-­‐direc:on  data  flow  applica:on  paRer   – Ac:on   – Dispatcher   – Store   – View
11. dispatcher store view ac:on
13. principle •  Unidirec:onal  data  flow   •  Composability   •  Predictable  reliable  testable   •  Declara:ve
14. ecosystem •  commonjs   •  npm   •  spm/browserify/webpack
15. 教程 – npm  based  front-­‐end  development   – 如何写一个 react  组件   –   react  组件规范（编码，设计）   – 如何移植传统组件(kissy)到  react  
16. Our  prac:ce •  hRp://github.com/react-­‐component/  
17. 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