摘要：系列系列簡(jiǎn)單模擬語(yǔ)法一系列合成事件與二系列算法實(shí)現(xiàn)分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六的誕生他是的一種擴(kuò)展語(yǔ)法。這個(gè)函數(shù)接受組件的實(shí)例或元素作為參數(shù)，以存儲(chǔ)它們并使它們能被其他地方訪問(wèn)。

React系列 --- 簡(jiǎn)單模擬語(yǔ)法(一)
React系列 --- Jsx, 合成事件與Refs(二)
React系列 --- virtualdom diff算法實(shí)現(xiàn)分析(三)
React系列 --- 從Mixin到HOC再到HOOKS(四)
React系列 --- createElement, ReactElement與Component部分源碼解析(五)
React系列 --- 從使用React了解Css的各種使用方案(六)

他是 JavaScrip 的一種擴(kuò)展語(yǔ)法。 React 官方推薦使用這種語(yǔ)法來(lái)描述 UI 信息。JSX 可能會(huì)讓你想起某種模板語(yǔ)言，但是它具有 JavaScrip 的全部能力

JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。

它是類型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。

使用 JSX 編寫(xiě)模板更加簡(jiǎn)單快速。

本質(zhì)上來(lái)講，JSX 只是為 React.createElement(component, props, ...children) 方法提供的語(yǔ)法糖

  123456

"use strict";

React.createElement("div", {
  className: "num",
  index: 1
}, React.createElement("span", null, "123456"));

具體效果可以在此體驗(yàn)

這就是為什么盡管你看不到里面使用過(guò)React,但是如果你不引入模塊的話JSX會(huì)報(bào)錯(cuò).

從上面的編譯代碼來(lái)看,JSX最終包含的信息其實(shí)分別是: 元素標(biāo)簽, 元素屬性, 子元素.如果用Javascript對(duì)象來(lái)表示的話:

{
  tag: "div",
  attrs: { className: "num", index: 1},
  children: [
    {
      tag: "span",
      arrts: null,
      children: null
    }
  ]
}

所以整個(gè)過(guò)程大概如下

至于為什么會(huì)有中間編譯成JS對(duì)象那一步而不直接編譯成Dom元素.

除了普通頁(yè)面還可能渲染到canvas或者原生App(React Native了解一下)

后面的diff比較需要用到

React的事件是基于SyntheticEvent的實(shí)例實(shí)現(xiàn)模擬跨瀏覽器原生事件一樣的接口,包括stopPropagation()和preventDefault()，期望事件的行為跨瀏覽器是相同的.甚至兼容直達(dá)IE8.每個(gè)SyntheicEvent對(duì)象都有如下屬性：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

在JavaScript中，事件的觸發(fā)實(shí)質(zhì)上是要經(jīng)過(guò)三個(gè)階段:事件捕獲、目標(biāo)對(duì)象本身的事件處理和事件冒泡.

stopPropagation(): 停止事件冒泡

preventDefault(): 阻止默認(rèn)行為

return false: 實(shí)際上使用這個(gè)的時(shí)候會(huì)做三件事

event.preventDefault();

event.stopPropagation();

停止回調(diào)函數(shù)執(zhí)行并立即返回。

出于性能原因.React會(huì)通過(guò)池方式復(fù)用SyntheicEvent對(duì)象,這意味著事件調(diào)用完成之后event.target上所有的屬性都會(huì)失效.意思就是當(dāng)我們嘗試異步方式調(diào)用React事件,因?yàn)閺?fù)用的原因,在事件回調(diào)執(zhí)行完之后SyntheicEvent對(duì)象將不再存在,所以我們無(wú)法訪問(wèn)其屬性.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Won"t work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});

  // You can still export event properties.
  this.setState({eventType: event.type});
}

比較常見(jiàn)的例子就是setState方法.

event.persist()

事件回調(diào)中調(diào)用event.persist()方法，這樣會(huì)在池中刪除合成事件，并且允許用戶代碼保留對(duì)事件的引用。

緩存屬性

我們可以將事件屬性存儲(chǔ)在事件函數(shù)并且傳遞給異步回調(diào)函數(shù)而不是直接在異步回調(diào)里訪問(wèn)它們.

 this.deleteRow(id, e)}>Delete Row

Debouncing a synthetic event handler(不知道怎么翻譯)

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

源碼注釋

/**
 * Summary of `ReactBrowserEventEmitter` event handling:
 *
 *  - Top-level delegation is used to trap most native browser events. This
 *    may only occur in the main thread and is the responsibility of
 *    ReactDOMEventListener, which is injected and can therefore support
 *    pluggable event sources. This is the only work that occurs in the main
 *    thread.
 *
 *  - We normalize and de-duplicate events to account for browser quirks. This
 *    may be done in the worker thread.
 *
 *  - Forward these native events (with the associated top-level type used to
 *    trap it) to `EventPluginHub`, which in turn will ask plugins if they want
 *    to extract any synthetic events.
 *
 *  - The `EventPluginHub` will then process each event by annotating them with
 *    "dispatches", a sequence of listeners and IDs that care about that event.
 *
 *  - The `EventPluginHub` then dispatches the events.
 *
 * Overview of React and the event system:
 *
 * +------------+    .
 * |    DOM     |    .
 * +------------+    .
 *       |           .
 *       v           .
 * +------------+    .
 * | ReactEvent |    .
 * |  Listener  |    .
 * +------------+    .                         +-----------+
 *       |           .               +--------+|SimpleEvent|
 *       |           .               |         |Plugin     |
 * +-----|------+    .               v         +-----------+
 * |     |      |    .    +--------------+                    +------------+
 * |     +-----------.--->|EventPluginHub|                    |    Event   |
 * |            |    .    |              |     +-----------+  | Propagators|
 * | ReactEvent |    .    |              |     |TapEvent   |  |------------|
 * |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
 * |            |    .    |              |     +-----------+  |  utilities |
 * |     +-----------.--->|              |                    +------------+
 * |     |      |    .    +--------------+
 * +-----|------+    .                ^        +-----------+
 *       |           .                |        |Enter/Leave|
 *       +           .                +-------+|Plugin     |
 * +-------------+   .                         +-----------+
 * | application |   .
 * |-------------|   .
 * |             |   .
 * |             |   .
 * +-------------+   .
 *                   .
 *    React Core     .  General Purpose Event Plugin System
 */

DOM將事件傳給ReactEventListener注冊(cè)到document,然后分發(fā)到具體節(jié)點(diǎn).EventPluginHub負(fù)責(zé)事件的存儲(chǔ),合成事件以及池方式的實(shí)現(xiàn)創(chuàng)建和銷毀,后面是各種類型的合成事件模擬,交互通過(guò)ReactEventEmitter將原生的DOM事件轉(zhuǎn)化成合成的事件,觸發(fā)將對(duì)應(yīng)操作推入隊(duì)列批量執(zhí)行.因?yàn)闉g覽器會(huì)為每個(gè)事件的每個(gè)listener創(chuàng)建一個(gè)事件對(duì)象,上面提到的池方式復(fù)用就是為了解決高額內(nèi)存分配的問(wèn)題.

Clipboard Events

Composition Events

Keyboard Events

Focus Events

Form Events

Mouse Events

Pointer Events

Selection Events

Touch Events

UI Events

Wheel Events

Media Events

Image Events

Animation Events

Transition Events

Other Events

其中事件都會(huì)被自動(dòng)傳入一個(gè)event對(duì)象,是由React將瀏覽器原生的event對(duì)象封裝一下對(duì)外提供統(tǒng)一的API和屬性.

因?yàn)镽eact里調(diào)用傳入方法的時(shí)候并不是通過(guò)對(duì)象方法方式,而是直接通過(guò)函數(shù)調(diào)用,所以里面指向的this是null或者undefined.

一般傳入的時(shí)候需要手動(dòng)用bind或者箭頭函數(shù)顯性綁定this指向

這是一種用于訪問(wèn)render方法中創(chuàng)建的DOM節(jié)點(diǎn)或React元素的方式.一般用于

處理表單,媒體控制

觸發(fā)強(qiáng)制動(dòng)畫(huà)

集成第三方DOM庫(kù)

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return 

  }
}

const node = this.myRef.current;

如果用于一個(gè)普通HTMl元素時(shí),React.createRef() 將接收底層 DOM 元素作為它的 current 屬性以創(chuàng)建 ref 。

當(dāng) ref 屬性被用于一個(gè)自定義類組件時(shí)，ref 對(duì)象將接收該組件已掛載的實(shí)例作為它的 current 。

你不能在函數(shù)式組件上使用 ref 屬性，因?yàn)樗鼈儧](méi)有實(shí)例。

不同于傳遞 createRef() 創(chuàng)建的 ref 屬性，你會(huì)傳遞一個(gè)函數(shù)。這個(gè)函數(shù)接受 React 組件的實(shí)例或 HTML DOM 元素作為參數(shù)，以存儲(chǔ)它們并使它們能被其他地方訪問(wèn)。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;

    this.setTextInputRef = element => {
      this.textInput = element;
    };

    this.focusTextInput = () => {
      // 直接使用原生 API 使 text 輸入框獲得焦點(diǎn)
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 渲染后文本框自動(dòng)獲得焦點(diǎn)
    this.focusTextInput();
  }

  render() {
    // 使用 `ref` 的回調(diào)將 text 輸入框的 DOM 節(jié)點(diǎn)存儲(chǔ)到 React
    // 實(shí)例上（比如 this.textInput）
    return (
      

        
        
      
    );
  }
}

如果是組件間傳遞回調(diào)形式的 refs如下:

function CustomTextInput(props) {
  return (
    

      
    
  );
}

class Parent extends React.Component {
  render() {
    return (
       this.inputElement = el}
      />
    );
  }
}

因?yàn)闊o(wú)狀態(tài)組件是不會(huì)被實(shí)例化的,但是我們可以用過(guò)一個(gè)變量訪問(wèn)其中的組件或者dom元素組件的實(shí)例引用

function CustomTextInput(props) {
  let inputRef;
  return (
    

       inputRef = node} />
    
  );
}