ReactElement源码笔记

`ReactElement` 源码笔记

ReactElement通过 createElement创建，调用该方法需要传入三个参数：

type
config
children

type指代这个ReactElement 的类型

config指代这个ReactElement 的属性对象

children指代这个ReactElement 的子元素节点

字符串比如 'div'，'p'代表原生DOM，称为HostComponent
Class 类型是我们继承自 Component 或者 PureComponent的组件，称为ClassComponent
方法就是 function Component
原生提供的 Fragment、AsyncMode 等是 Symbol，会被特殊处理
TODO: 是否有其他的

//源码位置： packages/react/src/ReactElement.js

// createElement函数

export function createElement(type, config, children){

    // 一、处理config

    // 1. 判断config是否为空

    // 2. 提取保留属性（key, ref, self, soure）

    // 3. 其余属性添加到新的props对象中

        for(propName in config){

            if(

                hasOwnProperty.call(config, propName)&&

                !RESERVED_PROPS.hasOwnProperty(propName)

            ){

                props[propName] = config[propName]

            }

        }

    // 二、处理children => props.children

    // (children可以超过一个)，处理过后的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];

            }

            props.children = childArray;

        }

     // 三、处理type的 defaultProps

        if(type && type.defaultProps) {

            const defaultProps = type.defaultProps;

            for (propName in defaultProps) {

                if(props[propName] === undefined) {

                    props[propName] = defaultProps[propName]

                }

            }

        }

   	// 四、返回一个ReactElement()函数

         return ReactElement(

            type,

            key,

            ref,

            self,

            source,

            ReactCurrentOwner.current,

            props,

          );

}

注：type.defaultProps的由来：

定义一个ClassComponent: class Comp extends React.Component

可以为 Comp设置一个defaultProps: Comp.defaultProps = { value: 1 }

//源码位置： packages/react/src/ReactElement.js

// ReactElement 函数

const ReactElement = function(type, key, ref, self, source, owner, props){

    const element = {

         // $$typeof用于标识 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,

    }

    // _DEV_ 代码...

    return element;

}

巴特西

ReactElement源码笔记

`ReactElement` 源码笔记

最新文章

热门文章

巴特西

ReactElement源码笔记

ReactElement 源码笔记

最新文章

热门文章

`ReactElement` 源码笔记