[轉]React官方學習筆記

標籤：

Origin
1、React並不會通過String類型的Html片段產生DOM
2、在componentWillReceiveProps中調用setState()不會觸發re-render
3、componentWillUpdate中不能調用this.setState()
4、在通過Ajax擷取到資料，調用this.setState()之前，應該通過this.isMounted()確定當前的component已經處在渲染完成的階段
5、父組件到子組件通過props傳遞資料，子組件向父組件傳遞資料通過global event方式來處理，即在root element上接受所有子組件的事件處理
6、行動裝置的touch事件需手動開啟：React.initializeTouchEvents(true)
7、setState(data, callback)中的callback是在re-render完成之後調用的

FLUX
1、Dispatcher分發來自頁面事件行為的事件名稱和資料到全域的Store中
2、Dispather中要註冊各種事件及其對應的行為(更新Store)
3、通過使用類似於MicroEvent.js這樣的類庫，為Store提供對象的事件行為，監聽它的資料變化
4、在componentDidMount中註冊Store的行為，在componentWillUnmount中解除綁定Store的行為

JSX
1、組件的變數名必須大寫，用於區分原生的Html標籤和自訂群組件
2、用大括弧包裹的js運算式來表示組件的屬性，替代原生寫法的雙引號
3、如果想給最終裝換成的HTML元素添加自訂的屬性，必須用首碼"data-“
4、props應該作為不可變常量使用，不能component.props.foo = x 這樣使用
5、<Component {…someObj} /> 可以將someObj中的所有屬性寫進Component的props中
6、<Component {…someObj} attr=“higherLevel" /> 中的attr屬性會複寫someObj中的同名屬性
7、JSX封裝了React的原生介面為類XML協議的文法，使之更加易於編寫
8、擷取父級的屬性用this.props，擷取內嵌的子項目用this.props.children
9、為防止XSS攻擊，提供安全性，在插入原生的HTML時需使用

<span dangerouslySetInnerHTML={{__html: rawHtml}}>

10、css的內嵌寫法style，必須接受一個對象，其key是css屬性名稱，多單詞屬性採用小駝峰寫法，如果需要添加瀏覽器廠商首碼，則該首碼的首字母必須大寫
11、除指定的某些元素(http://facebook.github.io/react/tips/style-props-value-px.html
)外，style中的屬性值如果是純數字會添加’px’尾碼，如{height: 10} 編譯成 height: 10px
12、通過this.transferPropsTo( subComponent ) 將當前組件的所有props傳遞給它的某個子組件，也可以通過{...this.props}的方式傳遞

[轉]React官方學習筆記