React 學習之 createElement React 元素 在 React 中，元素是 React 應用的最小構建塊。 一個 React 元素是 React 對象的一個輕量級、靜態的表示。 它們被 React 用於知道屏幕上什麼應該被渲染，併在數據改變時保持 UI 的更新。 React 元素是 ...
React 學習之 createElement
React 元素
在 React 中，元素是 React 應用的最小構建塊。
一個 React 元素是 React 對象的一個輕量級、靜態的表示。
它們被 React 用於知道屏幕上什麼應該被渲染，併在數據改變時保持 UI 的更新。
React 元素是不可變的：一旦創建，就不能更改它的子元素或屬性。
一個元素就像電影的單幀：它代表 UI 在某一時間點的樣子。
儘管 React 元素在技術上是一個對象，但它們並不是實際的 DOM 元素。
React 使用這些對象來構建 DOM，併在必要時更新它。
React 元素是 React 的抽象表示，而不是 DOM 的直接表示。
總的來說，React 元素確實可以被視為普通的 JavaScript 對象，但它們在 React 的工作流中扮演著特殊的角色，用於描述 UI 的結構和屬性。
React.createElement
用來創建一個React元素
參數：
- 標簽名 元素的名稱（HTML標簽必須小寫）
- 屬性 標簽中的屬性
- 在設置事件時，屬性名需要修改為駝峰命名法 值為一個函數
- 例如：onClick 需要修改為 onClick
- Warning: Invalid DOM property
class. Did you meanclassName? class -> className
- 子元素 標簽中的子元素
- 例如：這是一個div 子元素為"這是一個div"
- 子元素可以是字元串、數字、React元素、數組、布爾值、null、undefined
- 返回值：一個React元素
- 註意點：
- React 元素最終會通過虛擬DOM轉換為真實的DOM元素
- React 元素是一個普通的JS對象
React.createElement 是 React 庫中的一個函數，用於在 JavaScript 中創建 React 元素。在 JSX 語法被引入之前，React.createElement 是創建 React 組件樹的主要方式。儘管現在 JSX 在 React 社區中非常流行，但理解 React.createElement 仍然很重要，因為它實際上是 JSX 在編譯時轉換為的東西。
React.createElement 函數接受三個參數：
類型 (type)：這通常是一個字元串（表示一個 DOM 元素，如 'div' 或 'span'）或一個 React 組件類（或函數）。
配置對象 (config)：一個可選的對象，包含該元素的 props。
子元素 (children)：可以是任何有效的 React 子元素，可以是一個或多個。
示例：
const element = React.createElement(
'div',
{ id: 'myDiv', className: 'myClass' },
'Hello, world!',
React.createElement('span', null, 'This is a span.')
);
這個示例創建了一個 div 元素，它有一個 ID 和一個類名，以及兩個子元素：一個文本節點和一個 span 元素。
當你使用 JSX 時，上述代碼可以寫為：
const element = (
<div id="myDiv" className="myClass">
Hello, world!
<span>This is a span.</span>
</div>
);
儘管 JSX 提供了更簡潔、更易於理解的語法，但理解 React.createElement 仍然有助於你理解 React 的底層工作原理。
React createElement 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React learning</title>
<script src="script/react.development.js"></script>
<script src="script/react-dom.development.js"></script>
</head>
<body>
<button id="btn">我是一個按鈕</button>
<div id="root"></div>
<script>
/*
在 React 中，元素是 React 應用的最小構建塊。一個 React 元素是 React 對象的一個輕量級、靜態的表示。
它們被 React 用於知道屏幕上什麼應該被渲染，併在數據改變時保持 UI 的更新。
React 元素是不可變的：一旦創建，就不能更改它的子元素或屬性。一個元素就像電影的單幀：它代表 UI 在某一時間點的樣子。
儘管 React 元素在技術上是一個對象，但它們並不是實際的 DOM 元素。
React 使用這些對象來構建 DOM，併在必要時更新它。React 元素是 React 的抽象表示，而不是 DOM 的直接表示。
總的來說，React 元素確實可以被視為普通的 JavaScript 對象，但它們在 React 的工作流中扮演著特殊的角色，用於描述 UI 的結構和屬性。
React.createElement
- 用來創建一個React元素
- 參數：
- 標簽名 元素的名稱（HTML標簽必須小寫）
- 屬性 標簽中的屬性
- 在設置事件時，屬性名需要修改為駝峰命名法 值為一個函數
- 例如：onClick 需要修改為 onClick
- Warning: Invalid DOM property `class`. Did you mean `className`? class屬性需要使用 className 設置
- 子元素 元素的內容（子元素）
- 返回值：一個React元素
- 註意點：
- React 元素最終會通過虛擬DOM轉換為真實的DOM元素
- React 元素是一個普通的JS對象
- React 元素是不可變的，一旦創建，就不能更改它的子元素或者屬性 React 元素一旦創建就無法修改，
如果想要修改，只能重新創建新的元素，即只能通過新創建的元素進行替換
*/
// 創建一個React元素
const button = React.createElement(
"button",
{
id: "btn",
type: "button",
className: "hello",
onClick: () => {
alert(123);
},
},
"點我一下"
);
// 創建一個div
const div = React.createElement("div", {}, "這是一個div", button);
// 獲取根元素
const root = ReactDOM.createRoot(document.getElementById("root"));
// 將React元素渲染到根元素中 將元素在根元素中顯示
root.render(div);
// 獲取按鈕對象
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
// 點擊按鈕後，修改div中button中的文字為 click me
const button = React.createElement(
"button",
{
id: "btn",
type: "button",
className: "hello",
onClick: () => {
alert(123);
},
},
"click me"
);
// 創建一個div
const div = React.createElement("div", {}, "這是一個div", button);
// 修改React元素後，必須重新渲染React根元素
// 當調用render渲染頁面時，React會自動比較兩次渲染的元素，只在真實DOM中更新發生變化的部分，沒發生變化的保持不變
// 這樣可以提高頁面的性能
// 重新渲染React根元素
root.render(div);
});
</script>
</body>
</html>
參考
本文來自博客園，作者：尋月隱君，轉載請註明原文鏈接：https://www.cnblogs.com/QiaoPengjun/p/18120002
