React入門知識點整理

夢凡發表於2018-05-17
React

一：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

三：元件的生命週期

React入門知識點整理
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

相關文章