React 也就這樣 01——React 元素的建立和渲染

蜜瓜發表於2022-02-22
React

React 是一個用於構建使用者介面的 JavaScript 庫

它包括兩個庫：react.js 和 react-dom.js

  • react.js：React 的核心庫，提供了 React.js 的核心功能，比如建立 React 元件、元件的生命週期等
  • react-dom.js：提供了和瀏覽器互動的 DOM 功能，比如：將元件渲染到頁面上

React 和 ReactDOM

我們可以通過官方提供的 CDN 連結引入 react.js 和 react-dom.js 這兩個庫，從而在 HTML 中使用

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

React 是 React 庫的入口。如果你通過使用 <script> 標籤的方式來載入 React，則可以通過 React 全域性變數物件來獲得 React 的頂層 API

如果你使用一個 <script> 標籤引入 react-dom，所有的頂層 API 都能在全域性 ReactDOM 上呼叫

先來看看 React 和 ReactDOM 是什麼：

console.log(React)
console.log(ReactDOM)

React

Snipaste_2022-01-12_17-02-08

ReactDOM

Snipaste_2022-01-12_17-03-20

可以看到是兩個物件，並且擁有很多方法，暫時不必深究每個方法

React 初體驗

首先我們在 html 中引入：react.js react-dom.js

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

目前我們的程式碼寫在 html 中，所以都通過 script 標籤引入這兩個庫（後續不再贅述）

接著我們在介面上新增一個根元素：

<div id="root"></div>

如果我們想給這個根元素新增一段文字比如： Hello,React! ，我們可以這麼做：

<div id="root">
    Hello,React!
</div>

現在用 React 的方式來將這個標題渲染到頁面上

我們要用到 ReactDOM 提供的 API ：ReactDOM.render()

ReactDOM.render("Hello, React!", document.getElementById("root"), () => {
      console.log("渲染完執行回撥函式");
});

線上程式碼（可以點選線上程式碼檢視效果）

事實上，render 方法接受 3 個引數：

  • 要渲染的內容（"Hello, React!"）
  • 渲染內容的接收容器（此處的根元素）
  • 可選的回撥函式（回撥函式會在內容被渲染後執行）

建立 React 元素

如果我們想要渲染的內容是一個標題 h1 或者一個段落 p ，甚至是更復雜的元素巢狀該怎麼辦呢

<!-- 比如 -->
<h1>Hello,React!</h1>
<p>第一次學習React，太簡單了吧</p>
<!-- 甚至 -->
<div>
    <header>
        <h1>Hello,React!</h1>
    </header>
    <section>
        <p>第一次學習React，太簡單了吧</p>
    </section>
</div>

React 提供了建立並返回 React 元素的 API：

React.createElement(
  type,
  [props],
  [...children]
)

該方法接受 3 個引數：

  • type：指定元素型別，比如 'h1'、'p'

  • props：可選引數，元素的屬性值對物件，比如

    {className: 'bg-red', id: 'title'}

  • 可選引數，元素的子元素

建立元素並渲染到指定容器

const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次學react，太簡單了吧");

const header = React.createElement("header", { id: "title" }, h1);
const section = React.createElement("section", null, p);
const div = React.createElement("div", null, header, section);

渲染到根元素：

ReactDOM.render(div, document.querySelector("#root"));

線上程式碼

注意

  1. render 方法可以接受 createElement 建立的 React 元素作為渲染物件
  2. render 方法屬於 ReactDOM 物件
  3. createElement 方法屬於 React 物件

JSX

每個 React 元素都用 createElement 建立有點麻煩啊，有沒有簡單點的辦法

事實上，對於：

const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次學react，太簡單了吧");

const header = React.createElement("header", { id: "title" }, h1);
const section = React.createElement("section", null, p);
const div = React.createElement("div", null, header, section);

可以這麼寫：

const h1 = <h1>Hello,React!</h1>;
const p = <p>第一次學react，太簡單了吧</p>;

const header = (
    <header>
        <h1>Hello,React!</h1>
    </header>
);
const section = (
    <section>
        <p>第一次學react，太簡單了吧</p>
    </section>
);

const div = (
    <div>
        <header>
            <h1>Hello,React!</h1>
        </header>
        <section>
            <p>第一次學react，太簡單了吧</p>
        </section>
    </div>
);

這種標籤語法既不是字串也不是 HTML

它被稱為 JSX，是 JavaScript 的語法擴充套件

事實上，每個 JSX 元素一個語法糖，它們最終還是會呼叫React.createElement(component, props, ...children) 方法來建立 React 元素。不過我們寫起來更加簡單且直觀

JSX 初體驗

我們將所有 createElement 建立的元素改寫成 JSX

得到如下完整 HTML 頁面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  const h1 = <h1>Hello,React!</h1>;
  const p = <p>第一次學react，太簡單了吧</p>;

  const header = (
    <header>
      <h1>Hello,React!</h1>
    </header>
  );
  const section = (
    <section>
      <p>第一次學react，太簡單了吧</p>
    </section>
  );

  const div = (
    <div>
      <header>
        <h1>Hello,React!</h1>
      </header>
      <section>
        <p>第一次學react，太簡單了吧</p>
      </section>
    </div>
  );

  ReactDOM.render(div, document.querySelector("#root"));
</script>

</html>

在瀏覽器中開啟，會發現頁面上的元素並沒有得到正確的渲染

並且控制檯輸出了錯誤：Uncaught SyntaxError: Unexpected token '<'

這是因為瀏覽器並不認識 JSX，JSX 只是 React 團隊自己造的東西，我們需要把 JSX 轉換成符合 JS 規範的語法，這樣瀏覽器就認識了

這跟將 ES6 語法轉換成 ES5 差不多

什麼東西能把 ES6 語法轉換成 ES5 ？

沒錯，Babel

同樣，藉助 Babel 我們可以將 JSX 轉換成 JS 語法

在頁面中新增如下 script 標籤

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

並將 script 標籤（指包含 JSX 語法的 script）的 type 屬性改為：text/babel

<script type="text/babel">
  const h1 = <h1>Hello,React!</h1>;
</script>

現在，元素可以正確的顯示了

線上程式碼

現在，我們已經學會了如何用 React 來建立元素和渲染元素，也初步瞭解了建立元素的方法的語法糖 JSX。

相關文章