react基礎學習記錄一

react 學習記錄

本身學習，記錄便於後面回顧

基礎知識點的記憶：

• state與props
• state是組件本身的數據，而props是父組件經過屬性賦值方式將其傳送給組件；這樣達到了，父子組件數據的聯通

• state的賦值方式，推薦用函數式賦值

  this.setState(() => ({
      react: 'i like'
  }))

• setState是一個異步函數，而且屢次setSate，會將其放入隊列中，合併成一次進行執行

• 正由於是異步的函數，因此當咱們改變後不能在同步的代碼中直接獲取，有兩種方式能夠解決

  constructor() {
      this.state = {
          react: ''
      }
  }
  this.setState((preState) => ({
      react: 'i very like'
  }))
  this.setState((preState) => ({                   //
      react: preState.react + '我很喜歡react'
  }))
  this.state.react   //不會變化，是空
  this.setState((preState) => ({
      react: preState.react + '我很喜歡react'
  }), () => {
      console.log(this.state.react)              //這邊回調的this指向組件自身，並且獲取到最新的state
  })

  上面setState函數中有兩個參數，第一個參數是一個函數，會自動將最近修改的最新的state，傳入進來；第二個參數是一個也是函數，this指向組件自身；兩個函數的執行都是異步的，由於setState就是一個異步函數

• 而子組件怎麼想父組件傳送數據呢？這經過父組件先子組件賦值方法，子組件經過調用父組件的方法，來達到將其數據返回給父組件，因此最終props的數據仍是在父組件的方法中
• 組件的顯示是有什麼決定的，就是render，return的結果，return結果中有用到jsx對象，則須要引入import React from 'react'
• return中的jsx組件只能被一個div包裹，組件不能並列；但能夠經過<Fragment></Fragment>來佔位，優勢是其不會顯示在dom節點中
• 怎麼不轉譯html形式的文本,dangerouslySetInnerHTML = {{ __html: xxx}};第一層{}是說明裏面要填寫js語句，第二層則是說明寫的是一個對象，整句話的意思就是innerHTML=XXX

生命週期函數

什麼事生命週期函數：就是說在某個階段會自動執行的函數，叫作生命週期函數；

• Mounting階段

  constructor:用於初始化state，一個組件只執行一次

  static getDerivedStateFromProps(props, state);須要返回一個對象或者null，不能返回undefined；該函數的做用是能夠用父組件傳進來的props的值在render以前進行修改；該函數在state修改update的時候也會執行

  render函數，不是Component內置的函數，因此這個生命函數必需要寫；用於建立虛擬dom，即js對象

  componentDidMount;在組件掛載完後進行的操做，只執行一次，就在掛載的最後階段；通常在這個階段進行ajax請求；在這個階段修改了state的值，上面的兩個函數render和getDerivedStateFromProps也會在再次執行

• updating階段
  就是當組件的state發生改變的時候會再次執行一些生命週期函數
  會先執行getDerivedStateFromProps；接着shouldComponentUpdate(nextProps, nextState)，參數是最新的數據nextState和nextProps，能夠和以前的this.state,this.props進行操做比較詢問是否容許進行更新返回一個布爾值，false則不需更新，後面的生命週期函數不會再自動執行這個false經常使用來提高性能，由於父組件更新state時，子組件的render函數也會被執行，咱們返回false，就不會執行不必的子組件的render，提升了性能，返會true則，會進行下一個函數render。虛擬dom的構建；在組件渲染到網頁前會執行一個getSnapshotBeforeUpdate(prevProps, prevState)這個函數必須和componentDidUpdate(prevProps, prevState, snapshot)一塊兒使用;該函數在組件更新完後會自動執行，第三個參數是getSnapshotBeforeUpdate的返回值
• Unmounting階段
  發生在組件的刪除前，會自動執行，咱們經常使用於清除組件以前被添加的還會繼續執行的東西。例如定時器

虛擬dom

只理解了一些簡單的概念：虛擬dom就是js對象，是替代真實dom，讓js更加高效的進行操做；
state發生update後render函數會生成新的虛擬dom，來和以前以前老的虛擬dom進行比較：
主要採起幾種策略：

• 同層比較，說白話就是從大頭纔是比較，大頭壞了整個不要了，從新建立；這種方法再第一層不一樣，後面都相同的狀況下，會帶來性能的下降，由於它會從新渲染建立；可是提升的算法的速度，很簡單就一層一層的比較，不用循環遞歸；放棄了一些極端狀況，帶來了算法上的提升
• key值的對組件標識，經過標識來觀察新舊組件，是否一致，缺乏了或增長了一目瞭然