React基礎

生命週期

React 生命週期

Mounting（掛載階段）

• constructor()

• 載入時呼叫，初始化state

• static getDerivedStateFromProps(props, state)
  props： 父元件傳來的props
  state： 本元件的state值
  會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回一個物件來更新 state，如果返回 null 則不更新任何內容。

• render()
  建立虛擬DOM，進行diff演算法

• componentDidMount
  渲染完成，在此函式中呼叫axios和ajax請求

Updating（更新階段)

• static getDerivedStateFromProps(props, state)
  會在呼叫 render 方法之前呼叫，並且在初始掛載及後續更新時都會被呼叫。它應返回一個物件來更新 state，如果返回 null 則不更新任何內容。
• shouldComponentUpdate(nextProps, nextState)
  當 props 或 state 發生變化時，此函式會在渲染執行之前被呼叫。
  返回值預設為 true，更新dom
  返回false，阻止更新，不呼叫render
• render()
  建立虛擬DOM，進行diff演算法
• getSnapshotBeforeUpdate(prevProps, prevState)
  最近一次渲染輸出（提交到 DOM 節點）之前呼叫。返回一個值，作為componentDidUpdate的第三個引數
  prevProps：更新前的props值
  prevState：更新前的state值
• componentDidUpdate()
  元件更新完成後呼叫

Redux

redux的三大原則

• 單一的資料來源
• 狀態只讀
• 狀態的修改均有純函式完成

redux的核心是一個store

• creatStore(reducers,初始值狀態

• reducers 負責響應action

• reducer 的職責是根據previousState和action 計算出新state。

• redux 的核心api 是creatStore()

• 通過creatStore 建立的store 物件，有4個方法

• getState（）獲取當前的store

• dispatch（action）分發action，並返回這個action，這是唯一修改store中資料的方式

• subscribe（listener）註冊一個監聽者。他在store發生變化是呼叫

• replaceReducer更新當前store裡的reducer

Refs

Refs 是使用 React.createRef() 建立的，並通過 ref 屬性附加到 React 元素。

• 當 ref 屬性用於 HTML 元素時，建構函式中使用 React.createRef() 建立的 ref 接收底層 DOM 元素作為其current 屬性。
• 當 ref 屬性用於自定義 class 元件時，ref 物件接收元件的掛載例項作為其 current 屬性。
• 在componentDidMount函式中通過訪問dom讓文字框處於啟用狀態