一起來學習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
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 標簽引入這兩個庫(後續不再贅述)
接著我們在界面上添加一個根元素:
<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>
現在,元素可以正確的顯示瞭
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!