资讯专栏INFORMATION COLUMN

react源码浅析(三):ReactElement

Hujiawei / 1723人阅读

摘要:开发环境比生产环境多了,,属性,并且以及被冻结,无法修改配置。当这个是元素的,那么其与是无法传入新元素上的与。返回的元素相当于其源码与类似,不同的地方是在开发环境下不会对调用与对与进行获取拦截。

react相关库源码浅析

react ts3 项目

总览:

你将会明白:
react元素的key和ref为什么不会存在props上,并且传递,开发环境下与生产环境下处理key和ref的区别?
...

内部方法

│   ├── hasValidRef ----------------------------- 检测获取config上的ref是否合法
│   ├── hasValidKey ----------------------------- 检测获取config上的key是否合法
│   ├── defineKeyPropWarningGetter ----- 锁定props.key的值使得无法获取props.key
│   ├── defineRefPropWarningGetter ----- 锁定props.ref的值使得无法获取props.ref
│   ├── ReactElement ------------ 被createElement函数调用,根据环境设置对应的属性

向外暴露的函数

│   ├── createElement ---------------------------- 生成react元素,对其props改造
│   ├── createFactory -------------------------------------- react元素工厂函数
│   ├── cloneAndReplaceKey ---------------------------- 克隆react元素,替换key
│   ├── cloneElement ----------------------------- 克隆react元素,对其props改造
│   ├── isValidElement ---------------------------------判断元素是否是react元素 

hasValidRef

通过Ref属性的取值器对象的isReactWarning属性检测是否含有合法的Ref,在开发环境下,如果这个props是react元素的props那么获取上面的ref就是不合法的,因为在creatElement的时候已经调用了defineRefPropWarningGetter。生产环境下如果config.ref !== undefined,说明合法。

function hasValidRef(config) {
  //在开发模式下
  if (__DEV__) {
    //config调用Object.prototype.hasOwnProperty方法查看其对象自身是否含有"ref"属性
    if (hasOwnProperty.call(config, "ref")) {
      //获取‘ref’属性的描述对象的取值器
      const getter = Object.getOwnPropertyDescriptor(config, "ref").get;
      //如果取值器存在,并且取值器上的isReactWarning为true,就说明有错误,返回false,ref不合法
      if (getter && getter.isReactWarning) {
        return false;
      }
    }
  }
  //在生产环境下如果config.ref !== undefined,说明合法;
  return config.ref !== undefined;
}
hasValidKey

通过key属性的取值器对象的isReactWarning属性检测是否含有合法的key,也就是如果这个props是react元素的props那么上面的key就是不合法的,因为在creatElement的时候已经调用了defineKeyPropWarningGetter。逻辑与上同

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;
}
defineKeyPropWarningGetter

开发模式下,该函数在creatElement函数中可能被调用。锁定props.key的值使得无法获取props.key,标记获取props中的key值是不合法的,当使用props.key的时候,会执行warnAboutAccessingKey函数,进行报错,从而获取不到key属性的值。

即如下调用始终返回undefined:

props.key

给props对象定义key属性,以及key属性的取值器为warnAboutAccessingKey对象
该对象上存在一个isReactWarning为true的标志,在hasValidKey上就是通过isReactWarning来判断获取key是否合法
specialPropKeyWarningShown用于标记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,
  });
}
defineRefPropWarningGetter

逻辑与defineKeyPropWarningGetter一致,锁定props.ref的值使得无法获取props.ref,标记获取props中的ref值是不合法的,当使用props.ref的时候,会执行warnAboutAccessingKey函数,进行报错,从而获取不到ref属性的值。

即如下调用始终返回undefined:

props.ref
ReactElement

被createElement函数调用,根据环境设置对应的属性。

代码性能优化:为提高测试环境下,element比较速度,将element的一些属性配置为不可数,for...in还是Object.keys都无法获取这些属性,提高了速度。

开发环境比生产环境多了_store,_self,_source属性,并且props以及element被冻结,无法修改配置。

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__) {
    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

在开发模式和生产模式下,第二参数props中的ref与key属性不会传入新react元素的props上,所以开发模式和生产模式都无法通过props传递ref与key。生产模式下ref与key不为undefined就赋值给新react元素对应的ref与key属性上,开发模式下获取ref与key是合法的(第二参数不是某个react元素的props,其key与ref则为合法),则赋值给新react元素对应的ref与key属性上。

使用 JSX 编写的代码将被转成使用 React.createElement()

React.createElement API:

React.createElement(
  type,
  [props],
  [...children]
)

type(类型) 参数:可以是一个标签名字字符串(例如 "div" 或"span"),或者是一个 React 组件 类型(一个类或者是函数),或者一个 React fragment 类型。

仅在开发模式下获取props中的ref与key会抛出错误

props:将key,ref,__self,__source的属性分别复制到新react元素的key,ref,__self,__source上,其他的属性值,assign到type上的props上。当这个props是react元素的props,那么其ref与key是无法传入新元素上的ref与key。只有这个props是一个新对象的时候才是有效的。这里就切断了ref与key通过props的传递。

children:当children存在的时候,createElement返回的组件的props中不会存在children,如果存在的时候,返回的组件的props.children会被传入的children覆盖掉。

参数中的children覆盖顺序

如下:

//创建Footer
class Footer extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            
this is Footer {this.props.children}
) } } //创建FooterEnhance const FooterEnhance = React.createElement(Footer, null ,"0000000"); //使用Footer与FooterEnhance
aaaaa
{FooterEnhance}

结果:

this is Footer aaaaa
this is Footer 0000000

可以看到:

第三个参数children覆盖掉原来的children:aaaaa

由下面源码也可知道:

第三个参数children也可以覆盖第二参数中的children,测试很简单。

第二个参数props中的children会覆盖掉原来组件中的props.children

返回值的使用:如{FooterEnhance}。不能当做普通组件使用。 源码
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 = null;
  let ref = null;
  let self = null;
  let source = null;

  //将config上有但是RESERVED_PROPS上没有的属性,添加到props上
  //将config上合法的ref与key保存到内部变量ref和key
  if (config != null) {
    //判断config是否具有合法的ref与key,有就保存到内部变量ref和key中
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = "" + config.key;
    }

    //保存self和source
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    // Remaining properties are added to a new props object
    //将config上的属性值保存到props的propName属性上
    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.
  //  如果只有三个参数,将第三个参数直接覆盖到props.children上
  //  如果不止三个参数,将后面的参数组成一个数组,覆盖到props.children上
  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
  //  如果有默认的props值,那么将props上为undefined的属性设置初始值
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  //开发环境下
  if (__DEV__) {
      //  需要利用defineKeyPropWarningGetter与defineRefPropWarningGetter标记新组件上的props也就是这里的props上的ref与key在获取其值得时候是不合法的。
    if (key || ref) {
      //type如果是个函数说明不是原生的dom标签,可能是一个组件,那么可以取
      const displayName =
        typeof type === "function"
          ? type.displayName || type.name || "Unknown"
          : type;
      if (key) {
        //在开发环境下标记获取新组件的props.key是不合法的,获取不到值
        defineKeyPropWarningGetter(props, displayName);
      }
      if (ref) {
        //在开发环境下标记获取新组件的props.ref是不合法的,获取不到值
        defineRefPropWarningGetter(props, displayName);
      }
    }
  }
  //注意生产环境下的ref和key还是被赋值到组件上
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}
createFactory

返回一个函数,该函数生成给定类型的 React 元素。
用于将在字符串或者函数或者类转换成一个react元素,该元素的type为字符串或者函数或者类的构造函数

例如:Footer为文章的类组件

console.log(React.createFactory("div")())
console.log(React.createFactory(Footer)())

返回的结果分别为:

$$typeof:Symbol(react.element)
key:null
props:{}
ref:null
type:"div"
_owner:null
_store:{validated: false}
_self:null
_source:null
$$typeof:Symbol(react.element)
key:null
props:{}
ref:null
type:ƒ Footer(props)
_owner:null
_store:{validated: false}
_self:null
_source:null

源码:

export function createFactory(type) {
  const factory = createElement.bind(null, type);
  factory.type = type;
  return factory;
}
cloneAndReplaceKey

克隆一个旧的react元素,得到的新的react元素被设置了新的key

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

  return newElement;
}                                                                                    
isValidElement

判断一个对象是否是合法的react元素,即判断其$$typeof属性是否为REACT_ELEMENT_TYPE

export function isValidElement(object) {
  return (
    typeof object === "object" &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}    
cloneElement

cloneElement官方API介绍

        
React.cloneElement(
  element,
  [props],
  [...children]
)

使用 element 作为起点,克隆并返回一个新的 React 元素。 所产生的元素的props由原始元素的 props被新的 props 浅层合并而来,并且最终合并后的props的属性为undefined,就用element.type.defaultProps也就是默认props值进行设置。如果props不是react元素的props,呢么props中的key 和 ref 将被存放在返回的新元素的key与ref上。

返回的元素相当于:

{children}

其源码与createElement类似,不同的地方是在开发环境下cloneElement不会对props调用defineKeyPropWarningGetter与defineRefPropWarningGetter对props.ref与props.key进行获取拦截。

总结

react元素的key和ref为什么不会在props上,并且传递,开发环境下与生产环境下处理key和ref的区别?

creatElement函数中阻止ref、key等属性赋值给props,所以react元素的key和ref不会在props上,并且在组件间通过props传递

for (propName in config) {
  if (
    hasOwnProperty.call(config, propName) &&
    !RESERVED_PROPS.hasOwnProperty(propName)
  ) {
    props[propName] = config[propName];
  }
}

开发环境下与生产环境下处理key和ref的区别:开发环境下还会调用defineRefPropWarningGetter与defineKeyPropWarningGetter,利用Object.defineProperty进行拦截报错:

  Object.defineProperty(props, "key", {
    get: warnAboutAccessingKey,
    configurable: true,
  });

不能将一个react元素的ref通过props传递给其他组件。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102223.html

相关文章

  • React 源码深度解读(一):首次DOM元素渲染 - Part 1

    摘要:调用栈是这样的这里生成的我们将其命名为,它将作为参数传入到。整个的调用栈是这样的组件间的层级结构是这样的到此为止,顶层对象已经构造完毕,下一步就是调用来自的方法,进行页面的渲染了。通过表达的结构最终会转化为一个纯对象,用于下一步的渲染。 欢迎关注我的公众号睿Talk,获取我最新的文章:showImg(https://segmentfault.com/img/bVbmYjo); 一、前言...

    daydream 评论0 收藏0
  • React 源码深度解读(四):首次自定义组件渲染 - Part 1

    摘要:本篇开始介绍自定义组件是如何渲染的。组件将自定义组件命名为,结构如下经过编译后,生成如下代码构建顶层包装组件跟普通元素渲染一样,第一步先会执行创建为的。调用顺序已在代码中注释。先看图,这部分内容将在下回分解 前言 React 是一个十分庞大的库,由于要同时考虑 ReactDom 和 ReactNative ,还有服务器渲染等,导致其代码抽象化程度很高,嵌套层级非常深,阅读其源码是一个非...

    Warren 评论0 收藏0
  • React源码解析之React.createElement()和ReactElement()

    摘要:一语法转换到语法从转换到会用到,所以先熟悉下到的转换。对于库作者而言,冻结对象可防止有人修改库的核心对象。 showImg(https://segmentfault.com/img/remote/1460000019757204); 一、JSX语法转换到Js语法从 JSX 转换到 JS 会用到React.createElement(),所以先熟悉下 JSX 到 JS 的转换。 这边是 ...

    BlackMass 评论0 收藏0
  • React源码解析之React.children.map()

    摘要:一例子看到一个有趣的现象,就是多层嵌套的数组经过后,平铺成了,接下来以该例解析二作用源码进行基本的判断和初始化后,调用该方法就是重命名了,即解析注意,该数组在里面滚了一圈后,会结果三作用的包裹器源码第一次第二次如果字符串中有连续多个的话 showImg(https://segmentfault.com/img/remote/1460000019968077?w=1240&h=698);...

    kuangcaibao 评论0 收藏0
  • React前端学习小结

    摘要:正式开始系统地学习前端已经三个多月了,感觉前端知识体系庞杂但是又非常有趣。更新一个节点需要做的事情有两件,更新顶层标签的属性,更新这个标签包裹的子节点。 正式开始系统地学习前端已经三个多月了,感觉前端知识体系庞杂但是又非常有趣。前端演进到现在对开发人员的代码功底要求已经越来越高,几年前的前端开发还是大量操作DOM,直接与用户交互,而React、Vue等MVVM框架的出现,则帮助开发者从...

    iOS122 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<