react學習筆記

標籤：

React 學習
準備
　　程式包控制台
　　　　可以使用npm命令 npm install-package react.js
　　nuget 搜尋 react 安裝對應版本的 reactjs.net
　　添加///_reference.js來添加自動提示
API
　　React
　　　　建立組件類--ReactClass
　　　　　　React.createClass(object specification)
　　　　　　實現reader()方法
　　　　建立ReactElement
　　　　　　React.createElement(ReactClass,props,children...)
　　　　　　ReactClass也可以是div，span
　　　　　　屬性
　　　　　　　　type,
　　　　　　　　props,
　　　　　　　　key,
　　　　　　　　ref
　　　　React.createFactory(string/ReactClass type)
　　　　　　大量建立某組件執行個體時用
　　　　　　React.DOM.ul() 內建的html標籤的工廠函數
　　　　React.render--ReactComponent
　　　　　　React.render(ReactElement element,DOMElement container,[function callback])
　　　　React.unmountComponentAtNode(DOMElement container)
　　　　　　移除，返回true移除成功，false是沒有組件移除
　　　　React.renderToString(ReactElement element)
　　　　　　渲染為html字串，僅在伺服器端用，有利於快速，seo
　　　　React.renderToStaticMarkup(ReactElement element)
　　　　　　渲染為html字串，和renderToString類似，但會去掉額外屬性支付，
　　　　React.isValidElement(* object)
　　　　　　判斷對象是否是一個 ReactElement
　　　　React.DOM
　　　　　　封裝dom:例如，React.DOM.div(null, ‘Hello World!‘)
　　　　React.PropTypes
　　　　　　包含公用類型，用於驗證props
　　　　React.initializeTouchEvents(boolean shouldUseTouch)
　　　　　　配置啟用處理觸摸（touch)時間
　　　　React.Children
　　　　　　處理 this.props.children
　　　　　　　　React.Children.map(object children, function fn [, object context])
　　　　　　　　　　每個子集調用fn,map會返回對象
　　　　　　　　React.Children.forEach(object children, function fn [, object context])
　　　　　　　　　　遍曆，不會返回對象
　　　　　　　　React.Children.count(object children)
　　　　　　　　　　返回組件總數
　　　　　　　　React.Children.only(object children)
　　　　　　　　　　返回僅有的子集，否則拋出異常

　　　　　　預設prop值
　　　　　　　　var ComponentWithDefaultProps = React.createClass({
　　　　　　　　　　getDefaultProps: function() {
　　　　　　　　　　　　return {
　　　　　　　　　　　　　　value: ‘default value‘
　　　　　　　　　　　　};
　　　　　　　　　　}
　　　　　　　　/* ... */
　　　　　　　　});
　　　　　　mixins 複用代碼（嵌入式），high order （擴充式）
　　ReactComponent
　　　　組件方法中this可以訪問執行個體，React之外只能用儲存React.render的傳回值訪問，其他組件內可以通過refs
　　　　setState(object nextState[, function callback])
　　　　　　合并nextState和當前state
　　　　　　不要直接改變this.state,而用setState來更新並觸發ui更新
　　　　　　setState之後，this.state並不一定馬上同步，
　　　　　　調用後總是觸發重繪，除非實現了shouldComponentUpdate
　　　　replaceState(object nextState[, function callback])
　　　　　　類似setState,但之前的state將被刪除
　　　　forceUpdate([function callback])
　　　　　　將會導致調用render()
　　　　getDOMNode() 返回DOMElement
　　　　　　擷取dom節點
　　　　isMounted()
　　　　　　判斷是否渲染
　　　　setProps(object nextProps[, function callback])
　　　　　　設定屬性，觸發渲染，但不可用於子組件
　　　　replaceProps(object nextProps[, function callback])、
　　　　　　替換
　　Component 方法
　　　　render 渲染返回組件
　　　　getInitialState 初始state值
　　　　getDefaultProps 初始props值
　　　　propTypes 檢驗prop類型
　　　　mixins 混合共用組件行為
　　　　statics 靜態方法
　　　　displayName 調試資訊
　　　　componentWillMount 掛載，渲染之前調用
　　　　componentDidMount 掛載，渲染之後調用
　　　　componentWillReceiveProps 更新，接受到新props時調用，初始不調用
　　　　shouldComponentUpdate 更新，接受到新的props或state之後，渲染之前 調用，，初始不調用
　　　　componentWillUpdate 更新，接受到新的props或state之前，初始不調用
　　　　componentDidUpdate 更新，組件更新到dom後調用，初始不調用
　　　　componentWillUnmount 移除，組件從dom中移除時調用，
　　表單組件
　　　　預設的html標籤的有對應的react組件
　　　　互動屬性
　　　　value 用於input,textarea組件
　　　　checked 用於checkbox,radio
　　　　selected 用於option
　　　　onChange input textarea 的value變化時，input的checked改變時，option的selected改變時
　　　　受限組件
　　　　設定了value的input是受限組件，渲染的html不能變更value，需要在onChange裡用setState變更
　　　　不受限組件
　　　　沒有設定value或為null的input為不受限組件
　　　　或者設定defaultValue 設定初始值，select也支援defaultvalue
　　事件系統
　　　　虛擬事件對象，
　　　　　　事件處理器將會傳入虛擬事件對象的勢力，有和瀏覽器本地事件一樣的屬性和方法
　　　　　　nativeEvent 擷取底層瀏覽器事件對象
　　　　　　boolean bubbles
　　　　　　boolean cancelable
　　　　　　DOMEventTarget currentTarget
　　　　　　boolean defaultPrevented
　　　　　　number eventPhase
　　　　　　boolean isTrusted
　　　　　　DOMEvent nativeEvent
　　　　　　void preventDefault()
　　　　　　void stopPropagation()
　　　　　　DOMEventTarget target
　　　　　　number timeStamp
　　　　　　string type
　　　　支援的事件
　　　　　　一般支援在事件冒泡階段觸發，
　　　　　　要在捕獲階段觸發某個事件處理器，
　　　　　　剪貼簿事件 onCopy onCut onPaste 屬性：DOMDataTransfer clipboardData
　　　　　　鍵盤事件 onKeyDown onKeyPress onKeyUp 屬性：boolean altKey
　　　　　　　　Number charCode
　　　　　　　　boolean ctrlKey
　　　　　　　　function getModifierState(key)
　　　　　　　　String key
　　　　　　　　Number keyCode
　　　　　　　　String locale
　　　　　　　　Number location
　　　　　　　　boolean metaKey
　　　　　　　　boolean repeat
　　　　　　　　boolean shiftKey
　　　　　　　　Number which
　　　　　　焦時間點事件 onFocus onBlur 屬性：DOMEventTarget relatedTarget
　　　　表單事件 onChange onInput onSubmit 屬性：
　　　　滑鼠事件 onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp  屬性：boolean altKey
　　　　　　Number button
　　　　　　Number buttons
　　　　　　Number clientX
　　　　　　Number clientY
　　　　　　boolean ctrlKey
　　　　　　function getModifierState(key)
　　　　　　boolean metaKey
　　　　　　Number pageX
　　　　　　Number pageY
　　　　　　DOMEventTarget relatedTarget
　　　　　　Number screenX
　　　　　　Number screenY
　　　　　　boolean shiftKey
　　　　觸摸事件 onTouchCancel onTouchEnd onTouchMove onTouchStart
　　　　　　渲染之前調用 React.initializeTouchEvents(true);
　　　　　　屬性
　　　　　　　　boolean altKey
　　　　　　　　DOMTouchList changedTouches
　　　　　　　　boolean ctrlKey
　　　　　　　　function getModifierState(key)
　　　　　　　　boolean metaKey
　　　　　　　　boolean shiftKey
　　　　　　　　DOMTouchList targetTouches
　　　　　　　　DOMTouchList touches
　　　　　　UI事件
　　　　　　　　onScroll 屬性：Number detail DOMAbstractView view
　　　　　　滑鼠滾輪滾動事件 onWheel 屬性：Number deltaMode Number deltaX Number deltaY Number deltaZ
　　DOM的差異
　　　　所有DOM的properties和attributes應該是駝峰命名，data-*和aria-*除外
　　　　style屬性接收一個帶有駝峰命名的javascript對象，而不是一個css字串
　　　　所有事件對象和w3c規範一致，包括冒泡
　　　　onChange 事件觸發在欄位改變而不是失去焦點時
　　非DOM屬性
　　　　key 可選的唯一標識（兄弟節點中唯一，不需要全域唯一），組件在重新渲染時，順序被打亂後可能造成銷毀後重建，綁定key後能在檢測時確儲存在
　　　　ref 綁定到reader輸出的一個組件，可以通過this.refs.refname來方式組件執行個體
　　　　dangerouslySetInnerHTML 提供插入純html的能力

　　標籤和屬性
　　　　react支援所有html常用標籤
　　　　svg元素， react-art 外掛程式支援渲染到canvas，svg貨vml(ie-8)
　　　　支援所有的data-*,aria-*屬性，
　　　　className,htmlFor
　　　　駝峰命名，
　　　　支援html標準屬性
　　　　svg屬性

 

react學習筆記