React元件化學習總結第二天

1. 元件化的思想：分而治之
   元件化提供了一種抽象，讓我們可以開發出一個個獨立可以複用的小元件來構造我們的應用。
   任何的應用都會被我們抽象成為一顆元件樹。
   
2. 類元件以及render函式的返回值：
   a. 元件的名稱必須是大寫字母開頭(無論是類元件還是函式元件)
   b. 類元件必須繼承自React.Component
   c. 類元件必須實現render函式

export default class App extends React.Component {
   render() {
      return 
         <div>Hello React</div>
      )
   }
}

注意：所有的jsx語法本質上都是會被React.createElement呼叫

3. 函式元件:
   a. 函式元件是使用function 來進行定義的函式，只是這個函式會返回和類元件中render函式返回一樣的內容。
   b. 函式元件有自己的特點:
   沒有生命週期，沒有this(元件例項), 沒有內部狀態(state);

export default function App() {
  return (
    <div>Hello World</div>
  )
}

6. 認識生命週期
   
   React官網生命週期圖譜：
   
   Constructorn如果不初始化state 或不進行方法繫結，則不需要為React 元件實現建構函式。nconstructor中通常只做兩件事情：p通過給this.state賦值物件來初始化內部的state；p為事件繫結例項（this）；ncomponentDidMountncomponentDidMount()會在元件掛載後（插入DOM樹中）立即呼叫。ncomponentDidMount中通常進行哪裡操作呢？p依賴於DOM的操作可以在這裡進行；p在此處傳送網路請求就最好的地方；（官方建議）p可以在此處新增一些訂閱（會在componentWillUnmount取消訂閱）

componentDidMount() {
   console.log("呼叫componentDidMount方法");
}

componentDidUpdatencomponentDidUpdate()會在更新後會被立即呼叫，首次渲染不會執行此方法。p當元件更新後，可以在此處對DOM進行操作；p如果你對更新前後的props 進行了比較，也可以選擇在此處進行網路請求；（例如，當props 未發生變化時，則不會執行網路請求）。ncomponentWillUnmountncomponentWillUnmount()會在元件解除安裝及銷燬之前直接呼叫。p在此方法中執行必要的清理操作；p例如，清除timer，取消網路請求或清除在componentDidMount()中建立的訂閱等；

componentDidUpdate(prevProps, prevState, snapShot) {
   console.log("呼叫componentDidMount方法");
}

componentWillUnmount() {
   console.log("呼叫componentWillUnMount方法");
}

7. 元件化的核心思想是對元件進行拆分，拆分成為一個個小的元件，然後再將這些元件組合巢狀在一起，最終形成我們的應用程式。
8. 
9. 元件之間的通訊：
   父元件在展示子元件，可能會傳遞一些資料給子元件:
   父元件通過(屬性=值)的形式來傳遞給子元件資料，子元件通過props引數獲取父元件傳遞過來的資料。
   a. 類元件:
   
   b. 函式元件:
   
   10.引數propTypes:
   引數propTypesn對於傳遞給子元件的資料，有時候我們可能希望進行驗證，特別是對於大型專案來說：p當然，如果你專案中預設繼承了Flow或者TypeScript，那麼直接就可以進行型別驗證；p但是，即使我們沒有使用Flow或者TypeScript，也可以通過prop-types庫來進行引數驗證；n從React v15.5 開始，React.PropTypes已移入另一個包中：prop-types庫n更多的驗證方式，可以參考官網：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.htmlp比如驗證陣列，並且陣列中包含哪些元素；p比如驗證物件，並且物件中包含哪些key以及value是什麼型別；p比如某個原生是必須的，使用requiredFunc: PropTypes.func.isRequiredn如果沒有傳遞，我們希望有預設值呢？p我們使用defaultProps就可以了。