一起來學(xué)習(xí)React元素的創(chuàng)建和渲染
React 是一個用于構(gòu)建用戶界面的 JavaScript 庫
它包括兩個庫：react.js 和 react-dom.js
react.js：React 的核心庫，提供了 React.js 的核心功能，比如創(chuàng)建 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>標(biāo)簽的方式來加載 React，則可以通過React全局變量對象來獲得 React 的頂層 API如果你使用一個
<script>標(biāo)簽引入 react-dom，所有的頂層 API 都能在全局ReactDOM上調(diào)用
先來看看 React 和 ReactDOM 是什么：
console.log(React) console.log(ReactDOM)
React
ReactDOM
可以看到是兩個對象，并且擁有很多方法，暫時不必深究每個方法
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 標(biāo)簽引入這兩個庫（后續(xù)不再贅述）
接著我們在界面上添加一個根元素：
<div id="root"></div>
如果我們想給這個根元素添加一段文字比如： Hello,React! ，我們可以這么做：
<div id="root">
Hello,React!
</div>
現(xiàn)在用 React 的方式來將這個標(biāo)題渲染到頁面上
我們要用到 ReactDOM 提供的 API ：ReactDOM.render()
ReactDOM.render("Hello, React!", document.getElementById("root"), () => {
console.log("渲染完執(zhí)行回調(diào)函數(shù)");
});
事實上，render 方法接受 3 個參數(shù)：
- 要渲染的內(nèi)容（"Hello, React!"）
- 渲染內(nèi)容的接收容器（此處的根元素）
- 可選的回調(diào)函數(shù)（回調(diào)函數(shù)會在內(nèi)容被渲染后執(zhí)行）
創(chuàng)建 React 元素
如果我們想要渲染的內(nèi)容是一個標(biāo)題 h1 或者一個段落 p ，甚至是更復(fù)雜的元素嵌套該怎么辦呢
<!-- 比如 -->
<h1>Hello,React!</h1>
<p>第一次學(xué)習(xí)React，太簡單了吧</p>
<!-- 甚至 -->
<div>
<header>
<h1>Hello,React!</h1>
</header>
<section>
<p>第一次學(xué)習(xí)React，太簡單了吧</p>
</section>
</div>
React 提供了創(chuàng)建并返回 React 元素的 API：
React.createElement( type, [props], [...children] )
該方法接受 3 個參數(shù)：
- type：指定元素類型，比如 'h1'、'p'
- props：可選參數(shù)，元素的屬性值對對象，比如
{className: 'bg-red', id: 'title'}
- 可選參數(shù)，元素的子元素
創(chuàng)建元素并渲染到指定容器
const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次學(xué)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 創(chuàng)建的 React 元素作為渲染對象
2.render 方法屬于 ReactDOM 對象
3.createElement 方法屬于 React 對象
JSX
每個 React 元素都用 createElement 創(chuàng)建有點麻煩啊，有沒有簡單點的辦法
事實上，對于：
const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次學(xué)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>第一次學(xué)react，太簡單了吧</p>;
const header = (
<header>
<h1>Hello,React!</h1>
</header>
);
const section = (
<section>
<p>第一次學(xué)react，太簡單了吧</p>
</section>
);
const div = (
<div>
<header>
<h1>Hello,React!</h1>
</header>
<section>
<p>第一次學(xué)react，太簡單了吧</p>
</section>
</div>
);
這種標(biāo)簽語法既不是字符串也不是 HTML
它被稱為 JSX，是 JavaScript 的語法擴(kuò)展
事實上，每個 JSX 元素一個語法糖，它們最終還是會調(diào)用React.createElement(component, props, ...children) 方法來創(chuàng)建 React 元素。不過我們寫起來更加簡單且直觀
JSX 初體驗
我們將所有 createElement 創(chuàng)建的元素改寫成 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>第一次學(xué)react，太簡單了吧</p>;
const header = (
<header>
<h1>Hello,React!</h1>
</header>
);
const section = (
<section>
<p>第一次學(xué)react，太簡單了吧</p>
</section>
);
const div = (
<div>
<header>
<h1>Hello,React!</h1>
</header>
<section>
<p>第一次學(xué)react，太簡單了吧</p>
</section>
</div>
);
ReactDOM.render(div, document.querySelector("#root"));
</script>
</html>
在瀏覽器中打開，會發(fā)現(xiàn)頁面上的元素并沒有得到正確的渲染
并且控制臺輸出了錯誤：Uncaught SyntaxError: Unexpected token '<'
這是因為瀏覽器并不認(rèn)識 JSX，JSX 只是 React 團(tuán)隊自己造的東西，我們需要把 JSX 轉(zhuǎn)換成符合 JS 規(guī)范的語法，這樣瀏覽器就認(rèn)識了
這跟將 ES6 語法轉(zhuǎn)換成 ES5 差不多
什么東西能把 ES6 語法轉(zhuǎn)換成 ES5 ？
沒錯，Babel
同樣，借助 Babel 我們可以將 JSX 轉(zhuǎn)換成 JS 語法
在頁面中添加如下 script 標(biāo)簽
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
并將 script 標(biāo)簽（指包含 JSX 語法的 script）的 type 屬性改為：text/babel
<script type="text/babel"> const h1 = <h1>Hello,React!</h1>; </script>
現(xiàn)在，元素可以正確的顯示了
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了React Form組件的實現(xiàn)封裝雜談，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了React Native 腳手架的基本使用詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家介紹了react組件中過渡動畫的問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了Component與PureComponent解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
react?native?reanimated實現(xiàn)動畫示例詳解
這篇文章主要為大家介紹了react?native?reanimated實現(xiàn)動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在開發(fā)中，我們想要給一個組件的顯示和消失添加某種過渡動畫，可以很好的增加用戶體驗。 當(dāng)然，我們可以通過原生的CSS來實現(xiàn)這些過渡動畫，這篇文章主要介紹了React過渡動畫組件使用2022-09-09
React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching
這篇文章主要為大家介紹了React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
解決React報錯`value` prop on `input` should&
這篇文章主要為大家介紹了React報錯`value` prop on `input` should not be null解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家詳細(xì)介紹了react四大核心內(nèi)容架構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03