欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React的createElement和render手寫實(shí)現(xiàn)示例

 更新時(shí)間:2022年10月12日 08:57:22   作者:顏醬  
這篇文章主要為大家介紹了React的createElement和render手寫實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

TL;DR

本文的目標(biāo)是,手寫實(shí)現(xiàn)createElementrender

  • 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里面的reactreact-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)境配置的方法步驟

    本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟,詳解的介紹了開發(fā)環(huán)境的配置搭建,有興趣的可以了解一下
    2017-09-09
  • React?模式之純組件使用示例詳解

    React?模式之純組件使用示例詳解

    這篇文章主要為大家介紹了React?模式之純組件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 詳解react-navigation6.x路由庫(kù)的基本使用

    詳解react-navigation6.x路由庫(kù)的基本使用

    最近兩個(gè)項(xiàng)目都用到了React Navigation,所以就研究一下如何使用,本文主要介紹了react-navigation6.x路由庫(kù)的基本使用,感興趣的可以了解一下
    2021-11-11
  • React實(shí)現(xiàn)表單提交防抖功能的示例代碼

    React實(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-01
  • react-routerV6版本和V5版本的詳細(xì)對(duì)比

    react-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
  • react中使用antd及immutable示例詳解

    react中使用antd及immutable示例詳解

    這篇文章主要為大家介紹了react中使用antd及immutable示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 使用webpack搭建react開發(fā)環(huán)境的方法

    使用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)

    這篇文章主要介紹了作為老司機(jī)使用 React 總結(jié)的 11 個(gè)經(jīng)驗(yàn)教訓(xùn),需要的朋友可以參考下
    2017-04-04
  • React-redux實(shí)現(xiàn)小案例(todolist)的過(guò)程

    React-redux實(shí)現(xiàn)小案例(todolist)的過(guò)程

    這篇文章主要為大家詳細(xì)介紹了React-redux實(shí)現(xiàn)小案例(todolist)的過(guò)程,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼

    react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼

    這篇文章主要介紹了react?hooks計(jì)數(shù)器實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08

最新評(píng)論