React源码分析第一节

React源码分析

从jsx到javascript

1. 实现js文件中写html,jsx可以写类似html的标签

JSX就是用xml/xhtml快速生成js代码 虚拟DOM

• 什么是xml/xhtml规范？

 - 标记必须要小写
 - 属性值加 ""
 - 标记只能嵌套不能交叉
 - 单标记必须关闭  <img/>
 - 只能有一个根元素

<div> </div>  ------->   React.createElement("div",null)
也就是第二个参数之后可以为空，也可以为多个

2.自定义的组件要大写，原生的组件是小写的，所以注意自定义组件的时候我们要首字母大写

这里是jsx语法
(比如自定义的组件<Button/>,原生的标签<span></span>,方便babel转换jsx语法)

// 首字母是否是大小写，翻译成字符串---原生的DOM节点
// 自定义的组件是大写，翻译成变量
function Comp () { return <div>a</div> }
<Comp id = "div" key = "key">
    <span>a</span>
    <span>a</span>
</Comp>

通过babel转换后的虚拟DOM

function Comp() {
return React.createElement(
Comp,
{id:"div1", key:"key"},
"a")
}

React.createElement(
"comp",
{
  id:"div",
  key:"key"
}, 
{
 React.createElement("span",null,"a"),
 React.createElement("span",null,"a")
}
)

3. 只有一个顶节点
4. 必须引入React库，看起来没有用，其实已经用到了
5. react-dom
6. jsx与模板
7. class与className

react-element

ReactElement.js文件夹中,其中一个export如下

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

//Create and return a new ReactElement of the given type.
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 (__DEV__) {
        warnIfStringRefCannotBeAutoConverted(config);
      }
    }
    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；
        //如果是内嵌的props就不放到props里面了
      ) {
      //如果不是内嵌的Props就放到一个新建的props对象里面
        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;//前两项type、config之外的作为children
  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];//把参数中的children，存进一个新的数组。
    }
    if (__DEV__) {
      if (Object.freeze) {
        Object.freeze(childArray);//冻结数组对象的属性值
      }
    }
    props.children = childArray;//然后赋值给props的children
  }

  // 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,
  );
}

createElement：react官方文档详细的说明顶层API

createElement第一个参数type,对应的jsx语法转换过程：
1.原生的节点------字符串
2.自己声明的组件------class Component /function Component
3.react提供的原生组件：默认是Symbol，就只是一个标志
REACT_FRAGMENT_TYPE…

    $$typeof: REACT_ELEMENT_TYPE,
//用来标识节点element时什么类型
在写jsx的时候所有的代码都是通过createElement创建的，他的$$typeof
就永远是REACT_ELEMENT_TYPE,react婴童更新过的时候如何渲染DOM经常用到，大部分是。。，特殊情况(会和平台有关)：react-dom 有一个API,叫做react.createproto,他的$$typeof 就是REACT_PROTO_TYPE

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,
//用来标识节点element时什么类型

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