React（官方文件總結）

阿新 • • 發佈：2020-06-29

1、JSX語法

有助於防止XSS，因為ReactDom在呈現之前，會轉義JSX中嵌入的任何值，所以不會注入未在程式中編寫的任何內容。
Babel會將JSX轉換為語法轉換成物件（使用React.createElement）

2、渲染元素

ReactDom.render(元素,doucument.getElementById('root'));
react元素是不可變的，通過有狀態元件（見下文）時元素可變化。
只跟該內容變化的元素（虛擬Dom，Dom diff演算法）

3、元件

無狀態元件：純函式，不更改傳入的值（返回一個新的值），相同輸入返回相同結果。
狀態元件：也叫類元件，擁有render函式，擁有生命週期，擁有state狀態

講講官網狀態元件栗子：官網如何實現一個定時器狀態元件，首先注意react元素是不可變的，所以需要把元件設定為一個類元件（狀態元件）

1、在constructor中定義this.state

2、定義tick函式，tick函式內呼叫setState更改this.state（state不可以直接修改，必須呼叫setState修改哦！否則不會更新頁面，還有setState可能是非同步的（一致性，效能更優），他會將所有需要更改的state放入一個佇列中，不會立即更新，所以不可以依賴他們的值來計算下一個狀態）

3、在生命週期函componentDidMount迴圈呼叫tick函式。state一旦改變，元件就會重新呼叫render生命週期函式渲染更新頁面

4、事件

react觸發事件1：觸發事件時如果使用onClick = {this.handleSome}。要在constructor中bind繫結this
react觸發事件2：觸發事件直接使用箭頭函式onClick = {()=>this.handleSome}
條件渲染：流程就是出發函式a，在函式a內呼叫setState改變state的布林值

5、列表

使用map方法快速建立列表

list = arr.map((number) => 
    <li> key={number.toString()}>
         {number}
    </li>
)
複製程式碼

必須注意注意注意：key必備（如果你希望你的程式更加優化），設定key的目的是為了效能更好，就像雜湊表，為每個元素設定唯一的鍵，更好的diff演算法

6、受控元件和非受控元件

受控元件：（官方解釋）其值由React這樣控制的輸入表單元素(儲存自己的狀態或根據使用者的輸入更新，如input,textarea,select)稱為“受控元件”。

7、生命週期

面試元件必考的就是生命週期，所以。。。。

react16.8+的生命週期分為三個階段。掛載階段，更新階段，解除安裝階段

掛載階段：

constructor：建構函式，最先執行，我們常常會在元件中的建構函式中初始化state，繫結this。
getDerivedStateFromProps
render
componentDidMount:元件已經裝在，可以操作dom，要記住在conponentwillUnmount中取消事件。進行非同步請求的推薦位置。

更新階段：

getDerivedStateFromProps
shouldComponentUpdate:更新state
render
getSnapshotBeforeUpdate:
componentDidUpdate:已更新

解除安裝階段：

componentWillUnmount

setState同步還是非同步？

setState非同步只是表現為非同步，他的執行過程是同步的，可是合成事件和鉤子函式的呼叫順序實在更新之前，而setState更新是在shouldComponentUpdate，是在更新時，導致合成事件和鉤子函式無法立刻拿到更新值，所以表現為非同步。
setState的更新也是批量更新，如果對一個值進行多次setState，會執行最後一次，而不實時更新，批量更新也是為了保證更好的效能。

8、key

開發過程中，我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff 演算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的還是被移動而來的元素，從而減少不必要的元素重渲染。

9、refs

Refs 是 React 提供給我們的安全訪問 DOM元素或者某個元件例項的控制代碼。我們可以為元素新增 ref 屬性然後在回撥函式中接受該元素在 DOM 樹中的控制代碼，該值會作為回撥函式的第一個引數返回：

class CustomForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ",this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}
複製程式碼