React createElement方法使用原理分析介绍
摘要
在上一篇说过，React创建元素有两种方式：
第一种是通过JSX方式创建，第二种是通过React.createElement方法创建。但是通过JSX创建React元素的方式，最终也会经过babel进行转换，再用React.createElement进行元素创建。
而这一篇文章，主要是讲一下React.createElement是如何创建React元素的。
1.创建方法
为了了解React.createElement这个方法，我们自己手动去实现一个简易版的。
OK，首先我们通过React.createElement方法创建一个React元素，并且打印出来：
const b = React.createElement('div',{data: '1234'},'oneTwo')
console.log(b);
打印出来的结果为：
所以，如果我们要实现出来React.createElement这个方法，定义的时候我们可以这么写：
function createElement(type, config, children){
let props = {}
let myType = ''
let key = ''
let ref = ''
return {
$$typeOf: 'react.element',
type: myType,
props,
key,
ref
}
}这里我们不管**$$typeOf**这个变量，只考虑其他的变量，最终返回的对象应该是这个数据结构。
2.处理type
好了，方法的定义已经写完了。针对于传进来的这三个参数，我们一个一个看。
第一个参数type，它代表的是创建React元素的类型。
这里面可以是传统的HTML元素，例如div，h1，span等标签。
也可以是一个React组件（注意这里哦）。
而React创建组件又有两种方式，所以type的值，有三种数据类型：
（1）字符串：例如"div",“h1”,“span”,"p"等标签
（2）函数：通过函数的方式创建React组件
（3）类：通过class的方式创建React组件
而这个时候就有一个问题！
class Demo {
}
typeof Demo上面的值应该为什么呢？答案是function，所以在这里我们只需要考虑type为string和function两种类型即可。
所以我们可以写一个判断类型的方法：
function isValidElementType(type){
if(typeof type === 'string' || typeof type === 'function'){
return true;
}
return false;
}在我们的主方法里面引用：
function createElement(type, config, children){
let props = {}
let myType = ''
let key = ''
let ref = ''
if(isValidElementType(type)){
myType = type;
}
return {
$$typeOf: 'react.element',
type: myType,
props,
key,
ref
}
}3.处理config
对于React.createElement方法的第二个参数，接收看一个对象。而对象下所有的属性，都会被放在props里面。
这句话对不对呢？其实也不是很对，是有特例的，如果在这个对象下，有key或者ref这两个属性。它是不会被放在props里面的，而是直接赋值给key和ref
Ok，有了上面的话，我们就可以对config进行处理了：
if(config != null){
if(config.ref){
ref = config.ref
}
if(config.key){
key = config.key
}
for(let propName in config){
if(!(['ref','key'].includes(propName))){
props[propName] = config[propName]
}
}
}我们只需要把config的key和ref分别给到我们返回对象里面的key和ref。再便利一下config，拿出来的属性和值把key和ref排除。最终我们的config属性就处理好了。
4.处理children
最后一步就是处理children属性了。而React.createElement方法的第三个参数，也可以是第四个参数（就是后面的所有参数）。都可以为字符串，或者是React元素。
这里的React元素我们不管它是通过JSX创建的，还是通过React.createElement方法创建的都可以
而参数的情况分两种：
第一种是只有三个参数，也就是children为一个值。这个时候props里面的children就是该字符串。
第二种是参数大于三个，这个时候，props里面的children是一个数组，数组里的元素就是后面的所有参数。
OK，有了上面的基础，就可以对children进行处理了：
let childrenLength = arguments.length - 2
if(childrenLength === 1){
props.children = children
}else if(childrenLength > 1){
let children = new Array(childrenLength)
for(let i = 0;i<childrenLength;i++){
children[i] = arguments[i+2]
}
props.children = children
}这里通过arguments来判断参数的个数，进而确定分支条件。
然后再根据情况，确定props里的children。
最后再贴上完整的createElement方法（简易版）：
function createElement(type, config, children){
let props = {}
let myType = ''
let key = ''
let ref = ''
if(isValidElementType(type)){
myType = type;
}
if(config != null){
if(config.ref){
ref = config.ref
}
if(config.key){
key = config.key
}
for(let propName in config){
if(!(['ref','key'].includes(propName))){
props[propName] = config[propName]
}
}
}
let childrenLength = arguments.length - 2
if(childrenLength === 1){
props.children = children
}else if(childrenLength > 1){
let children = new Array(childrenLength)
for(let i = 0;i<childrenLength;i++){
children[i] = arguments[i+2]
}
props.children = children
}
return {
$$typeOf: 'react.element',
type: myType,
props,
key,
ref
}
}5.对比真正的React.createElement源码
OK，上面只是实现了一个比较简单的React.createElement方法，但是懂了其中的过程，我们就可以看一下真正的React.createElement源码：
isValidElementType方法
function isValidElementType(type) {
if (typeof type === 'string' || typeof type === 'function') {
return true;
} // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
return true;
}
if (typeof type === 'object' && type !== null) {
if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
return true;
}
}
return false;
}这里面也主要就是判断type的类型，不过判断情况多了几种React自带的元素类型。
createElement方法
function createElement(type, config, children) {
var propName; // Reserved names are extracted
var props = {};
var key = null;
var ref = null;
var self = null;
var source = null;
if (config != null) {
if (hasValidRef(config)) {
ref = config.ref;
{
warnIfStringRefCannotBeAutoConverted(config);
}
}
if (hasValidKey(config)) {
{
checkKeyStringCoercion(config.key);
}
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[propName] = config[propName];
}
}
} // Children can be more than one argument, and those are transferred onto
// the newly allocated props object.
var childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
var childArray = Array(childrenLength);
for (var i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
{
if (Object.freeze) {
Object.freeze(childArray);
}
}
props.children = childArray;
} // Resolve default props
if (type && type.defaultProps) {
var defaultProps = type.defaultProps;
for (propName in defaultProps) {
if (props[propName] === undefined) {
props[propName] = defaultProps[propName];
}
}
}
{
if (key || ref) {
var 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);
};这个方法主要是对config和children进行处理。
其余的部分就不粘过来了，对源码感兴趣的可以自己打断点尝试一哈！
到此这篇关于React createElement方法使用原理分析介绍的文章就介绍到这了,更多相关React createElement内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
unity中的ui元素是有严格的父子关系的,子物体的位置是根据父物体的变化而变化的,而子物体和父物体联系的桥梁就是Anchor,本文重点介绍Unity RectTransform的相关知识,感兴趣的朋友一起看看吧2024-01-01
React 最为核心的就是 Virtual DOM 和 Diff 算法，diff算法的基础是Virtual DOM，接下来通过本文给大家介绍React中diff算法的相关知识，对React中diff算法感兴趣的朋友跟随小编一起学习下吧2021-05-05
这篇文章主要为大家详细介绍了React如何实现模糊搜索和关键字高亮的效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-11-11
这篇文章主要介绍了React路由参数传递与嵌套路由的实现，嵌套路由原则是可以无限嵌套，但是必须要让使用二级路由的一级路由匹配到，否则不显示，需要的朋友可以参考一下2022-09-09
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
这篇文章主要介绍了如何去除富文本中的html标签及vue、react、微信小程序中的过滤器,在vue及react中经常会遇到，今天通过实例代码给大家讲解，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了深入理解react-router@4.0 使用和源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家介绍了React18之update流程从零实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家详细介绍了react实现动态表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
React useMemo与useCallabck有什么区别
useCallback和useMemo是一样的东西，只是入参有所不同，useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return2022-12-12
这篇文章主要介绍了对react中间件的理解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论