《深入浅出React与Redux》（进行中）

[qiansc]

Part.1 React新的前端思维方式
略（Hello Demo）

Part.2 设计高质量的React组件

• Prop定义外部接口、State定义内部状态
• Prop+State 作为 Render的Data输入决定视图 UI = render(data)
• React组件生命周期
  • Mount
    • constructor
    • getInitialState
    • getDefaultProps
    • componentWillMount
    • render
    • componentDidMount
  • Update
    • componentWillReceiveProps
    • shouldComponentUpdate
    • render
    • componentDidUpdate
  • Unmount
    • componentWillUnmount (通常和componentDidMount有关)
• 组件向外传递数据（Based On Props）
• 局限性：组件与子组件维护重复的数据 -> Redux方案管理全局Data
• PropTypes
  • Demo在新版本下问题：PropTypes已经不从react库引入 -> import PropTypes from 'prop-types'

[qiansc]

Part.3 从Flux到Redux

• Flux（Demo）：Action -> Dispatcher -> Store -> View -> Action 模式
  • Action调用Dispatcher产生一个action，Action由View调用
  • Dispatcher 接收到action后会调用绑定过的Store
  • Store监听Dispatcher派发的action，并选取关注的action，驱动model变化，进而派发事件给View
  • View除了视图逻辑，也要实现监听Store的事件
• Flux与MVC
  • MVC：M与V生产中容易产生双向交互、且各MV各自维护状态，发生组件间数据耦合时逻辑混乱
  • Flux：体现了单向数据流的管理方式，视图被限制住只能派发action到（全局）Dispatcher，避免了数据流的混乱
  • Flux不足：
    • 解决多个Store监听同个Action顺序依赖耦合时候引入了waitFor及dispatchToken，造成了Store之间的相互依赖
    • 全局Dispatch造成服务端渲染困难（待研究）
    • Store混杂action处理及数据存储，如果有热载（Hot Load）场景不能胜任（待研究）