自學React 入門

剛開始學習React, 讀了官網和別人的一些博客，總結了一部份內容，記錄一下。有錯誤歡迎指正。。。

1、自定義組件須要瞭解知識

1. 組件分類

React中有兩種類型的組件，一種是」方法組件「，一種是」類組件「;

(1). 區別

方法組件:

• 不具備state狀態；只用於展現數據，不作邏輯處理；

• 不具備render()方法，直接返回JSX對象或null對象；

• 示例：

function Welcome(props) {

  return (

    // 此處註釋的寫法 

    <div className="shopping-list">

      {/* 此處 註釋的寫法 必需要{}包裹 */}

      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>

  )

}

ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')

)

類組件

• 具備state狀態；有業務邏輯，須要操做數據(state);

• 必須有render()方法；render()方法返回的對象必須有根元素且只能有一個，能夠爲JSX對象或null對象；

• 須要在構造方法中使用super(props)纔可在組件的後續內容中使用this;

• 示例：

class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }

  // class建立的組件中 必須有render方法 且顯示return一個react對象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

(2). 相同點

• 定義的名稱首字母均大寫；（React經過此來判斷是否爲一個組件）
• 返回值最好都用()包含；
• 返回值爲JSX對象或null對象；
• 都接受父組件傳遞的props對象屬性，且子組件不可修改；

2. 數據對象: props和state

(1). props

• 用於存儲父組件傳遞給子組件的參數；React會將傳遞的參數轉換爲對象賦值給props;
• 只讀屬性；子組件接收父組件的props參數，子組件不可修改；
• 實例化：①. 從父組件傳遞過來，在子組件中經過super(props)實例化；②. 經過組件類的靜態屬性defaultProps來初始化props；(組件名.defaultProps = {color: 'red'};)

(2). state

• 用於給組件內部提供數據，檢測組件自身數據的變化；（由於不能修改props屬性，全部須要state來記錄組件自身變化）
• 只有類組件才具備狀態
• 初始化位置: 構造方法中
• 做用域：組件內
• 不可在render()方法中修改state對象的值，會形成死循環；
• 不可在state對象中定義render()方法中不須要的數據，影響渲染性能；

3. 類組件部份內容介紹

(1). super() 方法

super()方法用於訪問父組件的構造方法；如繼承中 類1 extends 類2 {};;此時類1若想訪問類2的構造方法，就須要使用super()方法；

類組件中super(props)做用

• 類組件中，繼承了ReactComponent類。 在構造方法中，使用super(params)方法，用來調用父組件ReactComponent類的構造方法來實例化props屬性；
• 在子類的構造方法中必須先調用super()才能夠在super()以後的語句中使用this; 若無super(),則this爲null; 由於使用Function或Class建立的組件，組件方法內的this是null的，若想讓this指向本組件，須要手動綁定，解決辦法:①. 構造方法中使用super(props); ②. bind綁定；③。 箭頭函數綁定；

(2). render() 方法

• render()方法用於渲染組件DOM,建立DOM樹；當props傳入或state對象更新時，React會從新調用render()方法，對比更改前和更改後的DOM, 更新DOM樹；
• key值使用: 數組上下文元素應該指定key值，由於部分狀況會致使React更新整顆樹；key值只須要保持與其餘兄弟節點惟一便可，不須要全局惟一；React會根據key值來比較原樹和新樹，進行選擇性更新；

(3).defaultProps 和 propTypes靜態屬性

• defaultProps 用於組件內部定義props對象
• propTypes 用於約束props對象內的屬性類型；

(4). 條件判斷使用

• {條件 && 條件符合執行}
• {條件 ? (符合執行) : (不符合執行)}

4. 組件生命週期

(1). 建立/實例化組件 - constructor(){}

• 獲取props, 類組件實例化Props;
• 類組件初始化state;

(2). 掛載 - componentWillMount(){}

• 發生於render()以前
• 獲取不到DOM對象
• 改變State屬性不會從新渲染組件

(3). 渲染 - render(){}

• 獲取不到DOM對象
• 不能修改state值，會形成遞歸渲染

(4).掛載完成 - componentDidMount(){}

• 可獲取DOM對象 - document.getElementById(...);
• 可修改state值
• 可發送請求數據

2、React自帶的組件介紹

1. Provider組件

組件以外使用Provider包裹，做用是將store放入context對象中，使子孫組件能夠獲取到store的值；

2. Helmet組件

管理對文檔頭的修改，採用純HTML標記並輸出純HTML標記；