創建 React Element

yanbingyun1990 發布于2019-08-23 12:34 / 3039人閱讀

摘要：現在，我們完成了的創建，下一步就需要將這個元素變成真正的節點添加到我們的頁面中去。那我們第一步應該要創建這些節點。首先引入對象，使用方法創建第一個元素，第一個顯示，然后再創建兩個相同的元素，分別顯示和。

在上一章節中，我們使用 create-react-app 工具搭建了一個基于 react 的開發環境，那么從這一章起，我們就正式開始 react 框架的學習。

打開 my-app 項目，找到 src/index.js 文件，我們在上一章中提到過，這個文件是整個應用的入口，當頁面刷新時，會主動去加載這個文件，那這里我們直接刪掉這個目錄下的其他文件，只保存 index.js 即可。然后刪除這個文件中的默認代碼，并調用console.log("in")方法在控制臺上進行輸出。

使用 yarn start 命令啟動項目，打開瀏覽器開發者工具，可以看到控制臺成功打印。使用腳手架工具搭建的開發環境中，已經實現了熱加載的功能，也就是說，當我們完成 js 代碼的修改之后，不在需要頻繁的通過刷新來查看頁面的效果，在每次修改保存之后，瀏覽器會自動的完成頁面的刷新。比如這里，我把這里輸出的字符串稍稍改一下，然后保存，可以看到控制臺已經將剛剛修改的字符串輸出了。

React Element

好，回到 react 框架的知識點上，我們知道，一個頁面是由很多的節點元素組合在一起的，比方說，h1 元素，div 元素，ul 元素等等。那實際上，在 react 中，最小的組成單元也是元素，只是我們將它稱之為 react element。那么，我們如何創建一個 react element 呢？

比方說，這里我需要在頁面中顯示一個 h1 的元素，里面是一個 Hello World 字符串，那首先我就需要創建這樣的一個 react element。

react 框架中，有兩個核心對象 React 和 ReactDOM。這里就可以通過 React 對象來創建一個 h1 元素，首先引入這個對象。

import React from "react";

然后調用 createElement 方法來創建元素。這個方法的第一個參數是我們需要創建的節點類型，這里我需要創建一個 h1 元素，那參數就是 h1，第二個參數是這個元素擁有的屬性設置，沒有屬性的時候可以直接給 null 的值，第三個參數就是該元素的子元素，這里我們需要在 h1 元素下顯示 Hello World，那我們就可以把這個字符串當成它的子元素傳遞進去。這個方法的返回值就是一個 react element。我們可以在控制臺上打印這個對象。

const h1Ele = React.createElement("h1", null, "Hello World");
console.log(h1Ele)

從控制臺上我們可以看到，它就是一個普通的 javascript 對象，這個對象擁有一些屬性，用來描述真實的元素。比方說: 這里的 type 屬性就是用來描述這個元素的類型，也就是說這個對象映射的是一個 h1 元素，同理，這里的 props.children 指的就是這個元素下面的子元素，也就是的 Hello World 字符串。

現在，我們完成了 react element 的創建，下一步就需要將這個元素變成真正的 DOM 節點添加到我們的頁面中去。這時，就需要使用 ReactDOM 對象來完成真實節點的渲染。首先引入這個對象。

import ReactDOM from "react-dom"

在 ReactDOM 對象上，有一個 render 方法，就是專門用來將 react element 渲染成真實 DOM 的。這個方法接收 2 個參數。第一個參數是我們需要渲染的 react element，這里我們就直接使用剛剛創建的那個 h1 元素；第二個參數是需要將這些元素顯示到頁面的哪個地方。打開 index.html 頁面，我們可以發現，在這個頁面中有一個空白的 div 元素，這個元素我們稱之為叫容器，專門用來存放由 react 產生的這些元素的。那么這里，我們就可以把這個元素當成 render 方法的第二個參數。保存之后，查看頁面，我們就可以看到在頁面上顯示了一個 Hello World。

ReactDOM.render(h1Ele, document.querySelector("#root"))

下一步，我們如何給這個節點增加樣式呢？回到剛剛創建節點的那個方法，實際上，我們可以在這個方法的第二個參數中，來設置這個節點的樣式，比方說，我現在需要讓這個 h1 的字體顏色變成紅色，那么直接指定 style color: red 就可以了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  }
}, "Hello World");

除了使用 style 屬性以外，我們依然可以通過引入外部樣式表來修飾。這里我新建一個 css 文件，添加一個 class 選擇器，設置字體大小為 50px，然后在 index.js 中，我們使用 import 引入這個 css 文件：

// theme.css
.msg {
  font-size: 50px;
}

// index.js
import "./theme.css"

然后在創建這個元素的時候，指定這個元素的 className 為 msg 就可以了，這時我們可以看到這個樣式表就應用到當前這個元素了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  },
  className: "msg"
}, "Hello World");

多個子元素的傳遞方式

接下來，我想再渲染一個列表應該如何操作呢？比方說，在這個列表中要顯示 3 個選項，分別是 HTML，CSS 和 JAVASCRIPT。那我們第一步應該要創建這些節點。

首先引入 React 對象，使用 createElement 方法創建第一個 li 元素，第一個顯示 HTML，然后再創建兩個相同的元素，分別顯示 CSS 和 JAVASCRIPT。

const li_01 = React.createElement("li", null, "HTML")
const li_02 = React.createElement("li", null, "CSS")
const li_03 = React.createElement("li", null, "JAVASCRIPT")

子元素創建完成之后，我們再來創建一個 ul 元素，因為這個ul元素有多個子元素，因此，這里有兩種方式可以來傳遞子元素，第一種，我們可以把每一個子元素都當成參數傳遞給 createElement 方法

const ulEle = React.createElement("ul", null, li_01, li_02, li_03)

完成之后，將 ulEle 元素通過 render 方法渲染出來。查看頁面，可以看到列表已經成功顯示。

第二種方法，我們還可以將這些子元素變成一個數組交給 createElement 方法完成渲染，查看頁面，我們可以看到列表依然正常顯示，但是控制臺給咱們拋出了一個警告:

這個警告的原因是，如果我們通過數組迭代的方式來創建子元素的話，我們需要給每一個子元素添加一個key的屬性，而且這個屬性的值，在同級元素中必須是唯一且不變的。那這里，我們給每一個li元素都增加一個key，值得話，讓他們保證唯一就可以了。再查看頁面，這時警告就消失了。

const li_01 = React.createElement("li", { key: 0 }, "HTML")
const li_02 = React.createElement("li", { key: 1 }, "CSS")
const li_03 = React.createElement("li", { key: 2 }, "JAVASCRIPT")

當然，這里我們還可以定義一個數組，然后通過迭代數組來產生這些li元素，這樣可以簡化一下我們的代碼：

const arr = ["HTML", "CSS", "JAVASCRIPT"]

const liEles = arr.map((item, index) => {
  return React.createElement("li", {
    key: index
  }, item)
})

const ulEle = React.createElement("ul", null, liEles)

GPU云服務器云服務器 Element element-ui element-ui dialog組件 react

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98745.html

圖解 React Virtual DOM

摘要：判斷是否是有效的元素。主要和同構相關。是真實的模擬，真實是由真實的元素構成，也是由虛擬的元素構成。當這些對象上的數據發生變化時，通過打把變化同步到真實的上去。原創新書移動前端高效開發實戰已在亞馬遜京東當當開售。作者：阿希（滬江Web前端開發工程師）本文原創，轉載請注明作者及出處。了解 React 的人幾乎都聽過說 Virtual DOM，甚至不了解 React 的人也聽過 Vi...

Soarkey 2019-08-20 19:02 評論0 收藏0
【譯】渲染Elements

摘要：注不做翻譯是中最小的構建部件。在里渲染讓我們看一下在下面有在你文件中無處不在的標簽我們會把這元素成為元素因為的所有東西都會放在這個元素里面。通過方法，我們能吧渲染到我們根節點上。更新被渲染的是不可變的。下面是react官方文檔的個人翻譯，如有翻譯錯誤，請多多指出原文地址：https://facebook.github.io/re...特別感謝Hevaen，同時也向豪大React群所有...

LoftySoul 2019-08-20 14:29 評論0 收藏0
React源碼解析之ReactDOM.render()

摘要：一更新的方式有三種渲染接下來，我們就來看下源碼二作用在提供的里渲染一個元素，并返回對該組件的引用常見的用法是這個官網網址源碼服務端使用方法渲染節點是讓服務端盡可能復用節點，提高性能元素容器應用渲染結束后，調用的函數錯誤抓取方法本質是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 評論0 收藏0
React 內部機制探秘 - React Component 和 Element（文末附彩蛋demo

摘要：內部機制探秘和文末附彩蛋和源碼這篇文章比較偏基礎，但是對入門內部機制和實現原理卻至關重要。當然也需要明白一些淺顯的內部工作機制。當改變出現時，相比于真實更新虛擬的性能優勢非常明顯。直到最終，會得到完整的表述樹的對象。 React 內部機制探秘 - React Component 和 Element（文末附彩蛋demo和源碼）這篇文章比較偏基礎，但是對入門 React 內部機制和實現原...

wenshi11019 2019-08-21 16:49 評論0 收藏0
React源碼解析之React.createElement()和ReactElement()

摘要：一語法轉換到語法從轉換到會用到，所以先熟悉下到的轉換。對于庫作者而言，凍結對象可防止有人修改庫的核心對象。 showImg(https://segmentfault.com/img/remote/1460000019757204); 一、JSX語法轉換到Js語法從 JSX 轉換到 JS 會用到React.createElement()，所以先熟悉下 JSX 到 JS 的轉換。這邊是 ...

BlackMass 2019-08-23 18:39 評論0 收藏0