React 基礎 - JSX ｜ 8月更文挑戰

jsx是什麼以及如何理解jsx？

jsx轉js對象的babel轉換器

官方：

• jsx是JavaScrip 的一種擴展語法。咱們推薦在 React 中使用這種語法來描述 UI 信息。JSX 可能會讓你想起某種模板語言，可是它具備    JavaScrip 的所有能力。
• JSX 僅僅只是 React.createElement(component, props, ...children) 函數的語法糖。

理解：

• 前端在瀏覽器能夠解析識別的內容是html，css，js。jsx無論是一個什麼樣的jsx對象，最終都仍是須要渲染成html結構。
• react也稱之爲聲明式UI編程，前端開發人員習慣UI的書寫存在html的風格。這也是由於更好的推廣，若是沒有jsx的語法，書寫標籤還須要調用方法去生成，估計會夭折。
• 具備javascript的所有能力，在於react中會將jsx語法最終轉譯成js對象。這是react語法的詞法分析。React.createElement
• react內部爲虛擬dom機制，jsx對象是一種折中的處理方式，既對開發使用者有好，也能夠經過babel進行轉換成js對象。

jsx的好處是什麼？

react編譯執行上

• JSX 執行更快[執行的並不快，react的虛擬dom速度快而已]，由於它在編譯爲 JavaScript 代碼後進行了優化
• JSX 是類型安全的，在編譯過程當中就能發現錯誤
• 抽象了 React Element 的建立過程；
• 使用 JSX 編寫模板更簡單快速

開發人員使用上

• 容許使用熟悉的語法來定義 HTML 元素樹；
• 提供更加語義化且移動的標籤；
• 程序結構更容易被直觀化；
• 能夠隨時掌控 HTML 標籤以及生成這些標籤的代碼；
• 是原生的 JavaScript。

使用jsx語法的注意點是什麼？

• 渲染HTML標籤，聲明變量採用首字母小寫
• 標籤的屬性class和for，須要寫成className和htmlFor。tabindex 則變爲 tabIndex。由於兩個屬性是JavaScript的保留字和關鍵字
• JSX是HTML和JavaScript混寫的語法，當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析
• 表達式用{}包起來，不要加引號，加引號就會被當成字符串
• style屬性： style={{color:'red'}}
• React默認會進行HTML的轉義，避免XSS攻擊，若是要不轉義 dangerouslySetInnerHTML={{__html: content}}
• 標籤必需要閉合
• 自定義屬性

自定義屬性

除了標籤特有的屬性外，咱們也能夠自定義一些屬性。但這些自定義屬性在真正的頁面渲染後，是否會顯示在頁面上由以下規則決定：

• 凡是以 data- 開頭的自定義屬性，在頁面渲染後都可以顯示在頁面上。
• 非 data- 開頭的自定義屬性，頁面渲染後則不顯示。

元素是什麼？

元素是構成 React 應用的最小磚塊。React 元素其實就是一個簡單JavaScript對象，一個React 元素和界面上的一部分DOM對應，描述了這部分DOM的結構及渲染效果。

React 內部會自動根據React 元素，渲染出最終的頁面DOM。更確切地說，React元素描述的是React虛擬DOM的結構，React會根據虛擬DOM渲染出頁面的真實DOM。

建立元素的幾種方式

• jsx
• react.createElement
• react.cloneElement

元素和組件的關係？

React組件最核心的做用是返回React元素。React組件負責調用React.createElement()，返回React元素，供React內部將其渲染成最終的頁面DOM。

元素的渲染過程？

渲染粗略過程：React元素描述的是 虛擬DOM的結構，React會根據虛擬DOM渲染出頁面的真實DOM。 渲染詳細過程：React 渲染過程

• （1）先調用React.createElement()編譯成上面的js對象(即虛擬DOM節點)
• （2）而後再調用 ReactDOMComponent( vdom ).mountComponent()將虛擬DOM變成真實的DOM
• （3）最後用 appendChild( domNode )插入DOM樹，顯示出來。

咱們要渲染一個 React 元素到一個 root DOM 節點，須要把它們傳遞給 ReactDOM.render() 方法

jSX轉換JS

html元素

<div></div>
複製代碼

React.createElement("div", null);
複製代碼

html元素包含子文本

<div>span</div>
複製代碼

React.createElement("div", null, "span");
複製代碼

html元素包含屬性

<div id="id" key="key1" style={{display: 'none'}} ref="123">span</div>
複製代碼

React.createElement("div", {
  id: "id",
  key: "key1",
  style: {
    display: 'none'
  },
  ref: "123"
}, "span");

複製代碼

html元素包含子元素

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

複製代碼

React.createElement(
  "div", 
  {
    id: "id",
    key: "key1",
    style: {
      display: 'none'
    },
    ref: "123"
  }, 
  React.createElement("span", null, "1"),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

複製代碼

html元素包含組件元素

function Component () {
  return <div>component</div>
}

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <Component key="key2" name="rodchen" />
  <span>2</span>
  <span>3</span>
</div>
複製代碼

function Component() {
  return /*#__PURE__*/React.createElement("div", null, "component");
}

/*#__PURE__*/
React.createElement(
  "div", 
  {
    id: "id",
    key: "key1",
    style: {
      display: 'none'
    },
    ref: "123"
  },

  React.createElement(Component, {
    key: "key2",
    name: "rodchen"
  }),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

複製代碼

html元素包含組件元素包含children

function Component (props) {
  return <div>{props.children}</div>
}

<div id="id" key="key1" style={{display: 'none'}} ref="123">
  <Component key="key2" name="rodchen"><span>children</span></Component>
  <span>2</span>
  <span>3</span>
</div>
複製代碼

function Component() {
  return /*#__PURE__*/React.createElement("div", null, "component");
}

/*#__PURE__*/
React.createElement(
  "div", 
  {
    id: "id",
    key: "key1",
    style: {
      display: 'none'
    },
    ref: "123"
  },

  React.createElement(
    Component, 
    {
      key: "key2",
      name: "rodchen"
    },
    React.createElement("span", null, "children")
  ),
  React.createElement("span", null, "2"),
  React.createElement("span", null, "3")
);

複製代碼

假如咱們將組件名稱修改爲小寫字母

大寫組件名稱

function Component () {
  return <div></div>
}

<div>
  <Component />
</div>

複製代碼

function Component() {
  return /*#__PURE__*/React.createElement("div", null);
}

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement(Component, null));
複製代碼

小寫組件名稱

function component () {
  return <div></div>
}

<div>
  <component />
</div>
複製代碼

function component() {
  return /*#__PURE__*/React.createElement("div", null);
}

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement("component", null));
複製代碼

爲何組件名稱須要大寫，由於小寫的話，createElement會將組件當成html元素解析的。