10.24日
react 官網(wǎng)tutorial(15：14 --17：06 （中間休息半個(gè)小時(shí)）1.5h左右)
1.ES6 寫法
onClick={()=>alert('click')}
注意到這里我們傳給onClick屬性的是一個(gè)函數(shù)方法，假如我們寫的是onClick={alert('click')}警示框是會(huì)立即彈出的欺殿。
2. supper()
使用JavaScript classes時(shí)逢勾，你必須調(diào)用 super() 方法才能在繼承父類的子類中正確獲取到類型的this
3. 組件間數(shù)據(jù)傳遞
當(dāng)你遇到需要同時(shí)獲取多個(gè)子組件數(shù)據(jù)互站，或者兩個(gè)組件之間需要相互通訊的情況時(shí)杰捂，把子組件的 state 數(shù)據(jù)提升至其共同的父組件當(dāng)中保存结洼。之后父組件可以通過 props 將狀態(tài)數(shù)據(jù)傳遞到子組件當(dāng)中枷畏。這樣應(yīng)用當(dāng)中的狀態(tài)數(shù)據(jù)就能夠更方便地交流共享了敷硅。
學(xué)習(xí)至狀態(tài)提升
react官網(wǎng)快速開始 17:13 --17：57
包管理器yarn npm
構(gòu)建器 webpack Browserify? 編寫模塊代碼并將其壓縮巩步，優(yōu)化加載時(shí)間旁赊。
編譯器 Babel
abel 安裝說明說明了如何在多種不同的環(huán)境中配置 Babel，確保你已經(jīng)安裝了babel-preset-react和babel-preset-es2015并且在.babelrcconfiguration配置文件中啟用它們, 到這里就準(zhǔn)備就緒了码倦。
開發(fā)和生產(chǎn)版本
默認(rèn)情況下驼修，React 會(huì)包含很多有用的警告砸捏，這些警告在開發(fā)中非常有用。
然而离福，這些警告使開發(fā)版本的 React 體積過大并且運(yùn)行過慢，所以你應(yīng)該在部署應(yīng)用時(shí)使用生產(chǎn)版本
了解如何判斷你的網(wǎng)頁是否運(yùn)行了合適的 React 版本, 以及如何有效的配置生產(chǎn)構(gòu)建程序：
JSX 本身其實(shí)也是一種表達(dá)式
在編譯之后呢炼蛤，JSX 其實(shí)會(huì)被轉(zhuǎn)化為普通的 JavaScript 對(duì)象妖爷。
這也就意味著，你其實(shí)可以在if或者for語句里使用 JSX理朋，將它賦值給變量絮识，當(dāng)作參數(shù)傳入绿聘，作為返回值都可以
引號(hào)來定義以字符串為值的屬性 大括號(hào)來定義以 JavaScript 表達(dá)式為值的屬性
如果 JSX 標(biāo)簽是閉合式的，那么你需要在結(jié)尾處用 />
JSX 標(biāo)簽同樣可以相互嵌套
JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用camelCase小駝峰命名 來定義屬性的名稱次舌，而不是使用 HTML 的屬性名稱熄攘。
例如，class變成了className彼念，而tabindex則對(duì)應(yīng)著tabIndex.
JSX 防注入攻擊
元素是構(gòu)成 React 應(yīng)用的最小單位挪圾。
React 元素都是immutable 不可變的。當(dāng)元素被創(chuàng)建之后逐沙，你是無法改變其內(nèi)容或?qū)傩缘穆迨贰８陆缑娴奈ㄒ晦k法是創(chuàng)建一個(gè)新的元素
React 只會(huì)更新必要的部分
組件可以將UI切分成一些的獨(dú)立的、可復(fù)用的部件酱吝，這樣你就只需專注于構(gòu)建每一個(gè)單獨(dú)的部件也殖。
react官網(wǎng)快速開始 21:09 -- 21：48
React元素 可以是DOM標(biāo)簽，也可以是用戶自定義的組件
組件名稱必須以大寫字母開頭
組件的返回值只能有一個(gè)根元素务热。這也是我們要用一個(gè)
來包裹所有元素的原因忆嗜。
純函數(shù)? 有改變它自己的輸入值，當(dāng)傳入的值相同時(shí)崎岂，總是會(huì)返回相同的結(jié)果捆毫。
非純函數(shù) 會(huì)改變它自身的輸入值
node建站 23：09--23:17
react 音樂播放器 23:17 -- 0：14
React-router
browserHistory (yoursite.com/a/b)
hashHistory (yoursite.com/#a/b)
兩種組件 （react 2.0）
IndexRoute (沒有url時(shí)，系統(tǒng)默認(rèn)使用這個(gè))
Route
<Link to = "uri" > </limk>
建立App組件類
history={hashHistory}
使用哈希uri格式
Route 可以嵌套 只更新頁面局部?jī)?nèi)容
path="/list"component={MusicList}
path 路徑 component路徑對(duì)應(yīng)的組件 IndexRoute默認(rèn)首頁冲甘？
this.props.children
當(dāng)前App下的子組件 匹配到的components
React.cloneElement(this.props.children,this.state)
克隆組件 用于傳入數(shù)據(jù)绩卤，因?yàn)镽oute定位組件并未傳入數(shù)據(jù)
this.props.children克隆的組件
this.state 克隆的數(shù)據(jù)
展示結(jié)果 ： 有uri對(duì)應(yīng)頁面 頁面uri不一樣 需要提供跳轉(zhuǎn)頁面功能
使用Link跳轉(zhuǎn)到相對(duì)應(yīng)的頁面<Link to=""></Link>
???列表頁增加詳情信息？江醇？濒憋？
react 音樂播放器 21:05 -- 21：28? ? 22:48-23：13 ? ? 23:53 -- 01:11
運(yùn)用“訂閱”功能管理傳遞參數(shù)
onClick 不應(yīng)該是可執(zhí)行函數(shù)，應(yīng)該是函數(shù)句柄陶夜。凛驮？？条辟？運(yùn)用bind()綁定作用域同時(shí)傳參
stopPropagation()阻止事件冒泡黔夭？？
Pubsub.publish 發(fā)布事件 subscribe 接收事件 ? ?unsubscribe 解綁事件(普通解綁用unbind)
播放下一曲?
思路：獲取musiclist的index 然后播放?
方法：
1.獲取index方法 indexOf()?
2. 獲取是當(dāng)前列表下第幾首歌曲 用取余的方法避免最后一首變換成第一首時(shí)需要的變化羽嫡。
onClick={this.playPrev}
{this.state.leftTime}
formatTime(time){
? ? ?time=Math.floor(time);
? ? ?letminutes=Math.floor(time/60);
? ? ?letseconds=Math.floor(time%60);
? ? ?seconds=seconds<10?`0${seconds}`:seconds;
? ? ?return`${minutes}:${seconds}`;
},
改變剩余時(shí)間: getInitialState 加參數(shù) componentDidMount(){} 對(duì)事件進(jìn)行操作?
virtual DOM
DOM diff
