記錄一些React的一些細節，會不斷更新

hy_發表於2019-05-06
React

這都是我對React的理解，放在掘金也只是把它當作一個免費網盤，可以線上翻閱，但會被其他的小夥伴發現，所以如有錯誤可以指正，請不要批評:)

React是用來構建使用者介面的（building user interface），其實說白了在web端React就是寫html標籤的，不同的元件寫好的標籤組合成一個整體DOM結構插入到網頁中，但為啥不用原生的html寫頁面呢？因為更新資料不方便吶，html標籤中的資料很多情況下都是需要動態更新的，html又沒有程式設計能力，js才有，所以通過原生的js來獲取資料更新html標籤（就是更新DOM結構及其內容）開銷很大，簡單來說就是頁面很卡，而且開發效率也不高，因為js操作DOM實在是太麻煩了，要不然jQuery當年就不會流行了

所以不用把React想得多了不起，就是用它來寫js程式碼，js程式碼中生成頁面的標籤元素，如果資料發生改變，React幫你更新網頁上的內容即可，你也不用操作DOM，就用js獲取資料處理一下格式把資料塞到React元件的狀態裡，元件會在狀態改變時自己更新DOM結構從而更新網頁被使用者所發現的

這些特性我是在繼承了React.Component的類元件中試驗的：

  • 當前元件的state發生改變時，無論render()方法中是否呼叫了this.state，都會導致render()方法重新執行
  • 如果當前元件中有子元件，則當前元件render()執行時都會導致子元件render()執行
  • 傳遞給子元件的props改變時也會導致子元件執行render()

Fragment：

import React, { Fragment } from 'react';
const App = () => {
  return (
    <Fragment>
      <div></div>
      <div></div>
    </Fragment>
  )
}
// 等同於下面的寫法
const App = () => {
  return (
    <>
      <div></div>
      <div></div>
    </>
  )
}

// 頁面渲染：
<div></div>
<div></div>複製程式碼


相關文章