一:React的特點
- 專注於View
- 虛擬Dom
- 單向資料流動
- 元件化
二:JSX
1:JSX是:
- 基於ECMAScript的一種新特性
- 種定義帶屬性樹結構的語法
2:JSX的特點
- 類XML語法容易接受
- 增強JS語義
- 結構清晰
- 抽象程度高
- 程式碼模組化
3:JSX語法
- 自定義元件名首字母要大寫
- 元件與元件之間可以巢狀
- 編寫JSX時,大括號中不可以寫語句(例如,if語句,switch語句,for 語句等等),但是可以寫求值表示式
不能使用語句的解決方案: 用三元表示式:
var HelloWorld = React.createClass({
render: function(){
return <p className="test">hello{this.props.name ? this.props.name : 'world'}</p>
}
});
React.render( <div style={style}><HelloWorld /></div> ,document.body );
複製程式碼
通過變數賦值的方式:
var HelloWorld = React.createClass({
getName: function(){
if(this.props.name){
return this.props.name;
}else{
return 'World';
}
},
render: function(){
var name = this.getName();
return <p className="test">hello {name}</p>
}
});
React.render( <div style={style}><HelloWorld name="hmy" /></div> ,document.body );
複製程式碼
直接把變數去掉,在大括號中呼叫函式; 使用比較運算子:或||:
var HelloWorld = React.createClass({
render: function(){
return <p className="test">hello {this.props.name || 'Wrold'}</p>
}
});
React.render( <div style={style}><HelloWorld name="hmy"/></div> ,document.body);
複製程式碼
- JSX的標籤名、函式名都是採用駝峰命名
- 在JSX裡要用html和class屬性時,需要寫成htmlFor和className
4.非DOM屬性:dangerouslySetInnerHTML、ref、key
- dangerouslySetInnerHTML: 在JSX中直接插入HTML程式碼
- ref(reference的縮寫),父元件引用子元件
- key: 提高渲染效能 Array生成結構時是必須加上key
- **React.findDOMNode(component)**獲取到元件中真實的DOM 必須有一個 ref 屬性,然後 this.refs.[refName] 就指向這個虛擬 DOM 的子節點,最後通過 React.findDOMNode 方法獲取真實 DOM 的節點
- forceUpdate():強制更新
5.注意點
- 內容類似的元件儘量成同一個元件;
- 列表型別的元素一定要加上key
三:元件的生命週期
1:元件的生命週期:- 初始化->執行->銷燬
2:不同生命週期內可以自定義的函式
- 初始化階段:
- getDefaultProps 只呼叫一次,例項之間共享引用;獲取例項的預設屬性
- getInitialState 必須返回一個object或者null;初始化每個例項特有的狀態;獲取例項的初始化狀態
- componentWillMount render 之前最後一次修改狀態的機會;元件即將被裝載,元件即將被渲染在頁面上
- render 只能訪問this.props和this.state,只有一個頂層元件,不允許修改狀態和DOM輸出。 元件在render函式中生成虛擬的DOM節點,最後由react將虛擬的DOM節點渲染成真正的DOM節點,並放置在頁面中
- componentDidMount 成功render並渲染完成真實DOM之後觸發,可以修改DOM;元件在真正被裝載後呼叫(即,這個函式被呼叫的時候,元件已經被渲染到了頁面上) 注意點:getDefaultProps 只會在元件的第一個例項被初始化的時候呼叫,同一個元件的所有例項拿到的預設屬性都是一樣的
- 執行中階段
- componentWillReceiveProps 父元件修好屬性觸發,可以修改新屬性、修改狀態;
- shouldComponentUpdate 當元件接收到新屬性或者新狀態的時候就會促發這個函式(元件是否需要更新),返回false會阻止render呼叫
- componentWillUpdate 元件即將更新,不能修改屬性和狀態
- render 跟初始化的 render一樣
- componentDidUpdate 跟初始化的componentDidMount一樣,真正的DOM被渲染後呼叫,可以修改DOM
- 銷燬階段
- componentWillUnmount 在刪除元件之前進行清理操作,比如定時器和事件監聽器
3:API
- React.findDOMNode 查詢DOM節點
- React.unmountComponentAtNode 刪除元件;引數必須是React.render的第二個引數
四:React屬性和狀態
- 屬性的定義
props (properties簡寫):屬性往往與生俱來、無法自己改變的;在React中,元件本身是不能修改自己屬性,父元件能夠修改它的屬性,它也可以修改子元件的屬性;
- 屬性的用法
第一種:
<HellWorld name= variable /> => 例如:"Tim" | {123} | {"Tim"} | {[1,2,3]}{variable}
複製程式碼
第二種:
var props = {
one : '123',
two : 321
}
<HelloWorld {...props}/>
複製程式碼
第三種: 不常用
var instance =React.render(<HelloWorld><HelloWorld>,document.body);
instance.setProps({name:'Tim'});
複製程式碼
- 狀態的含義
狀態是由事物自行處理、不斷變化的,在React中,狀態是事物的私有屬性,一個事物狀態怎麼樣,如何改變狀態都是由事物自己決定,父元件,子元件都沒有權利改變它的狀態;狀態只跟元件本身相關,既不跟父元件相關,也不跟子元件相關
-
狀態的用法 getInitialState: 初始化每個例項特有的狀態 setState: 更新元件狀態
-
屬性和狀態的對比
-
屬性和狀態的相似點:
- 都是純JS物件
- 都會觸發render更新
- 都具有確定性
-
屬性和狀態對比
描述 屬性 狀態 能否從父元件獲取初始值 能 不能 能否由父元件修改 能 不能 能否在元件內部設定預設值 能 能 能否在元件內部修改 不能 能 能都設定子元件的初始值 能 不能 能都修改子元件的值 能 不能
-
3: 區分方法
元件在執行時需要修改的資料就是狀態
五: React中的事件
-
常見事件型別
- 觸控類:onTouchCancel、 onTouchEnd、 onTouchMove、 onTouchStart
- 鍵盤:onKeyDown、onKeyPress、onKeyUp
- 剪下: onCopy、onCut、onPaste
- 表單類:onChange、onInput、onSubmit
- 焦點:onFocus、onBlur
- 滾動: onScroll onWheel
- 滑鼠: onClick、onContextMenu、onDoubleClick、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp
- 滑鼠拖拽: onDrop、onDrag、onDragEnd、onDragEnter、onDragExit、onDragLeave、onDragOver、onDragStart
-
事件物件屬性
- 通用:
- bubbles: 型別:boolean 表示事件是否可以冒泡
- cancelable: 型別:boolean 表示事件是否可以取消
- currentTarget: 型別:DOMEventTarget 代表註冊監聽器的物件(注意和target的區別:target代表當前目標物件(事件作用的物件))
- defaultPrevented: 型別:boolean 是否靜止預設行為
- eventPhase: 型別:number 事件所處的階段
- isTrusted: 型別: boolean 是否可信(可信是指由使用者出發的事件,不可信事件指的是JS程式碼觸發的事件,如jQ的trigger方法)
- nativeEvent: 型別: DOMEvent 原生的事件
- preventDefault: 方法 阻止預設行為
- stopPropagation: 方法 阻止冒泡
- target : 型別:DOMEventTarget 代表當前目標物件(事件作用的物件)
- timeStamp: 型別:number 事件觸發的時間
- type: 型別:string 事件型別
- 通用:
-
剪下:
- clipboardData: DOMDataTransfer 提供了對剪貼簿的訪問
-
鍵盤:
- altKey boolean 是否按了alt鍵
- charCode Number 按鍵的字元編碼
- ctrlKey boolean 是否按下ctrl鍵
- function getModiflerState(key) 是否按下輔助鍵 key String 按下的鍵 keyCode Number 按鍵的編碼 locale String 本地化的一些字串 location Number 位置 metaKey boolean window 下得win鍵;mac 下的蝴蝶鍵 repeat boolean 按鍵是否重複 shiftkey boolean 是否按下shift鍵 which Number
-
焦點:
- relatedTarget DOMEventTarget