东莞网站建设环保设备,wordpress设置301,建设网站一定要电脑吗,求一个能用的网址在React开发中#xff0c;在入口文件我们都会执行ReactDom.render来讲整个应用挂载在主document中#xff0c;那其中发生了什么#xff0c;React是如何讲我们写的JSX代码#xff0c;一步一步更新Fiber进而挂载渲染的呢。本文主要是基于react17.0.2的源码以及自己的理解来简…在React开发中在入口文件我们都会执行ReactDom.render来讲整个应用挂载在主document中那其中发生了什么React是如何讲我们写的JSX代码一步一步更新Fiber进而挂载渲染的呢。本文主要是基于react17.0.2的源码以及自己的理解来简单介绍一下这里面发生了什么。
流程总览
如下图所示总体流程就是开发编写JSX代码之后会交由Babel来进行转移并调用React.createElement转换为reactElement然后生成虚拟DOM通过render函数进一步更新filber渲染在页面上。所以本文主要是从源码角度来分析createElement和ReactElement函数的内部实现逻辑。
createElement
函数文件路径packages/react/src/ReactElement.js
该函数接收三个参数(type、config、children)然后创建并返回一个给定类型的新ReactElement。主要做了一下一些事
从config参数中拆分props属性和特殊属性将子元素挂载到props.children上给未设置的props属性设置默认值defaultProps创建并返回一个ReactElement
由于开发环境下的代码主要是一些log或者warn的提示信息所以这里不再分析下面请看源码解析 第一步从config参数中拆分props属性和特殊属性
/*** 定义props的属性名用于后面两次for遍历* 一次是遍历config配置并将props属性拆出来* 一次是遍历defaultProps默认属性给未赋值的属性给默认值*/let propName;// 保留props属性配置不包括key、ref、self、sourceconst props {};// config中的react内置的特殊属性let key null;let ref null;let self null;let source null;// 处理config参数主要就是拆分props和特殊属性if (config ! null) {// 将ref赋予有效值用来保存当前的dom元素if (hasValidRef(config)) {ref config.ref;// 开发环境提示warn信息if (__DEV__) {// ref属性设置成字符串的一个提示后续版本会删除该用法warnIfStringRefCannotBeAutoConverted(config);}}// 以字符串的形式保留key属性if (hasValidKey(config)) {key config.key;}/*** 如果没有self、source属性则设置为null* 个人猜测可能是由于undefined可以被重写所以这里改为null* 而且null比undefined更符合在这里的语义* */self config.__self undefined ? null : config.__self;source config.__source undefined ? null : config.__source;// 去除key、ref、self、source特殊属性并赋值给props保存// RESERVED_PROPS定义的包含key、ref、self、source的对象for (propName in config) {if (hasOwnProperty.call(config, propName) !RESERVED_PROPS.hasOwnProperty(propName)) {props[propName] config[propName];}}}第二步将子元素挂载到props.children上
/*** arguments是参数合集数组包含上面的三个行参type、config、children...* 这里arguments.length - 2就是获取后面所有children的长度*/const childrenLength arguments.length - 2;// 如果只有一个子元素则直接赋值if (childrenLength 1) {props.children children;} else if (childrenLength 1) {// 如果有多个则通过数组来保存并存储在props.children中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;}第三步给未设置的props属性设置默认值defaultProps
// 遍历type元素的默认类型给未设置的属性赋予默认值if (type type.defaultProps) {const defaultProps type.defaultProps;for (propName in defaultProps) {if (props[propName] undefined) {props[propName] defaultProps[propName];}}}第四步创建并返回一个ReactElement 通过将上面解析点属性配置传递给ReactElement函数然后返回一个ReactElement类型的DOM元素
return ReactElement(type,key,ref,self,source,ReactCurrentOwner.current,props,);ReactElement
函数文件路径packages/react/src/ReactElement.js 该函数使用工厂模式创建一个新的React Element不在使用类的模式所以不能通过new的方式来获取实例该函数接收7个参数并返回一个react element元素不能用instanceof来判断该Element是不是React Element只能通过Symbol.for(‘react.element’)来判断是否是React Element。react中是通过isValidElement方法判断元素是否为空对象并且$$typeof 是否为 REACT_ELEMENT_TYPE来判断的
/*** Verifies the object is a ReactElement.* See https://reactjs.org/docs/react-api.html#isvalidelement* param {?object} object* return {boolean} True if object is a ReactElement.* final*/
export function isValidElement(object) {return (typeof object object object ! null object.$$typeof REACT_ELEMENT_TYPE);
}
/*** Factory method to create a new React element. This no longer adheres to* the class pattern, so do not use new to call it. Also, instanceof check* will not work. Instead test $$typeof field against Symbol.for(react.element) to check* if something is a React Element.** param {*} type 元素类型(dov、span...)* param {*} props 子元素和元素基础属性* param {*} key 元素的唯一标识用于diff算法节点对比* param {string|object} ref 元素实例* param {*} owner 父组件或者上级组件* param {*} self 用于辅助判断this指向后续会结合箭头函数去掉owner和字符串类型的ref参数* param {*} source 保存文件名、行号和/或其他信息的资源数据* internal*/
const ReactElement function(type, key, ref, self, source, owner, props) {const element {/*** 通过这个属性唯一标识是否是react element类型的元素* React在最后渲染的时候会确认元素的类型是REACT_ELEMENT_TYPE* 表示组件元素的类型值为十六进制或者Symbol值*/$$typeof: REACT_ELEMENT_TYPE,// 元素类型 (div、span...)type: type,// 元素唯一标识 diff中vmdom和真实dom对比时首先判断keykey: key,// 组件实例ref: ref,// 向组件内部传递的属性数据props: props,// 父组件或者上级组件_owner: owner,};// 返回一个带有react element表示的dom元素return element;
};ReactDOM.render
函数文件路径packages/react-dom/src/client/ReactDOMLegacy.js 创建一个React Element元素之后会传入render函数中进行渲染render函数接收三个参数element、container、callback(可选), 然后调用legacyRenderSubtreeIntoContainer函数在container容器中调用react-reconciler中的updateContainer来更新队列以及整个Fiber。
/*** * param {*} element 元素类型* param {*} container element挂载在那些容器组件下* param {*} callback 可选渲染完成之后执行的回调* returns */export function render(element: React$Elementany,container: Container,callback: ?Function,
) {// 判断传入的父容器是否有效invariant(isValidContainer(container),Target container is not a DOM element.,);return legacyRenderSubtreeIntoContainer(null,element,container,false,callback,);
}从render到更新fiber进而更新真实dom渲染的大致流程如下
