React.DOM對象,可以將HTML元素當(dāng)作它的屬性憔涉,變成React組件使用订框。
ReactDOM:渲染的一種途徑,還可以有canvas等
在定義html元素的屬性(例如id)時兜叨,注意class穿扳、for不能直接使用衩侥,因為他們都是js中的關(guān)鍵字,取而代之的是className和htmlFor矛物。
設(shè)置行內(nèi)樣式style茫死,不能用字符串了,避免跨站腳本攻擊履羞,而是使用js對象(鍵值)峦萎,此時屬性名(鍵)用駝峰寫法。
關(guān)于組件:
1忆首、創(chuàng)建新組件:
var myComponent = React.createClass({此處為:一個包含render()方法骨杂、其他方法以及屬性的js對象 });
2、使用該新組件:
React.createElement(新組件名)
另一種方法是使用工廠方法
通過this.props對象傳遞變量的值
propTypes:限制輸入變量的類型等
getDefaultProps()方法返回一個對象雄卷,包含可選參數(shù)的默認(rèn)值
一般而言搓蚪,調(diào)用setState()時,React會調(diào)用render()并更新界面丁鹉。
關(guān)于事件處理:
傳統(tǒng)方式:以點擊事件為例
1)內(nèi)聯(lián)設(shè)置onclick妒潭;2)某元素.addEventListener( )
缺點:兼容問題寫起來代碼冗長
React:使用了駝峰寫法,無需考慮兼容問題
關(guān)于生命周期:
componentWillMount:render之前
componentDidMount:render之后
state改變
componentWillUpdate:
componentDidUpdate:
mixin:代碼復(fù)用
子組件在父組件之前裝載并更新
子組件和父組件之間傳值用props
****一個比較重要的生命周期的方法
shouldComponentUpdate(nextProps, nextState)
這個方法在componentWillUpdate()之前調(diào)用揣钦,可以控制是否render
優(yōu)化性能
React的性能優(yōu)化:
1雳灾、輕量級DOM
2、事件委托
整理一下做的excel功能:
排序:單擊事件冯凹,根據(jù)列判斷升序還是降序谎亩,sort
編輯:雙擊事件,根據(jù)state變?yōu)閕nput元素宇姚,保存時input的值
搜索:onChange事件匈庭,indexOf判斷,filter
下載:reduce浑劳,href和download屬性
還有很多遺留問題和擴展點等待進一步學(xué)習(xí)Z宄帧!