React 學習筆記(一)

時間 2019-12-05

標籤 react 學習筆記欄目 React 简体版

原文原文鏈接

在此記錄一下學習`React` 的筆記..歡迎交流歡迎指正總之歡迎..

github地址 ⭐⭐⭐(懂我意思吧)html

react learning

一些關於react的概念

聲明式開發
能夠與其餘框架並存
組件化開發
- class xxx extends Component
- 組件首字母大寫且是單標籤
- 組件是樹狀結構
- 父子通訊
  - 父傳子直接在子組件上設置一個屬性子組件this.props.接收
  - 子傳父父給子傳遞一個function 而後子組件在自身調用傳參給父組件從而傳遞值
單向數據流
- 父組件傳遞給子組件的值能夠被使用但毫不能被子改變
視圖層框架
- 只解決數據和頁面渲染的問題
- 大點的項目要配合數據層框架好比..redux
函數式編程
- 面向測試開發更容易的進行前端自動化測試

零碎知識點

PropTypes & DefaultProps

PropTypes 對通訊間傳入的值進行校驗前端

先引入 import PropTypes from 'prop-types'
使用例如

TodoItem.propTypes = {
  // arrayOf 或者 是數字 或者是 字符串
  // arrayOf( PropTypes.number , PropTypes.string )
  //基本的一些類型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  
  //
  optionalNode: PropTypes.node,

  // 一個 React 元素
  optionalElement: PropTypes.element,

  //也能夠檢查是否是一個類的實例
  optionalMessage: PropTypes.instanceOf(Message),

  //檢查是否是其中確切的值之一
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  //也能夠是這些類型其中之一
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 一個某種類型的數組
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 一個特定形式的對象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  //isReauired修飾的值表示必須傳入 不能爲空 且必須是string(或者其餘)
  optionalisStringReauired: PrpTypes.string.isRequired
  
  // 任何數據類型的值
  requiredAny: PropTypes.any.isRequired,


}
複製代碼

defaultPropsnode

若是沒傳入設定一個默認值

TodoItem.defaultProps = {
  content: 'this is null'
}
複製代碼

更多詳情見文檔 Typechecking With PropTypes Docreact

Props ,State 與 render 函數
- 當組件的state 或者 props進行改變的時候 render函數就會從新執行
- 當父組件的render函數被運行時它的子組件的render都將被從新運行
虛擬DOM (本質就是一個js對象用來描述真實DOM)
- react利用虛擬DOM渲染的流程
  - 👇 state數據
  - 👇 jsx模板
  - 👇 state數據和jsx模板結合先生成一個虛擬DOM
```
React.createElement(tagName,{attr}, content)
複製代碼
```
  - 👇 用虛擬DOM生成真實DOM來顯示
  - 👇 state數據改變
  - 👇 數據 + 模板從新渲染生成新的虛擬DOM 並與以前的虛擬DOM作對比找出改變的那一部分是兩個js對象之間的對比
  - 👇 找到變化後直接操做DOM 更新
- 優勢:
  1. 性能提高
  2. 跨端得以實現 RN..
- 虛擬DOM中的Diff算法 (different, 找差別算法)
  - 虛擬DOM樹是同層比較的
  - key值是對比中的一個標識因此key值要保持穩定儘可能不用index做爲key 用item
用ref來操做DOM (避免使用..由於推薦數據驅動的方式不操做DOM)
- e.target 也能夠獲取到
- 給相應的元素添加 ref="xxx" 的屬性, 而後this.refs.xxx獲取到DOM元素
- ref={ (xxx) =>{ this.xxx = xxx } } 相應的 this.xxx就是那個DOM元素了
setState()
- 是一個'異步'操做立馬執行完以後React會對state的全部改變進行合併處理以後纔會從新去計算新的虛擬DOM 再根據最新的虛擬DOM去從新渲染真實DOM
  可是這個異步是僞異步只是維護了一個updataQueue 並非說自己就是異步代碼實現的
- 第二個參數是一個回調函數, 即視圖更新完畢後調用就會避免某些值獲取不到的狀況
React的生命週期函數
- 在某一個時刻組件會自動執行的函數
- Initialization (初始化一些數據)
  - constructor 初始化state和props 以及一些函數this指向問題
    constructor 不是React獨有的是es6 class語法這裏完美契合了React
- Mounting (掛載時的生命週期 ,注意是第一次掛載時以後數據更新,虛擬DOM更新後的掛載不算)
  - componentWillMount在組件即將被掛載到頁面的時刻自動執行 (尚未被掛載到頁面上)
  - render 此時建立虛擬dom,進行diff算法,更新dom樹都在此進行此時就不能更改state了
  - componentDidMount 組件被掛載了以後執行
- Updation (組件更新的流程)
  - props發生變化
    - props 發生變化時最開始會有一個
      componentWillReceiveProps 一個組件從父組件接收參數, 只要父組件的render函數被從新執行了子組件的中國生命週期函數就會被執行
  - 共同的生命週期函數
    - shouldComponentUpdate 組件被更新以前自動執行
      須要return一個布爾值
      若是return true 組件會被更新
      若是return false 組件不更新且以後的生命週期函數都不執行了
      若是這個組件第一次存在於父組件中不會被執行
      若是這個組件以前已經存在於父組件中纔會執行
    - componentWillUpdate 組件更新以前會被自動執行可是在shouldComponentUpdate 以後執行若是 shouldComponentUpdatereturn false 就不執行了
    - render 知道要數據更新了因此 render 函數又會自動執行更新組件
    - componentDidUpdate 組件更新完畢以後執行
- Unmounting
  - componentWillUnmount 當組件即將被銷燬時執行此時還未被移除
- 網上扣了張圖..侵刪..
  須要注意的是圖中最開始的兩個函數在使用es6 constructor時就不須要了