组件架构(react)下的WebApp开发(战术打法)

Why React?

• Components (React)
• Model (Flux)
• Scalability (React x React Touch)
• Reliability

Component

• Lifecycle:

  mounting > updating > unmouting

  [mouting] componentWillMount()

  [mouting] componentDidMount()

  [updating] componentWillReceiveProps(nextProps) // setState不触发事件

  [updating] shouldComponentUpdate(nextProps, nextState) // return false可以阻止演染

  [updating] componentWillUpdate(nextProps, nextState)

  [updating] componentDidUpdate(prevProps, prevProps)

  [unmouting] componentWillUnmount()

• State & Props: 状态和属性, 声明式/面向领域
• Virtual DOM
• JSX Syntax
• Demo: ImageViewer

Data Flow

• One-way binding: 关联状态
• Flux
• Demo: Login

Flux vs. MVC

(图片来自fluxxor.com)

Scalability

• React Touch: Routing
• SIRA: 如何审视自己的代码架构

  (S)plit

  (I)solation

  (R)emix

  (A)bstract

• Demo: X2

  React x React Touch x Cuvee UI x Zynga Scroller x SCSS x Gulp x Webpack