React-引领未来的用户界面开发框架-读书笔记（二）
第4章 數(shù)據(jù)流
Props(properties 特性)
用途：可以把任意類型的數(shù)據(jù)傳遞給組件
2種方式設(shè)置props：
- 掛載組件時(shí)：<ListSurveys surveys={surveys}/>
- 調(diào)用組件實(shí)例的setProps方法：listSurveys.setProps({ surveys: survey });
setProps注意點(diǎn)：
- 只能在子組件上或組件樹外調(diào)用setProps
- 千萬別調(diào)用this.setProps或者修改this.props（一個(gè)組件絕對不可以修改自己的props）、
- 有需要請使用state！！！
可以通過this.prpos訪問props，但絕不能通過這種方式修改它。一個(gè)組件絕對不可以修改自己的props。
在jsx中，可以把props設(shè)置為字符串：
<a href="http://www.molinblog.com">molinblog</a>也可以使用{}語法來設(shè)置，注入JavaScript傳遞任意類型的變量：
<a href={'http://www.molinblog.com/blog/' + blog.id}>{blog.title}</a>還可以使用JSX的展開語法把props設(shè)置成一個(gè)對象：
render () {var props = {one: 'foo',two: 'bar'};return (<SurveyTable {...props} />) }props還可以用來添加事件處理程序：
render () {return (<a className='button save' onClike={this.handleClick}>Save</a>); } handleClick: function() {// ... }PropsTypes
一臉黑線？？？？？？？？？、、
getDefaultProps
es5中使用示例：
var NewDom = React.createClass({//類名一定要大寫開頭getDefaultProps: function() {//設(shè)置默認(rèn)屬性return {title:'133'};},propTypes: {title:React.PropTypes.string,},//屬性校驗(yàn)器，表示必須是stringrender: function() {return <div>{this.props.title}</div>;//變量用花括號標(biāo)識} });es6中使用示例：
const React = require('react'); const ReactDOM = require('react-dom');import {Promise} from 'es6-promise'class NewDom extends React.Component{//不能再組件定義的時(shí)候定義一個(gè)屬性render() {return <div >{this.props.title}</div>;}//開頭花括號一定要和小括號隔一個(gè)空格，否則識別不出來 } //es6 這兩個(gè)屬性不能寫在class內(nèi)。 NewDom.propTypes={//屬性校驗(yàn)器，表示改屬性必須是string，否則報(bào)錯(cuò)title: React.PropTypes.string, } NewDom.defaultProps={title:'fsdfd133'};//設(shè)置默認(rèn)屬性ReactDOM.render((<NewDom></NewDom> ), document.querySelector('#init'))state
放在state和props的各是哪些部分？
- state中應(yīng)存那些簡單的組件正常工作時(shí)的必須要的數(shù)據(jù)。（布爾值，輸入框值等）
- 不要嘗試把props復(fù)制到state中，要盡可能把props當(dāng)作數(shù)據(jù)源
總結(jié)
- 使用了props在整個(gè)組件樹中傳遞數(shù)據(jù)和配置
- 避免在組件內(nèi)部修改this.props或調(diào)用this.setProps,請把props當(dāng)作是只讀的
- 使用props來做事件處理器（下一章會(huì)細(xì)節(jié)化），與子組件通信
- 使用state存儲(chǔ)簡單的視圖狀態(tài)，比如下拉框是否可見這樣的狀態(tài)
- 使用this.setState來設(shè)置狀態(tài)，而不要使用this.state直接修改狀態(tài)
第5章 事件處理
展示頁面＋js響應(yīng)事件＝用戶界面整體設(shè)計(jì)
綁定事件處理器
react處理的事件本質(zhì)和原生js一樣（包括命名）
jsx版：
<button className="btn btn-save" onClick={this.handleSave}>Save</button>js版
React.DOM.button({className: "btn btn-save", onClick: this.handleSaveClicked}, "Save");jsx的寫法類似HTML內(nèi)聯(lián)時(shí)間處理器屬性，比如onClick，但其實(shí)在底層實(shí)現(xiàn)上并沒有使用HTML的onClick屬性（而是通過事件處理之類的方法？）。
react對各類事件類型提供良好的支持，具體支持列在這里
其中絕大部分事件不需要額外的處理就能工作，但是觸控事件需要通過調(diào)用以下的代碼手動(dòng)啟用：
React.initializeTouchEvents(true) // 是否已被改動(dòng)？？？？事件和狀態(tài)
解決組件隨著用戶輸入而改變的問題，經(jīng)過特定組件渲染后，綁定的事件處理器方法負(fù)責(zé)處理行為。
根據(jù)狀態(tài)進(jìn)行渲染
可以在render中讀取this.state，然后根據(jù)this.state的值渲染出不同的頁面。
更新狀態(tài)
更新組件狀態(tài)有兩種方案：組件的setState方法和replaceState方法。replaceState用一個(gè)全新的state對象完整地替換掉原有的state。使用不可變數(shù)據(jù)結(jié)構(gòu)來表示時(shí)，這種方式很有效，不過很少應(yīng)用于其他場景下。
??永遠(yuǎn)不要嘗試通過setState或者replaceState以外的方式去修改state對象。類似this.saveInProgress = true通常不是一個(gè)好主意，因?yàn)樗鼰o法通過React是否需要重新渲染組件，而且可能會(huì)導(dǎo)致下次調(diào)用setState時(shí)出現(xiàn)意外結(jié)果。
本節(jié)可參考極客學(xué)院
事件對象
使用event.target.value可以獲取表單中input值。
事件處理程序通過 合成事件（SyntheticEvent）的實(shí)例傳遞，SyntheticEvent 是瀏覽器原生事件跨瀏覽器的封裝。SyntheticEvent 和瀏覽器原生事件一樣有 stopPropagation()、preventDefault() 接口，而且這些接口夸瀏覽器兼容。
如果出于某些原因想使用瀏覽器原生事件，可以使用 SyntheticEvent的nativeEvent 屬性獲取。
本節(jié)可參考極客學(xué)院
總結(jié)
從用戶輸入到更新用戶界面，處理步驟非常簡單：
- 在react組件上綁定事件處理器
- 在事件處理器當(dāng)中更新組件的內(nèi)部狀態(tài)。組件狀態(tài)的更新會(huì)出發(fā)重繪
- 實(shí)現(xiàn)組件的render函數(shù)用來渲染this.state的數(shù)據(jù)
第6章 組件的復(fù)合
傳統(tǒng)HTML當(dāng)中，元素是構(gòu)成頁面的基礎(chǔ)單元。在React中，React組件是構(gòu)成頁面的基礎(chǔ)單元。
本質(zhì)上，一個(gè)組件就是一個(gè)JavaScript函數(shù)，它接受屬性（props）和狀態(tài)（state）作為參數(shù)，并輸出渲染好的HTML。組件一般被用來呈現(xiàn)和表達(dá)應(yīng)用的某部分?jǐn)?shù)據(jù)，因此你可以把react組件理解為HTML元素的擴(kuò)展。
擴(kuò)展HTML
React加jsx是強(qiáng)大而富有表現(xiàn)力的工具，允許我們使用類似HTML的語法創(chuàng)建自定義元素。比起單純的HTML，它們還能夠控制生命周期中的行為。
React偏愛符合，即通過結(jié)合小巧的、簡單的組件和數(shù)據(jù)對象，構(gòu)造大而復(fù)雜的組件。React組件使不可以擴(kuò)展的，而是通過組件之間的組合來構(gòu)建應(yīng)用。
組件復(fù)合的例子
組合模式的特征：選擇題組件有一個(gè)單選框，單選框有一個(gè)輸入框元素Input。
組裝HTML
對于每一個(gè)非必需的屬性都需要一個(gè)默認(rèn)值，可以把它添加到defaultProps中。
追蹤狀態(tài)
組件需要記錄隨時(shí)間而變化的數(shù)據(jù)。
整合到父組件中
將子組件放到父組件中
父組件、子組件關(guān)系
子組件與其福組件通信的最簡單方式就是使用屬性（props）。父組件可以通過屬性傳入一個(gè)毀掉函數(shù)，子組件在需要時(shí)進(jìn)行調(diào)用。
總結(jié)
組件的復(fù)合知識React提供的用于定制和特殊化組件的方式之一。
可通過本章的例子深入了解組件的復(fù)合。page44~52
第7章 mixin
mixin允許我們定義可以在多個(gè)組件中公共用的方法。
什么是mixin
mixin相當(dāng)簡單，他們就是混合進(jìn)組件類中的對象而已。React在這方面實(shí)現(xiàn)得更加深入，它能防止靜默函數(shù)覆蓋，同時(shí)還支持多個(gè)mixin混合。
以component開頭的生命周期函數(shù)，如componentDidMount，會(huì)按照在mixin數(shù)組中定義的順序被調(diào)用，并最終調(diào)用組件中定義的componentDidMount，如果它存在的話。
關(guān)于mixin的其它用法可參考：
- 一個(gè)監(jiān)聽事件并修改state的mixin（如flux store mixin）。
- 一個(gè)上環(huán)mixin，它負(fù)責(zé)處理XHR上傳請求，同時(shí)將狀態(tài)以及上傳的進(jìn)度同步到state
- 渲染層mixin，簡化在<\/body>之前渲染子元素的過程（如渲染模態(tài)對話框）
總結(jié)
mixin是解決代碼段重復(fù)的最強(qiáng)大工具之一，它同時(shí)還能讓組件保持專注于自身的業(yè)務(wù)邏輯。mixin允許我們使用強(qiáng)大的抽象功能，甚至有些問題如果沒有mixin就無法被優(yōu)雅地解決。
即使我們只打算在單個(gè)組件中使用一個(gè)mixin，它還是為我們提供了描述一個(gè)特定行為或角色并提供給該組件的能力。mixin減少了我們在了解整個(gè)組件之前需要閱讀的代碼量，同時(shí)允許我們在不污染組件本身的情況下做一些丑陋的處理（比如管理內(nèi)部__interval）。
總結(jié)
以上是生活随笔為你收集整理的React-引领未来的用户界面开发框架-读书笔记（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React-引领未来的用户界面开发框架-
- 下一篇： React-引领未来的用户界面开发框架-