React的createElement和render手寫實(shí)現(xiàn)示例
TL;DR
本文的目標(biāo)是,手寫實(shí)現(xiàn)createElement
和render
- React.createElement實(shí)現(xiàn)的本質(zhì)就是整合參數(shù)變成對(duì)象,這個(gè)對(duì)象就是
react元素
- ReactDOM.render實(shí)現(xiàn)的本質(zhì)就是根據(jù)
react元素
(對(duì)象)創(chuàng)建真實(shí)元素及其屬性和子元素
科普概念
- JSX 語(yǔ)法 - 就是類似 html 的寫法
<h1>顏醬<span>最酷</span></h1>
- JSX 語(yǔ)法本質(zhì) - JSX 本質(zhì)是語(yǔ)法糖,實(shí)際會(huì)被 babel 編譯成
React.createElement
- react 元素 - 并不是真實(shí) DOM,實(shí)際是
React.createElement
函數(shù)返回的對(duì)象,結(jié)構(gòu)大約如下,核心屬性就是type、props、props.children
reactElement = { type: 'div', props: { className: 'title', style: { color: '#f69' }, children: 'world', }, };
準(zhǔn)備工作
- 先創(chuàng)建一個(gè) react 項(xiàng)目:
create-react-app react-source
- 安裝
cross-env
和修改命令,兼容 React 舊寫法
yarn add cross-env
修改package.json
的命令:
"scripts": { "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start", "build": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts build" },
- 刪除 src 里面所有內(nèi)容,然后新建
index.js
import React from 'react'; import ReactDOM from 'react-dom'; const reactElement_text = 'only text'; const reactElement_oneNode = ( <div className="title" style={{ color: '#f69' }}> one node </div> ); const reactElement_oneChildNode = ( <div> <span>one child node</span> </div> ); const reactElement_multipleNode = ( <div> <span>first child</span> text child </div> ); // only text console.log(reactElement_text); // { type: 'div', props: { className: 'title', style: { color: '#f69' }, children: 'one node' }, }; console.log(reactElement_oneNode); // { type: 'div', props: { children: { type: 'span', props: { children: 'one child node' }, }, }, }; console.log(reactElement_oneChildNode); // { type: 'div', props: { children: [ { type: 'span', props: { children: 'first child node' } }, 'text', ], }, }; console.log(reactElement_multipleNode); ReactDOM.render(reactElement_multipleNode, document.getElementById('root'));
留心看,props.children
的結(jié)構(gòu),有三種類型:字符串、對(duì)象、數(shù)組。
- 啟動(dòng)項(xiàng)目
npm start
(^▽^),就可以看到http://localhost:3000/了!
實(shí)現(xiàn) createElement
JSX 語(yǔ)法相當(dāng)于React.createElement
,那么先實(shí)現(xiàn)createElement
。
先看看怎么相當(dāng),在線訪問(wèn):
- 分析參數(shù) - 輸入
- 第一個(gè)參數(shù),始終是最外層元素名
- 第二個(gè)參數(shù),始終是最外層的元素屬性集合 或
null
- 第三個(gè)參數(shù)及以后的參數(shù),始終是子元素,沒(méi)有子元素的話,就沒(méi)有第三個(gè)參數(shù)
- 幾個(gè)子元素,就多幾個(gè)參數(shù),每個(gè)子元素的類型是
字符串
或React.createElement()
- 分析返回值 - 輸出
- 對(duì)象,也叫
react元素
- 屬性 type 是元素名
- 屬性 props 是對(duì)象,里面是元素的屬性集合,props.children 可能是字符串、
react元素
、數(shù)組(單項(xiàng)還是字符串 或react元素
)
- 新建
source
文件夾,建react.js
。輸入和輸出已經(jīng)明了了,接下來(lái)就是將輸入變成輸出。
function createElement(type, config, ...children) { console.log(type, config, ...children) // children分 0個(gè) 單個(gè) 多個(gè) const isNoneChildren = children.length === 0; const isOneChildren = children.length === 1; children = isNoneChildren ? null : isOneChildren ? children[0] : children; const res = { type, props: { ...config, children, }, }; return res; } const React = { createElement, }; export default React;
實(shí)現(xiàn) render
render
說(shuō)白了就是將React元素
轉(zhuǎn)化成真實(shí)DOM
,插入到root容器
中,從而自動(dòng)渲染。
- 分析參數(shù) - 輸入
- 第一個(gè)參數(shù),可能是
react元素
、普通字符串、null - 第二個(gè)參數(shù),掛載的元素
- 分析返回值 - 無(wú)
- 分析執(zhí)行的結(jié)果 - 顯示第一個(gè)參數(shù)
render 執(zhí)行之后,將第一個(gè)參數(shù)變成真實(shí) DOM,插入到第二個(gè)參數(shù)掛載元素上,因?yàn)閽燧d元素本身存在于文檔之中,所以掛載操作會(huì)觸發(fā)渲染,顯示出來(lái)。因此,render
本質(zhì)就是掛載
第一個(gè)參數(shù)變成真實(shí) DOM,本質(zhì)就是創(chuàng)建元素,增加屬性,增加 children
- 建
source/react-dom.js
function render(vdom, container) { // 本質(zhì)就是掛載,因container本身存在于文檔之中,所以掛載操作會(huì)觸發(fā)渲染 mount(vdom, container); } function mount(vdom, container) { // 將第一個(gè)參數(shù)變成真實(shí)DOM,插入到第二個(gè)參數(shù)掛載元素上 const DOM = createDOM(vdom); container.append(DOM); } function createDOM(vdom) { const isTextNode = typeof vdom === 'string' || vdom == null; if (isTextNode) return document.createTextNode(vdom || ''); const isElementNode = typeof vdom === 'object'; if (isElementNode) return createElementDOM(vdom); function createElementDOM(vdom) { const { type, props } = vdom; let DOM = document.createElement(type); if (props) { updateProps(DOM, props); const { children } = props; children && updateChildren(DOM, children); } return DOM; } } function updateProps(DOM, props) { console.log(DOM, props); // 正常遍歷就好,特殊的特殊處理 for (const key in props) { if (key === 'children') continue; if (key === 'style') { updateStyle(DOM, props[key]); continue; } DOM[key] = props[key]; } function updateStyle(DOM, styleObj) { for (const key in styleObj) { DOM.style[key] = styleObj[key]; } } } function updateChildren(DOM, children) { // 單個(gè)節(jié)點(diǎn),直接插入(掛載)到DOM上; 多個(gè)節(jié)點(diǎn),遍歷插入 const isOneChildren = !Array.isArray(children); isOneChildren ? mount(children, DOM) : children.forEach((child) => mount(child, DOM)); } const ReactDOM = { render, }; export default ReactDOM;
測(cè)試
將index.js
里面的react
和react-dom
換成我們寫的。
以上就是React的createElement和render手寫實(shí)現(xiàn)示例的詳細(xì)內(nèi)容,更多關(guān)于React createElement render的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React + webpack 環(huán)境配置的方法步驟
本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟,詳解的介紹了開發(fā)環(huán)境的配置搭建,有興趣的可以了解一下2017-09-09詳解react-navigation6.x路由庫(kù)的基本使用
最近兩個(gè)項(xiàng)目都用到了React Navigation,所以就研究一下如何使用,本文主要介紹了react-navigation6.x路由庫(kù)的基本使用,感興趣的可以了解一下2021-11-11React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖(Debounce)技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來(lái)看看如何使用Lodash庫(kù)中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧2024-01-01react-routerV6版本和V5版本的詳細(xì)對(duì)比
React-Router5是React-Router6的前一個(gè)版本,它已經(jīng)被React-Router6取代,React-Router 6是一次較大的重大更新,本文就來(lái)介紹一下react-routerV6版本和V5版本的詳細(xì)對(duì)比,感興趣的可以了解一下2023-12-12使用webpack搭建react開發(fā)環(huán)境的方法
本篇文章主要介紹了使用webpack搭建react開發(fā)環(huán)境的方法,在這篇文章中我們開始利用我們之前所學(xué)搭建一個(gè)簡(jiǎn)易的React開發(fā)環(huán)境,用以鞏固我們之前學(xué)習(xí)的Webpack知識(shí)。一起跟隨小編過(guò)來(lái)看看吧2018-05-05作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn)
這篇文章主要介紹了作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn),需要的朋友可以參考下2017-04-04React-redux實(shí)現(xiàn)小案例(todolist)的過(guò)程
這篇文章主要為大家詳細(xì)介紹了React-redux實(shí)現(xiàn)小案例(todolist)的過(guò)程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼
這篇文章主要介紹了react?hooks計(jì)數(shù)器實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08