react 學習總結–基礎（一）

說明

React 版本 ：”15.4.1”

react-tap-event-plugin 版本： “^2.0.1”

1.react 是什麼

React 是 Facebook 內部的一個JavaScript類庫，可用於建立Web使用者互動介面。他引入了一種新的方式來處理瀏覽器DOM，只需要宣告式的定義各個時間點的使用者介面，無需關心資料變化時需要更新那一部分DOM。在任何時間點，React都能以最小的DOM修改來更新整個應用程式。

react 的特點

react 將原本的DOM操作接管，提出了 Virtual DOM(虛擬DOM)、單項資料流、用很少的介面覆蓋在元件開發的生命週期上，採取宣告式的語法等，實現了一個純粹的元件“引擎”。

react 鼓勵你為每一個關注點創造一個獨立的元件，並把所有的邏輯和標籤封裝在其中

一個完整的例子

    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';

    export default class Child extends Component{
        constructor(props){
            super(props);
        }
        render(){
            return (
                <div
 
>this is component</div>
            )
        }
    }

    ReactDOM.render((
        <Child />
    ),document.getElementById('app'));

2.JSX

JSX 即 JavaScript XML 一種在React元件內部構建標籤的類XML語法。React在不使用JSX的情況下一樣可以工作，然而使用JSX可以提高元件的可讀性

JSX 以乾淨整潔的方式保證了元件中的標籤與所有業務邏輯的相互分離，他不僅提供了一個清晰、直觀的方式來描述元件樹，同時還讓你的應用程式更加符合邏輯

JSX 與 HTML 有何不同

JSX 以與 HTML 同樣的方式給每個節點設定屬性，同時還提供了將屬性設定為動態的JavaScript變數的便利

HTML：
<div id="div-id" class="div-class"></div>

JSX：
<div id={divId} className={divClass}></div>

屬性值{}可以設定為一個函式呼叫的返回結果，但是不能直接加入if/else邏輯，解決的辦法就是使用以下運算子

• 使用三目運算子 flag ? true : false;
• 設定一個變數並在屬性中引用他
• 講邏輯轉化到函式中
• 使用 && 運算子

非DOM屬性 key（鍵） / ref（引用）

事件，react的事件名已經被規範化並統一用駝峰形式表示，例如click變為onClick

註釋，jsx本質就是JavaScript，註釋有兩種形式

• 當做一個元素的子節點 <div> {/* 子節點 */} <p>內容</p></div>
• 內聯在元素的屬性中 <div /* 屬性中 */ class="div-class">內容</div>

特殊屬性 for => htmlFor , class => className

樣式，內聯樣式，只需要把駝峰形式的命名和期望的css值拼接成物件即可

3.元件的生命週期

例項化階段

一個例項初次被呼叫時的生命週期方法，首次使用一個元件類時，下面這些方法依次被呼叫：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

再次呼叫元件類建立新的例項時，除 getDefaultProps 外都會被重新呼叫

getDefaultProps

在元件類建立的時候呼叫一次，這個方法返回的物件用於為例項設定預設的props值，會合併到 this.props

該方法返回的任何複雜的值，例如物件和陣列，都會在所有例項中共享，而不是拷貝或者克隆

    getDefaultProps(){
        return {
            title : '' 
        };
    }

getInitialState

對元件的類的每個例項來說，只調用一次，返回值作為this.state的初始值，在這個方法裡，已經可以訪問到 this.props

    getInitialState(){
        return {
            list : []
        }
    }

componentWillMount

該方法會在完成首次渲染之前被呼叫，且只調用一次，此方法中可以感知到state，是render之前修改 state的最後一次機會，修改state之後不會再次呼叫

    constructor(props) {
        super(props);
        this.state = {
          num : 0
        };
    }
    componentWillMount() {
      console.log(this.state.num); //0，只會列印一次
      this.setState({num:2});
    }

render

render 是組建唯一一個必須的方法，在這裡會建立一個虛擬的DOM，來表示元件的輸出

render 中需要遵守特定的規則

• 只能通過 this.props 和 this.state 訪問資料
• 可以返回任何 React 元件 或者 null，false 來表明不需要渲染任何東西，React 渲染一個
  <noscript></noscript> 標籤來處理當前的差異檢查邏輯
• 只能出現一個頂級元件（不能返回一組元素）
• 必須純淨，此方法內不要修改元件的 state ，不讀寫DOM資訊，也不要和瀏覽器互動

render 方法返回的結果不是真正的DOM，而是一個虛擬的表現，React隨後會把它和真實的DOM做對比，來判斷是都有必要做修改

    render() {
        return (
        <div className="container">
            <div style={{display : this.state.close ? 'none' : 'block'}} className="header">
                {this.props.headerText}
            </div>
            <div className="content">
                {this.props.content}
            </div>
        </div>
    }

componentDidMount

render 方法成功呼叫 初始化渲染執行之後立刻呼叫一次，僅客戶端有效（伺服器端不會呼叫），在此階段中，可以訪問真實的DOM元素，如果想與其他框架整合，可以在此方法中進行

    componentDidMount(){
        console.log(ReactDOM.findDOMNode(this.refs.a)); //輸出真實的DOM節點
    }

存在期

此時元件已經渲染好，並且使用者可以與它進行互動，
隨著應用狀態的改變，下列方法依次被呼叫

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

componentWillReceiveProps

在任意時刻，元件的props都可以通過父輩元件來更改，在組建接收到新的props的時候就會呼叫此方法，在初始化渲染的時候此方法不會被呼叫，在函式中呼叫this.setState()將不會引起第二次渲染

    componentWillReceiveProps(nextProps) {
        if (nextProps.checked !== undefined) {
          this.setState({
            checked : nextProps.checked
          })
        }
    }

shouldComponentUpdate

在接收到新的props或者state，將要渲染之前呼叫，通過返回的true/false決定元件是否更新
如果返回 false ，那麼render 將不會被執行，componentWillUpdate 和 componentDidUpdate 也不會被執行

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.num === this.props.num && nextState.num === this.state.num) {
      return false;
    }
  }

componentWillUpdate

元件在接收到新的props或者state之前立刻呼叫，做一些更新前的準備，不能在此方法中呼叫this.setState()，需要更新state或者props可以再 componentWillReceiveProps中更新

  componentWillUpdate(nextProps, nextState) {
    console.log(nextProps);
    console.log(nextState);
  }

componentDidUpdate

與 componentDidMount 類似的方法，給了我們更新已經渲染好的DOM的機會，可以操作真實DOM

  componentDidUpdate(prevProps, prevState) {
    console.log(prevProps);
    console.log(prevState);
  }

銷燬期

元件被使用完成後

• componentWillUnmount

componentWillUnmount

元件被移除前呼叫，執行必要的清理任務，例如無效的定時器，在componentDidMount中建立的DOM元素等

  componentWillUnmount() {
    clearInterval(this.timer);
  }

4.下一篇內容傳送門

• react 資料流
• 事件處理
• 複合元件
• DOM操作
• 表單