react overview

D226fdd4b353d92a66a1ef71539357f8?s=47 yiminghe
January 27, 2015

react overview

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

January 27, 2015
Tweet

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