React（官方文檔總結）

一、JSX語法

• 有助於防止XSS，由於ReactDom在呈現以前，會轉義JSX中嵌入的任何值，因此不會注入未在程序中編寫的任何內容。
• Babel會將JSX轉換爲語法轉換成對象（使用React.createElement）

二、渲染元素

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

三、組件

• 無狀態組件：純函數，不更改傳入的值（返回一個新的值），相同輸入返回相同結果。
• 狀態組件：也叫類組件，擁有render函數，擁有生命週期，擁有state狀態
• 講講官網狀態組件栗子：官網如何實現一個定時器狀態組件，首先注意react元素是不可變的，因此須要把組件設置爲一個類組件（狀態組件）

一、在constructor中定義this.state

二、定義tick函數，tick函數內調用setState更改this.state（state不能夠直接修改，必須調用setState修改哦！不然不會更新頁面，還有setState多是異步的（一致性，性能更優），他會將全部須要更改的state放入一個隊列中，不會當即更新，因此不能夠依賴他們的值來計算下一個狀態）

三、在生命週期函componentDidMount循環調用tick函數。state一旦改變，組件就會從新調用render生命週期函數渲染更新頁面

四、事件

• react觸發事件1：觸發事件時若是使用onClick = {this.handleSome}。要在constructor中bind綁定this
• react觸發事件2：觸發事件直接使用箭頭函數onClick = {()=>this.handleSome}
• 條件渲染：流程就是出發函數a，在函數a內調用setState改變state的布爾值

五、列表

• 使用map方法快速創建列表

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

必須注意注意注意：key必備（若是你但願你的程序更加優化），設置key的目的是爲了性能更好，就像哈希表，爲每一個元素設置惟一的鍵，更好的diff算法

六、受控組件和非受控組件

• 受控組件：（官方解釋）其值由React這樣控制的輸入表單元素(保存本身的狀態或根據用戶的輸入更新，如input,textarea,select)稱爲「受控組件」。

七、生命週期

面試組件必考的就是生命週期，因此。。。。

react16.8+的生命週期分爲三個階段。掛載階段，更新階段，卸載階段

掛載階段：

• constructor：構造函數，最早執行，咱們經常會在組件中的構造函數中初始化state，綁定this。
• getDerivedStateFromProps
• render
• componentDidMount:組件已經裝在，能夠操做dom，要記住在conponentwillUnmount中取消事件。進行異步請求的推薦位置。

更新階段：

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

卸載階段：

• componentWillUnmount

setState同步仍是異步？

• setState異步只是表現爲異步，他的執行過程是同步的，但是合成事件和鉤子函數的調用順序實在更新以前，而setState更新是在shouldComponentUpdate，是在更新時，致使合成事件和鉤子函數沒法馬上拿到更新值，因此表現爲異步。
• setState的更新也是批量更新，若是對一個值進行屢次setState，會執行最後一次，而不實時更新，批量更新也是爲了保證更好的性能。

八、key

• 開發過程當中，咱們須要保證某個元素的 key 在其同級元素中具備惟一性。在 React Diff 算法中 React 會藉助元素的 Key 值來判斷該元素是新近建立的仍是被移動而來的元素，從而減小沒必要要的元素重渲染。

九、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>
    )
  }
}
複製代碼

十、redux

*最大特色是數據的"單向流動"。

• 用戶訪問 View

• View 發出用戶的 Action

• Dispatcher 收到 Action，要求 Store 進行相應的更新

• Store 更新後，發出一個"change"事件

• View 收到"change"事件後，更新頁面

十一、受控組件和非受控組件

• 區別就是表單數據是由誰控制的，react控制就是受控組件，dom控制就是非受控組件