React 深度學習：3. ReactElement

時間 2019-12-09

原文原文鏈接

ReactElement 下面導出了多個方法：

createElement 用於建立並返回一個新的ReactElement 元素
createFactory 用於返回固定類的 createElement 方法 【已廢棄】
cloneElement 克隆一個元素
isValidElement 驗證一個對象是否爲 ReactElement 。
cloneAndReplaceKey 使用給定 key 返回一個新的 ReactElement 類型

源碼

包：packages/react/src/ReactElement.js

/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */

import invariant from 'shared/invariant';
import warningWithoutStack from 'shared/warningWithoutStack';
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';

import ReactCurrentOwner from './ReactCurrentOwner';

const hasOwnProperty = Object.prototype.hasOwnProperty;

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};

let specialPropKeyWarningShown, specialPropRefWarningShown;

function hasValidRef(config) {
  if (__DEV__) {
    if (hasOwnProperty.call(config, 'ref')) {
      const getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
      if (getter && getter.isReactWarning) {
        return false;
      }
    }
  }
  return config.ref !== undefined;
}

function hasValidKey(config) {
  if (__DEV__) {
    if (hasOwnProperty.call(config, 'key')) {
      const getter = Object.getOwnPropertyDescriptor(config, 'key').get;
      if (getter && getter.isReactWarning) {
        return false;
      }
    }
  }
  return config.key !== undefined;
}

function defineKeyPropWarningGetter(props, displayName) {
  const warnAboutAccessingKey = function() {
    if (!specialPropKeyWarningShown) {
      specialPropKeyWarningShown = true;
      warningWithoutStack(
        false,
        '%s: `key` is not a prop. Trying to access it will result ' +
          'in `undefined` being returned. If you need to access the same ' +
          'value within the child component, you should pass it as a different ' +
          'prop. (https://fb.me/react-special-props)',
        displayName,
      );
    }
  };
  warnAboutAccessingKey.isReactWarning = true;
  Object.defineProperty(props, 'key', {
    get: warnAboutAccessingKey,
    configurable: true,
  });
}

function defineRefPropWarningGetter(props, displayName) {
  const warnAboutAccessingRef = function() {
    if (!specialPropRefWarningShown) {
      specialPropRefWarningShown = true;
      warningWithoutStack(
        false,
        '%s: `ref` is not a prop. Trying to access it will result ' +
          'in `undefined` being returned. If you need to access the same ' +
          'value within the child component, you should pass it as a different ' +
          'prop. (https://fb.me/react-special-props)',
        displayName,
      );
    }
  };
  warnAboutAccessingRef.isReactWarning = true;
  Object.defineProperty(props, 'ref', {
    get: warnAboutAccessingRef,
    configurable: true,
  });
}

/** * Factory method to create a new React element. This no longer adheres to * the class pattern, so do not use new to call it. Also, no instanceof check * will work. Instead test $$typeof field against Symbol.for('react.element') to check * if something is a React Element. * * @param {*} type * @param {*} key * @param {string|object} ref * @param {*} self A *temporary* helper to detect places where `this` is * different from the `owner` when React.createElement is called, so that we * can warn. We want to get rid of owner and replace string `ref`s with arrow * functions, and as long as `this` and owner are the same, there will be no * change in behavior. * @param {*} source An annotation object (added by a transpiler or otherwise) * indicating filename, line number, and/or other information. * @param {*} owner * @param {*} props * @internal */
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,
  };

  if (__DEV__) {
    // The validation flag is currently mutative. We put it on
    // an external backing store so that we can freeze the whole object.
    // This can be replaced with a WeakMap once they are implemented in
    // commonly used development environments.
    element._store = {};

    // To make comparing ReactElements easier for testing purposes, we make
    // the validation flag non-enumerable (where possible, which should
    // include every environment we run tests in), so the test framework
    // ignores it.
    Object.defineProperty(element._store, 'validated', {
      configurable: false,
      enumerable: false,
      writable: true,
      value: false,
    });
    // self and source are DEV only properties.
    Object.defineProperty(element, '_self', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: self,
    });
    // Two elements created in two different places should be considered
    // equal for testing purposes and therefore we hide it from enumeration.
    Object.defineProperty(element, '_source', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: source,
    });
    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }
  }

  return element;
};

/** * Create and return a new ReactElement of the given type. * See https://reactjs.org/docs/react-api.html#createelement */
export function createElement(type, config, children) {
  let propName;

  // Reserved names are extracted
  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  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];
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }

  // Resolve default props
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  if (__DEV__) {
    if (key || ref) {
      const displayName =
        typeof type === 'function'
          ? type.displayName || type.name || 'Unknown'
          : type;
      if (key) {
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

/** * Return a function that produces ReactElements of a given type. * See https://reactjs.org/docs/react-api.html#createfactory */
export function createFactory(type) {
  const factory = createElement.bind(null, type);
  // Expose the type on the factory and the prototype so that it can be
  // easily accessed on elements. E.g. `<Foo />.type === Foo`.
  // This should not be named `constructor` since this may not be the function
  // that created the element, and it may not even be a constructor.
  // Legacy hook: remove it
  factory.type = type;
  return factory;
}

export function cloneAndReplaceKey(oldElement, newKey) {
  const newElement = ReactElement(
    oldElement.type,
    newKey,
    oldElement.ref,
    oldElement._self,
    oldElement._source,
    oldElement._owner,
    oldElement.props,
  );

  return newElement;
}

/** * Clone and return a new ReactElement using element as the starting point. * See https://reactjs.org/docs/react-api.html#cloneelement */
export function cloneElement(element, config, children) {
  invariant(
    !(element === null || element === undefined),
    'React.cloneElement(...): The argument must be a React element, but you passed %s.',
    element,
  );

  let propName;

  // Original props are copied
  const props = Object.assign({}, element.props);

  // Reserved names are extracted
  let key = element.key;
  let ref = element.ref;
  // Self is preserved since the owner is preserved.
  const self = element._self;
  // Source is preserved since cloneElement is unlikely to be targeted by a
  // transpiler, and the original source is probably a better indicator of the
  // true owner.
  const source = element._source;

  // Owner will be preserved, unless ref is overridden
  let owner = element._owner;

  if (config != null) {
    if (hasValidRef(config)) {
      // Silently steal the ref from the parent.
      ref = config.ref;
      owner = ReactCurrentOwner.current;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }

    // Remaining properties override existing props
    let defaultProps;
    if (element.type && element.type.defaultProps) {
      defaultProps = element.type.defaultProps;
    }
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        if (config[propName] === undefined && defaultProps !== undefined) {
          // Resolve default props
          props[propName] = defaultProps[propName];
        } else {
          props[propName] = config[propName];
        }
      }
    }
  }

  // Children can be more than one argument, and those are transferred onto
  // the newly allocated props object.
  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;
  }

  return ReactElement(element.type, key, ref, self, source, owner, props);
}

/** * Verifies the object is a ReactElement. * See https://reactjs.org/docs/react-api.html#isvalidelement * @param {?object} object * @return {boolean} True if `object` is a ReactElement. * @final */
export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}
複製代碼

ReactElement

/** * * 用來建立 React 元素的工廠方法。 * 再也不遵循類的模式，由於不能使用 new 來調用它，instance 檢查無效。 * 取而代之，能夠檢測 $$typeof 字段與 Symbol.for('react.element') 是否匹配來判斷是不是一個 React 元素 * * @param {*} type * @param {*} key * @param {string|object} ref * @param {*} self A *temporary* helper to detect places where `this` is * different from the `owner` when React.createElement is called, so that we * can warn. We want to get rid of owner and replace string `ref`s with arrow * functions, and as long as `this` and owner are the same, there will be no * change in behavior. * @param {*} source An annotation object (added by a transpiler or otherwise) * indicating filename, line number, and/or other information. * @param {*} owner * @param {*} props * @internal */
const ReactElement = function(type, key, ref, self, source, owner, props) {
  const element = {
    // 這個標記容許咱們惟一地將其標識爲 React 元素
    $$typeof: REACT_ELEMENT_TYPE,

    // 元素的內置屬性
    type: type,
    key: key,
    ref: ref,
    props: props,

    // 記錄負責建立此元素的組件.
    _owner: owner,
  };

  if (__DEV__) {
    // The validation flag is currently mutative. We put it on
    // an external backing store so that we can freeze the whole object.
    // This can be replaced with a WeakMap once they are implemented in
    // commonly used development environments.
    element._store = {};

    // To make comparing ReactElements easier for testing purposes, we make
    // the validation flag non-enumerable (where possible, which should
    // include every environment we run tests in), so the test framework
    // ignores it.
    Object.defineProperty(element._store, 'validated', {
      configurable: false,
      enumerable: false,
      writable: true,
      value: false,
    });
    // self and source are DEV only properties.
    Object.defineProperty(element, '_self', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: self,
    });
    // Two elements created in two different places should be considered
    // equal for testing purposes and therefore we hide it from enumeration.
    Object.defineProperty(element, '_source', {
      configurable: false,
      enumerable: false,
      writable: false,
      value: source,
    });
    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }
  }

  return element;
};複製代碼

createElement

React.createElement 函數在 React 中具備舉足輕重的地位，咱們的組件最後都會編譯成它。
javascript

/** * 使用給定 type 建立並返回的新的 React 元素。 * See https://reactjs.org/docs/react-api.html#createelement */
export function createElement(type, config, children) {
  let propName;

  // Reserved names are extracted
  const props = {};

  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // 剩餘的屬性被添加到一個新的 props 對象中
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

  // Children 能夠是多個參數，這些參數被轉移到新分配的 props 對象上。
  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];
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);
      }
    }
    props.children = childArray;
  }

  // 解析默認 props
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  if (__DEV__) {
    if (key || ref) {
      const displayName =
        typeof type === 'function'
          ? type.displayName || type.name || 'Unknown'
          : type;
      if (key) {
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}複製代碼

來看看一個示例：html

React.createElement('div');複製代碼

返回一個對象，對象以下：java

能夠看到就是建立了一個普通的 javascript 對象。這時候，產生了幾個疑問：react

這個普普統統的 javascript 對象是如何變成了咱們頁面的 DOM 結構的
DOM 層級如此之多，信息之複雜，React 又是如何實現的？
上一章節中講到的 Component，它通過編譯後傳遞給了 React.createElement 方法什麼樣的參數，類中的實例屬性和原型方法如何進行了傳遞。

isValidElement

經過判斷對象的 $$typeof 屬性與 Symbol.for('react.element') 是否相同來，驗證一個對象是否爲 React 元素。git

經過 React.createElement 方法建立的對象，都含有一個值徹底相同的 $$typeof屬性，標識其爲一個 React 元素。github

export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}複製代碼

React 如何實現 DOM 層級

來看下面的 Hello 組件：api

function Hello(props) {
  function sayHi() { return (<div>Hi</div>); }
  
  function handleClick(e) {
    console.log('click');
  }
  return (
    <div> { sayHi() } Hello { props.name } <p className="title" onClick={ handleClick }>React</p> <p className="content">React is cool!</p> <MyFooter className="footer"> <div className="concat">concat</div> <div className="info">company info</div> </MyFooter> </div>
  );
}複製代碼

MyFooter 組件：數組

function MyFooter(props) {
  return (
    <div className="footer"> { props.children } </div>
  );
}
複製代碼

咱們採用了函數式組件的方式，他們將分別被編譯爲：bash

// Hello 組件
function Hello(props) {
  function sayHi() {
    return React.createElement("div", null, "Hi");
  }

  function handleClick(e) {
    console.log('click');
  }

  return React.createElement("div", null, sayHi(), "Hello ", props.name, React.createElement("p", {
    className: "title",
    onClick: handleClick
  }, "React"), React.createElement("p", {
    className: "content"
  }, "React is cool!"), React.createElement(MyFooter, {
    className: "footer"
  }, React.createElement("div", {
    className: "concat"
  }, "concat"), React.createElement("div", {
    className: "info"
  }, "company info")));
}

// MyFooter 組件
function MyFooter(props) {
  return React.createElement("div", {
    className: "footer"
  }, props.children);
}複製代碼

首先，從上面的代碼咱們能夠看出下面幾點：babel

組件都會被編譯成React.createElement不管是自定義組件仍是原始的 html 標籤，都會被編譯器編譯。
React.createElement 方法的參數個數是可變的，在上面源碼分析中，咱們已經看到從第三個參數開始的全部參數會打包爲一個數組，存入 React 元素的 props 屬性的 children 中。
不論從組件的哪一級部分開始劃分，其子元素都是經過函數參數傳遞進父級的，並最後都會存放於 props 屬性的 children 中。
在處理 children 時，編譯器會很智能地區分字符串、{} 表達式和 JSX，不一樣的部分都會被轉換成一個 React.createElement 的參數，所以在上面的代碼中，會產生 6 個參數：

sayHi()
"Hello "
props.name
React.createElement(...)
React.createElement(...)
React.createElement(...)

自定義組件的 type 參數值是組件的直接引用，而不是組件名的字符串。MyFooter 組件的 type 屬性是一個函數，是它自己，而不是 "MyFooter" 字符串。
只要是寫在 JSX 上的屬性，都被當作 config 的一部分傳遞給了 React.createElement() ，包括事件，例如這裏的 onClick

再看看生成的 JavaScript 對象：

所謂的層級結構就是經過 React 元素的 props 屬性中的 children 屬性層層嵌套得來的。

class 組件的編譯

仍是使用剛纔的 Hello 組件，咱們把它改形成 class 組件：

class Hello extends React.Component {
  
  handleClick(e) {
    console.log('click');
  }
  
  render() {
    function sayHi() { return (<div>Hi</div>); }
    
    return (
      <div> { sayHi() } Hello { this.props.name } <p className="title" onClick={ this.handleClick }>React</p> <p className="content">React is cool!</p> <MyFooter className="footer"> <div className="concat">concat</div> <div className="info">company info</div> </MyFooter> </div>
    );
  }
}複製代碼

編譯結果：

class Hello extends React.Component {
  handleClick(e) {
    console.log('click');
  }

  render() {
    function sayHi() {
      return React.createElement("div", null, "Hi");
    }

    return React.createElement("div", null, sayHi(), "Hello ", this.props.name, React.createElement("p", {
      className: "title",
      onClick: this.handleClick
    }, "React"), React.createElement("p", {
      className: "content"
    }, "React is cool!"), React.createElement(MyFooter, {
      className: "footer"
    }, React.createElement("div", {
      className: "concat"
    }, "concat"), React.createElement("div", {
      className: "info"
    }, "company info")));
  }

}複製代碼

能夠看到，編譯器並不會處理類自己，而是將其中的建立 React 元素的語句全局轉換成了 React.createElement 函數調用的方式。

這時候發現本身之前的知識有誤區，遂查看了 @babel/plugin-transform-react-jsx 官方文檔，描述中寫着：

Turn JSX into React function calls

將 JSX 轉換爲 React 函數調用，那到底什麼是 JSX？是函數組件？class 組件？的全部代碼都是 JSX 嗎？

什麼是 JSX

官網例子：

const element = <h1>Hello, world!</h1>;複製代碼
這個有趣的標籤語法既不是字符串也不是 HTML。

這個看起來像 HTML 的東西就是 JSX。

且看下面代碼：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}複製代碼

這段代碼叫 JSX，答案是否認的。它不過是一個普通的函數聲明，不過是將兩句 JSX 當作了表達式。也就是說，其中的 <h1>Hello, {formatName(user)}!</h1> 和 <h1>Hello, Stranger.</h1> 這兩部分才能稱爲 JSX。

最後它們將被編譯爲：

function getGreeting(user) {
  if (user) {
    return React.createElement("h1", null, "Hello, ", formatName(user), "!");
  }

  return React.createElement("h1", null, "Hello, Stranger.");
}複製代碼