React源码阅读⼊门1（JSX与Component）基本信息
可选择分⽀对应的版本进⾏克隆。此处使⽤当前的master分⽀既v16.12.0进⾏学习。
项⽬⽬录结构如下，最重要的react与react-dom源码，位于package⽂件夹下对应⽬录的src⽂件夹中。
react源码的⽬录结构
react/src/React.js
创建React对象，该对象包括我们平时开发中常⽤的react api，例如Component组件、hooks⽅法等。
注：react的源码有使⽤flow进⾏静态代码检查，类似ts，导致部分js⽂件编辑器会报错。这⾥我尝试下载flow相关的vscode插件后仍然提⽰类型错误，只好暂时将vscode的able配置项关闭。
JSX是react的特⾊之⼀，其标准已由JavaScript内部实现，在react中⽤于描述⽤户界⾯，语法类似HTML。
在js/jsx/tsx⽂件中，使⽤JSX语法但没有导⼊react对象时，编辑器会给出这样的提⽰，既在使⽤JSX时必须导⼊react对象，原因就是JSX语法的转换必须依赖于ateElement⽅法。
编译时，JSX会被babel-loader进⾏处理，编译为普通的js代码，例如： （ 在线转换JSX ）
可以看出，JSX本质是JavaScript，ateElement会返回⼀个元素节点，调⽤形式为: ateElement(标签名, 标签属性, …⼦节点)，从第三个参数到最后⼀个参数都为⼦节点，每个⼦节点也是由ateElement创建或为字符串。
react native 这也就是使⽤JSX语法必须导⼊React的原因。也可以看出，在JSX中之所以使⽤className⽽不是class指定标签的类名，是因为在JSX 本质为JavaScript代码，JavaScript中class是创建类的关键字。
回到源码，可以看到导出的createELement⽅法如下。前⼀种createElementWithValidation也是调⽤createElement⽅法，只是在开发环境下会多⼀些验证与提⽰。（代码中出现__DEV__的判断时，都是React给开发者在本地环境下的提⽰，如某些API即将废弃、传参出错等）
进⼊createElement的源码，看到这⾥先预定义了⼀部分变量，如⽤于vdom渲染的key、节点引⽤ref、组件的props等。
先进⾏ref与key两个属性的获取（验证是否为undefined），再将config对象的其他属性添加到props对象中。
其中在向props对象添加属性时，会排除RESERVED_PROPS对象上存在的属性（key, ref, self, source）。
进⾏props.children的处理，也就是当前节点的⼦节点，会根据参数长度进⾏转化。
这也是我们在使⽤react时，在props上某些键是不能⽤于传递的，例如key、ref、children。
默认props的赋值。
最终返回ReactElement对象。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。