likes
comments
collection
share

React源码分析

作者站长头像
站长
· 阅读数 44

React 几点好处，对比之前超过16.6ms后虚拟DOM过多diff无法中断，现在是类似于操作系统的时间碎片的概念可以中断diff,利用每一秒的空闲时间去做diff,在浏览器的下一帧主任务到来之后把控制权交还给浏览器，这样子去节省diff的时间，后续再详细说

  • fiber架构
    • 重写了核心代码，用户使用基本无影响
    • scheduler 调度任务更新的优先级
    • reconciler 找出变化
    • rerender 负责渲染变化
  • setState() 几乎只有一个API,心智负担相对较少
  • UI = f(x) 纯API

1.React （API）

createElement

函数上面的注释为document this生成的注释入参的类型，之后不在解释

默认不会把type, key, ref, self当成props

/**
 * 工厂函数的方式创建一个新的React元素。不是一个类（ReactElement），所以不要使用`new`操作符调用。并且使用instanceof关键字检测也是不行的。可以考虑`Object.defineProperty.toString.call()`试试，我没试过但是他推荐使用` $$typeof`检测，这个看代码会检测ReactElement的类型
 * @param {*} type
 * @param {*} props
 * @param {*} key
 * @param {string|object} ref `string|object`联合类型，懂得都懂
 * @param {*} owner
 * @param {*} self 
 * @param {*} source 
 * @internal
 */
const ReactElement = function (type, key, ref, self, source, owner, props) {
  const element = {
    // React Element唯一地标识 
    $$typeof: REACT_ELEMENT_TYPE,
    export const REACT_ELEMENT_TYPE = Symbol.for('react.element'); // 这个常量是ReactSymbols.js中导入进来为了实现检测ReactElement的类型
​
    // Built-in properties that belong on the element(属于元素的内置属性)
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner, // 记录负责创建此元素的组件
  };
  // 其余为DEV代码，不用关注
  return element; 
}    

return了一个React元素，入参 type, key, ref, self, source, owner, props 作用：相当于声明了一个React元素并得到了内置的props,意味着声明这些props是无效的，应该避免使用同名的props

jsx(jsx to js)

/**
 * @param {*} type 
 * @param {object} props 
 * @param {string} key 
 */
export function jsx(type, config, maybeKey) {
  let propName; // 声明的props的name
  const props = {};  // 提取本身的props: _self,_source,key，id等原有的props
​
  let key = null; // 会默认把key和ref挂成空并添加上去
  let ref = null;
​
  /*
    Currently, key can be spread in as a prop. This causes a potential
  issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
  or <div key="Hi" {...props} /> ). We want to deprecate key spread,
  but as an intermediary step, we will use jsxDEV for everything except
  <div {...props} key="Hi" />, because we aren't currently able to tell if
  key is explicitly declared to be undefined or not.
  */
  // 大概是说现在支持显式声明key作为props,但是他无法判断你是否显式声明，然并卵
​
  if (hasValidRef(config)) {
    // 验证ref是否存在
    ref = config.ref;
  }
​
  // 预置attrs以外的添加到props中，如果是配置了propName并且不属于预置的props就去添加配置的key到对应的attr上
  for (propName in config) {
    if (
      hasOwnProperty.call(config, propName) &&
      !RESERVED_PROPS.hasOwnProperty(propName) // hasOwnProperty.call的使用细节在下面
    ) {
      props[propName] = config[propName];
    }
  }
​
  // 解析出props中哪些attr是默认的
  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,
    undefined,
    undefined,
    ReactCurrentOwner.current,
    props,
  );
}
分析：此函数做了以下操作
  1. 声明了一个props,并默认添加了一些atrrs（key和ref）
  2. 将传递进来的configprops中的新增attrs提取
  3. 解析出props中哪些attr是默认的
  4. 返回ReactElement（）的调用，会得到ReactElement的类型，和新加的和默认的attrs
  5. babel的转化会将大写的ReactElement会检测类型，是ReactElement的话会校验是否首字母大写，如果是ReactElement（也就是HTMLElement类型没有此标签）就会报错，所以babel会将小写转化为string，string就会去找对应的htmlElementStirng是否存在。所以组件名如果非HTMLElement，请使用大写
关于编码安全

foo.hasOwnProperty('bar')这样是有问题的

var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: 'Here be dragons'
};
​
foo.hasOwnProperty('bar'); // 始终返回 false
​
// 如果担心这种情况，
// 可以直接使用原型链上真正的 hasOwnProperty 方法
({}).hasOwnProperty.call(foo, 'bar'); // true
​
// 也可以使用 Object 原型上的 hasOwnProperty 属性
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
createElement

React Without JSX了解更多信息

/**
 * Create and return a new ReactElement of the given type.
 * 创建并返回给定类型的新React元素。
 * type参数可以是一个标记名字符串(例如'div'或'span')，一个React组件类型(一个类或一个函数)，或者一个React片段类型。
 * 用JSX编写的代码将被转换为使用React.createElement()。如果使用JSX，通常不会直接调用React.createElement()。
 */
export function createElement(type, config, children) {
  let propName;
  // 内置的props的提取
  const props = {};
  
  // 初始化内置的attrs
  let key = null;
  let ref = null;
  let self = null;
  let source = null;

  // 1 有新的配置对象
  if (config != null) {
    // 2 是否是有效的ref
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    // 3 是否是有效的key
    if (hasValidKey(config)) {
      key = '' + config.key; // 是否是一个有效的string都在DEV里面做了
    }

    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    
    // 4 提取剩余的attrs到Props
    for (propName in config) {
      if (
        // 这个RESERVED_PROPS就是ReactElement函数里面默认的props
        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. 
  // 是说可以有很多children(子节点)，会被分配成一个新的props
 
  const childrenLength = arguments.length - 2; // 从第三个参数开始当做children
 
  if (childrenLength === 1) {
    props.children = children; // 如果只有1个children,就把这个children给到这个prop
  } else if (childrenLength > 1) { // 超过1个将会声明一个children的数组
    const childArray = Array(childrenLength); // 长度为childrenLength的空数组
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    // 对象冻结在DEV下，不做展开
    props.children = childArray;
  }

  // 解析默认的props
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
 // 以下都是dev相关的，不做展开
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}
  1. 验证是否是有效的key,ref以及是否存在config
  2. 提取剩余的attrs到Props
  3. 解析默认的props
  4. children的处理，第三个开始都会当成children,并指定成一个新的props对象
  5. 顺带说下，在jsx转化DOM的时候三个参数分别是tagname，attrs,children，后续的参数都会被当成children解析
createFactory
/**
 * 返回一个生成给定类型的 ReactElements 的函数，最终会返回对应的ReactElement
 */
export function createFactory(type) {
  const factory = createElement.bind(null, type);
  // 在工厂和原型上暴露类型，方便访问ReactElements。如。' < Foo / >。类型= = = Foo”。
  // 它不应该被命名为“构造函数”，因为它可能不是创建元素的函数，甚至可能不是构造函数。
  factory.type = type;
  return factory;
}
cloneAndReplaceKey

es6的语法，还记得ReactElement里面的参数吗？$$typeof判断ReactElement的类型，key，ref,_self,_source,_owner,props,只是去替换key和 ReactElement的类型

export function cloneAndReplaceKey(oldElement, newKey) {
  const newElement = ReactElement(
    oldElement.type,
    newKey,
    oldElement.ref,
    oldElement._self,
    oldElement._source,
    oldElement._owner,
    oldElement.props,
  );
cloneElement
/**
 * 使用Element作为起点克隆并返回一个新的ReactElement。
 * https://reactjs.org/docs/react-api.html#cloneelement
 */
export function cloneElement(element, config, children) {
  // 检测你传入的 React element是否有效
  if (element === null || element === undefined) {
    throw new Error(
      `React.cloneElement(...): The argument must be a React element, but you passed ${element}.`,
    );
  }

  let propName;

  // 1. 复制源props
  const props = assign({}, element.props);

  // 2. 提取预置的props
  let key = element.key;
  let ref = element.ref;
  // 3 self还是之前的self,因为owner没变，也就是this
  const self = element._self;
  // 4 原始来源更好的指示this
  const source = element._source;

  // 5 Owner将被保留，除非ref被重写
  let owner = element._owner;

  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref; // 6 拿到父对象的ref
      owner = ReactCurrentOwner.current;
    }
    // DEV中验证了config.key
    
    // 7 默认element的defaultProps
    let defaultProps;
    if (element.type && element.type.defaultProps) {
      defaultProps = element.type.defaultProps;
    }
    // 8 其余属性覆盖现有的props属性
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        if (config[propName] === undefined && defaultProps !== undefined) {
          props[propName] = defaultProps[propName];
        } else {
          props[propName] = config[propName];
        }
      }
    }
  }

  // 解析children,和createElement一样
  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);
}
  return newElement;
}
返回一个新的newElement
isValidElement

是否是ReactElement

/**
 * 验证对象是否是ReactElement。
 * @param {?object} object
 * @return {boolean} 如果object是ReactElement则为True
 * @final
 */
export function isValidElement(object) {
  return (
    typeof object === 'object' &&
    object !== null &&
    object.$$typeof === REACT_ELEMENT_TYPE
  );
}

Babel对jsx的编译解释

React元素为什么要使用大写？

以及createElement函数的3+参数的验证测试

  • 如果是小写，则会传递成字符串 => 会去原生的html里面寻找标签 => 没找到就会报错
  • 如果是大写，则会当成变量传递

React源码分析

转载自:https://juejin.cn/post/7179946996349239354
评论
请登录