react知識點整理50問（未完待續）

react知識點50問

1.react中的keys的做用

keys是react來追蹤哪些元素被修改添加、刪除的輔助標記

2.調用setState以後發生了什麼

react會將傳入的參數對象和組件的當前狀態合併，根據新的狀態構建新的react元素樹，計算react新樹和老樹的差別，根據差別最小化對界面進行最小化渲染

3.react生命週期

• 初始化階段：
  getDeaultProps（獲取實例的默認props）
  getInitialState（獲取每一個實例的初始狀態）
  componentWillMount（組件即將被掛載、渲染到頁面上）
  render（組件在這生產虛擬DOM）
  componentDidMount（組件被掛載後、通常在這裏調用ajax請求）
• 運行階段：
  componentWillReceieveProps（組件要接受到屬性的時候調用）
  shouldComponentUpdate（ 組件接受新的狀態或者新的屬性的時候；返回false，接受數據不更新，反之更新數據）
  componentwillUpdate（組件即將更新）
  render（組件更新）
  componentDidUpdate（組件已經更新）
• 銷燬狀態：
  componentWillUnMount（組件即將銷燬）

  以上是React v16前的生命週期，下面是新的生命週期

4.React中的refs是什麼？

能夠經過refs訪問到dom元素，並對dom元素進行操做

5.react中展現組件和容器組件有什麼不一樣

展現組件

• 主要負責組件內容如何展現
• 從props接受父組件傳遞來的數據
• 大多數能夠經過函數定義組件聲明
  容器組件
• 主要關注組件數據如何交互
• 擁有自身state，從服務器獲取數據，或與redux等其餘數據處理模塊寫做
• 經過類定義組件聲明，包含生命週期函數和其餘附加方法

6. 爲何建議傳遞給setState的參數建議是一個callback而，不是對象？

由於this.props和this.state的更新是異步的。

7.類組件和函數式組件有何不一樣

區別	函數式組件	類組件
是否有this	×	√
是否有生命週期	×	√
是否有state	×	√

8.狀態state和props屬性的區別

• state是一種數據結構，用於組件掛載時所需數據的默認值，state可讀可寫
• props是屬性的意思，是由父組件傳遞給子組件的，對子組件來講props不可變。
  props只讀，state可讀可寫

9.受控組件

受控組件中的value值經過state獲取，同時經過onChange事件改變state中的value，有這樣特性 的 組件叫受控組件，反之，非受控組件經過refs操做真實DOM

10. 調用super（props）的目的

子類沒有本身的this對象，只能經過調用super（props）拿到

11.react中如何配置多個代理

---

在package.jsson中向如下這種格式設置proxy

"proxy": {
  "/api/RoomApi": {
    "target": "http://open.douyucdn.cn",
    "changeOrigin":true
  },
  "/api/v1":{
    "target":"http://capi.douyucdn.cn",
    "changeOrigin":true
  }
}

12.react和vue的區別

• react是單向數據流，只能經過setState的方法改變數據，vue中數據是響應式的，經過給每一個屬性創建watcher來監聽，當屬性發生變化，響應式的更新對應的虛擬dom。
• react經過js操做一切，vue是把html、js、css寫到一塊兒，仍是用各自的處理方式