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

12. None

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