React的特點

• React不是一個完整的MVC，MVVM框架，只負(fù)責(zé)view層。
• React跟Web Components不沖突
• React的特點就是“輕”
• 組件化的開發(fā)思路

React的優(yōu)點

• 復(fù)雜場景下的高性能
• 重用組件庫，組件組合
• 懶

React

• JSX （javascript xml）：Facebook為react開發(fā)的語法糖，對程序的功能沒有什么影響，增強(qiáng)程序的可讀性。
• 組件通過this.props來或許父類傳來的參數(shù)。
• 在react中寫類的時候，用className=“name”，如果用內(nèi)聯(lián)樣式，那么用樣式對象來寫className={{color:'red'}}，因為{}是計算符，所以外面要寫一個，一般的css，在react中用駝峰寫法，比如：font-size，用fontSize來寫就可以了。

聲明周期

react通過對每個狀態(tài)封裝hook函數(shù)。

• mounting：getDefaultProps()=>getInitialState()=>componentWillMount=>render=>componentDidMount
• updating（很少修改，按照內(nèi)部實現(xiàn)）：componentWillReceiveProps=>shouldComponentUpdate=>componentWillUpdate=>render=>componentDidUpdate
• unmounting（不需要操作，因為瀏覽器有自己的垃圾回收機(jī)制）：componentWillUnmount
• 利用state，直接使用this.state就可以使用，里面可以定義數(shù)據(jù)類型和方法。
• props：一旦指定，一般不會變，值是父組件傳遞給子組件，是外來的。
• state：屬于當(dāng)前組件，是可變的，通過setState()可以修改state。
• componentWillReceiveProps：當(dāng)有新的props時候，會被調(diào)用，參數(shù)為新的props。
• shouldComponentUpdate：接受新的props或者state之后調(diào)用，兩個參數(shù)，分別為新的props和state。
• React.render(element,container)，只可以包含一個element，如果使用多個，可以用一個容器包起來。

React-Event-Listener

• onClick：綁定事件很簡單，駝峰式寫法。
• ref="tip"：通過對組件里面的元素添加ref屬性，來達(dá)到引用的效果。<div ref="tip">124</div>，引用的時候，通過this.refs.tip，這個是虛擬的，要通過React,findDOMNode(this.refs.tip)來才可以。

React實戰(zhàn)

• 通過yeoman來生成項目.
• 熱啟動。REACT_DEVTLOOLS_GLOBAL_HOOK，通過這個全局對象來安裝chrome的react插件。
• babel：將es6轉(zhuǎn)換為es5

webpack

• 插件html等。
• 加載器css-loader等。

Redux

• 數(shù)據(jù)流是我們的行為與響應(yīng)的抽象。
• 使用數(shù)據(jù)流幫助我們明確了行為對應(yīng)的響應(yīng)。
• 單向數(shù)據(jù)流
• Paste_Image.png
• React 簡單回顧
• Paste_Image.png
• react-redux
• Paste_Image.png

項目結(jié)構(gòu)

• actions：用戶行為
  是行為的抽象
  是普通的action對象
  一般由方法生成
  必須有一個type屬性
• components：組件
• container：組件
• reducer：分發(fā)action
  是響應(yīng)的抽象
  純方法
  傳入舊狀態(tài)和action
  返回新狀態(tài)
  store
  action作用于store
  reducer根據(jù)store響應(yīng)
  store是唯一的
  store包括了完整的state
  state完全可預(yù)測
• 組件
• Paste_Image.png