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

React前端開發(fā)createElement源碼解讀

 更新時間：2022年11月03日 15:10:52   作者：冴羽  
這篇文章主要為大家介紹了React前端開發(fā)createElement源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

React 與 Babel

元素標簽轉譯

用過 React 的同學都知道，當我們這樣寫時：

<div id="foo">bar</div>

Babel 會將其轉譯為：

React.createElement("div", {id: "foo"}, "bar");

我們會發(fā)現(xiàn)，createElement 的第一個參數是元素類型，第二個參數是元素屬性，第三個參數是子元素

組件轉譯

如果我們用的是一個組件呢？

function Foo({id}) {
  return <div id={id}>foo</div>
}
<Foo id="foo">
  <div id="bar">bar</div>
</Foo>

Babel 則會將其轉譯為：

function Foo({id}) {
  return React.createElement("div", {id: id}, "foo")}
React.createElement(Foo, {id: "foo"},
  React.createElement("div", {id: "bar"}, "bar")
);

我們會發(fā)現(xiàn)，createElement 的第一個參數傳入的是變量 Foo

子元素轉譯

如果我們有多個子元素呢？

<div id="foo">
  <div id="bar">bar</div>
	<div id="baz">baz</div>
  <div id="qux">qux</div>
</div>

Babel 則會將其轉譯為：

React.createElement("div", { id: "foo"}, 
  React.createElement("div", {id: "bar"}, "bar"), 
  React.createElement("div", {id: "baz"}, "baz"),
  React.createElement("div", {id: "qux"}, "qux")
);

我們會發(fā)現(xiàn)，子元素其實是作為參數不斷追加傳入到函數中

createElement

那 React.createElement 到底做了什么呢？

源碼

我們查看 React 的 GitHub 倉庫：github.com/facebook/re…，查看 pacakges/react/index.js文件，可以看到 createElement 的定義在 ./src/React文件：

// 簡化后
export {createElement} from './src/React';

我們打開 ./src/React.js文件：

import {
  createElement as createElementProd
} from './ReactElement';
const createElement = __DEV__
  ? createElementWithValidation
  : createElementProd;
export { createElement };

繼續(xù)查看 ./ReactElement.js文件，在這里終于找到最終的定義，鑒于這里代碼較長，我們將代碼極度簡化一下：

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};
export function createElement(type, config, ...children) {
  let propName;
  // Reserved names are extracted
  const props = {};
  // 第一段
  let key = '' + config.key;
  let ref = config.ref;
  let self = config.__self;
  let source = config.__source;
  // 第二段
  for (propName in config) {
    if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName];
    }
  }
  // 第三段
  props.children = children;
  // 第四段
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  // 第五段
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

這里可以看出，createElement 函數主要是做了一個預處理，然后將處理好的數據傳入 ReactElement 函數中，我們先分析下 createElement 做了什么。

函數入參

我們以最一開始的例子為例：

<div id="foo">bar</div>
// 轉譯為
React.createElement("div", {id: "foo"}, "bar");

對于createElement 的三個形參，其中type 表示類型，既可以是標簽名字符串（如 div 或 span），也可以是 React 組件（如 Foo）

config 表示傳入的屬性，children 表示子元素

第一段代碼 __self 和 __source

現(xiàn)在我們開始看第一段代碼：

  // 第一段
  let key = '' + config.key;
  let ref = config.ref;
  let self = config.__self;
  let source = config.__source;

可以看到在 createElement 函數內部，key、ref、__self、__source 這四個參數是單獨獲取并處理的，key 和 ref 很好理解，__self 和 __source 是做什么用的呢？

通過這個 issue，我們了解到，__self 和 __source 是 babel-preset-react注入的調試信息，可以提供更有用的錯誤信息。

我們查看 babel-preset-react 的文檔，可以看到：

development

boolean 類型，默認值為 false. 這可以用于開啟特定于開發(fā)環(huán)境的某些行為，例如添加 __source 和 __self。 在與 env 參數 配置或 js 配置文件 配合使用時，此功能很有用。

如果我們試著開啟 development 參數，就會看到 __self 和 __source 參數，依然以 <div id="foo">bar</div> 為例，會被 Babel 轉譯成：

var _jsxFileName = "/Users/kevin/Desktop/react-app/src/index.js";
React.createElement("div", {
  id: "foo",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 5,
    columnNumber: 13
  }
}, "bar");

第二段代碼 props 對象

現(xiàn)在我們看第二段代碼：

// 第二段
for (propName in config) {
    if (config.hasOwnProperty(propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
      props[propName] = config[propName];
    }
}

這段代碼實現(xiàn)的功能很簡單，就是構建一個 props 對象，去除傳入的 key、ref、__self、__source屬性，這就是為什么在組件中，我們明明傳入了 key 和ref，但我們無法通過 this.props.key 或者 this.props.ref 來獲取傳入的值，就是因為在這里被去除掉了。

而之所以去除，React 給出的解釋是，key 和 ref 是用于 React 內部處理的，如果你想用比如 key 值，你可以再傳一個其他屬性，用跟 key 相同的值即可。

第三段代碼 children

現(xiàn)在我們看第三段代碼，這段代碼被精簡的很簡單：

// 第三段
props.children = children;

這是其實是因為我們?yōu)榱撕喕a，用了 ES6 的擴展運算法，實際的源碼里會復雜且有一些差別：

const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray;
}

我們也可以發(fā)現(xiàn)，當只有一個子元素的時候，children 其實會直接賦值給 props.children，也就是說，當只有一個子元素時，children 是一個對象（React 元素），當有多個子元素時，children 是一個包含對象（React 元素）的數組。

第四段代碼 defaultProps

現(xiàn)在我們看第四段代碼：

  // 第四段
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }

這段其實是處理組件的defaultProps，無論是函數組件還是類組件都支持 defaultProps，舉個使用例子：

// 函數組件
function Foo({id}) {
  return <div id={id}>foo</div>
}
 Foo.defaultProps = {
   id: 'foo'
 }
// 類組件
 class Header extends Component {
   static defaultProps = {
     id: 'foo'
   }
   render () {
     const { id } = this.props
     return <div id={id}>foo</div>
   }
 }

第五段代碼 owner

現(xiàn)在我們看第五段代碼：

  // 第五段
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );

這段就是把前面處理好的 type、key 等值傳入 ReactElement 函數中，那 ReactCurrentOwner.current是個什么鬼？

我們根據引用地址查看 ReactCurrentOwner定義的文件：

/**
 * Keeps track of the current owner.
 *
 * The current owner is the component who should own any components that are
 * currently being constructed.
 */
const ReactCurrentOwner = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: null,
};
export default ReactCurrentOwner;

其初始的定義非常簡單，根據注釋，我們可以了解到 ReactCurrentOwner.current 就是指向處于構建過程中的組件的 owner，具體作用在以后的文章中還有介紹，現(xiàn)在可以簡單的理解為，它就是用于記錄臨時變量。

ReactElement

源碼

現(xiàn)在我們開始看 ReactElement 函數，其實這個函數的內容更簡單，代碼精簡后如下：

const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // This tag allows us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,
    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,
    // Record the component responsible for creating this element.
    _owner: owner,
  };
  return element;
};

如你所見，它就是返回一個對象，這個對象包括 $$typeof、type、key 等屬性，這個對象就被稱為 “React 元素”。它描述了我們在屏幕上看到的內容。React 會通過讀取這些對象，使用它們構建和更新 DOM

REACT_ELEMENT_TYPE

而 REACT_ELEMENT_TYPE 查看引用的 packages/shared/ReactSymbols 文件，可以發(fā)現(xiàn)它就是一個唯一常量值，用于標示是 React 元素節(jié)點

export const REACT_ELEMENT_TYPE = Symbol.for('react.element');

那還有其他類型的節(jié)點嗎？ 查看這個定義 REACT_ELEMENT_TYPE 的文件，我們發(fā)現(xiàn)還有：

export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');
export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');
export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');
export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler');
export const REACT_PROVIDER_TYPE: symbol = Symbol.for('react.provider');
export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');
// ...

你可能會自然的理解為 $$typeof 還可以設置為 REACT_FRAGMENT_TYPE等值。

我們可以寫代碼實驗一下，比如使用 Portal，打印一下返回的對象：

import ReactDOM from 'react-dom/client';
import {createPortal} from 'react-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
function Modal() {
  const portalObject = createPortal(<div id="foo">foo</div>, document.getElementById("root2"));
  console.log(portalObject)
  return portalObject
}
root.render(<Modal />);

打印的對象為：

它的 $$typeof 確實是 REACT_PORTAL_TYPE

而如果我們使用 Fragment：

import ReactDOM from 'react-dom/client';
import React from 'react';
const root = ReactDOM.createRoot(document.getElementById('root'));
function Modal() {
  const fragmentObject = (
    <React.Fragment>
      <div id="foo">foo</div>
    </React.Fragment>
    );
  console.log(fragmentObject)
  return fragmentObject
}
root.render(<Modal />);

打印的對象為：

我們會發(fā)現(xiàn)，當我們使用 fragment 的時候，返回的對象的 $$typeof 卻依然是 REACT_ELEMENT_TYPE 這是為什么呢?

其實細想一下我們使用 portals 的時候，我們用的是 React.createPortal 的方式，但 fragments 走的依然是普通的 React.createElement 方法，createElement 的代碼我們也看到了，并無特殊處理 $$typeof 的地方，所以自然是 REACT_ELEMENT_TYPE

那么 $$typeof 到底是為什么存在呢？其實它主要是為了處理 web 安全問題，試想這樣一段代碼：

let message = { text: expectedTextButGotJSON };
// React 0.13 中有風險
<p>
  {message.text}
</p>

如果 expectedTextButGotJSON是來自于服務器的值，比如：

// 服務端允許用戶存儲 JSON
let expectedTextButGotJSON = {
  type: 'div',
  props: {
    dangerouslySetInnerHTML: {
      __html: '/* something bad */'
    },
  },
  // ...
};
let message = { text: expectedTextButGotJSON };

這就很容易受到 XSS 攻擊，雖然這個攻擊是來自服務器端的漏洞，但使用 React 我們可以處理的更好。如果我們用 Symbol 標記每個 React 元素，因為服務端的數據不會有 Symbol.for('react.element')，React 就可以檢測 element.$$typeof，如果元素丟失或者無效，則可以拒絕處理該元素，這樣就保證了安全性。

回顧

至此，我們完整的看完了 React.createElement 的源碼，現(xiàn)在我們再看 React 官方文檔的這段：

以下兩種示例代碼完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 會預先執(zhí)行一些檢查，以幫助你編寫無錯代碼，但實際上它創(chuàng)建了一個這樣的對象：

// 注意：這是簡化過的結構
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

這些對象被稱為 “React 元素”。它們描述了你希望在屏幕上看到的內容。React 通過讀取這些對象，然后使用它們來構建 DOM 以及保持隨時更新。

現(xiàn)在你對這段是不是有了更加深入的認識？

React 系列的預熱系列，帶大家從源碼的角度深入理解 React 的各個 API 和執(zhí)行過程

以上就是React前端開發(fā)createElement源碼解讀的詳細內容，更多關于React前端開發(fā)createElement的資料請關注腳本之家其它相關文章！

相關文章

  • React Hooks: useEffect()調用了兩次問題分析

    React Hooks: useEffect()調用了兩次問題分析

    這篇文章主要為大家介紹了React Hooks: useEffect()調用了兩次問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11
  • react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)

    react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)

    這篇文章主要介紹了react組件從搭建腳手架到在npm發(fā)布的步驟實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • react native仿微信PopupWindow效果的實例代碼

    react native仿微信PopupWindow效果的實例代碼

    本篇文章主要介紹了react native仿微信PopupWindow效果的實例代碼，具有一定的參考價值，有興趣的可以了解一下
    2017-08-08
  • React Store及store持久化的使用教程

    React Store及store持久化的使用教程

    這篇文章主要介紹了React Store及store持久化的使用教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • React利用props的children實現(xiàn)插槽功能

    React利用props的children實現(xiàn)插槽功能

    React中并沒有vue中的?slot?插槽概念?不過?可以通過props.children?實現(xiàn)類似功能，本文為大家整理了實現(xiàn)的具體方，需要的可以參考一下
    2023-07-07
  • React彈窗使用方式NiceModal重新思考

    React彈窗使用方式NiceModal重新思考

    這篇文章主要為大家介紹了React彈窗使用方式NiceModal重新思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-08-08
  • react中form.setFieldvalue數據回填時 value和text不對應的問題及解決方法

    react中form.setFieldvalue數據回填時 value和text不對應的問題及解決方法

    這篇文章主要介紹了react中form.setFieldvalue數據回填時 value和text不對應的問題及解決方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-07-07
  • React大文件分片上傳原理及方案

    React大文件分片上傳原理及方案

    前端進行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對文件進行分片，用數組將每一個分片存起來，最后將分片發(fā)給后端，本文給大家介紹React大文件分片上傳方案，感興趣的朋友跟隨小編一起看看吧
    2023-08-08
  • 聊聊ant?design?charts?獲取后端接口數據展示問題

    聊聊ant?design?charts?獲取后端接口數據展示問題

    今天在做項目的時候遇到幾個讓我很頭疼的問題，一個是通過后端接口成功訪問并又返回數據，但拿不到數據值。其二是直接修改state中的data，console中數組發(fā)生變化但任然數據未顯示，這篇文章主要介紹了ant?design?charts?獲取后端接口數據展示,需要的朋友可以參考下
    2022-05-05
  • 在React 組件中使用Echarts的示例代碼

    在React 組件中使用Echarts的示例代碼

    本篇文章主要介紹了在React 組件中使用Echarts的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11

最新評論