分享更有价值
被信任是一种快乐

react element指的是什么

文章页正文上

本篇内容介绍了“react element指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! react element是“React.createElement”函数的返回值,即ReactElement;ReactElement的结构是“const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props,_owner: owner, };”。React源码 | ReactElement说到ReactElement,不得不提到的就是在React中,用来替代JavaScript(JS)的语言,JSX。作为React的官方指定语法,JSX允许用户在JS代码中插入HTML代码。但是,这种写法浏览器是无法解析的。他们需要一个转换器,Babel就充当了这样一个角色,他在JSX代码编译时候将其转换成JS文件,这样浏览器就能解析了。怎么转换呢,我们知道,JSX有JS和HTMl两种写法,本身就是JS写法的其实是不需要转换的,当然也不能说的这么绝对,有时候Babel会为了兼容性的缘故将高版本的语法翻译到低版本,这部分不在讨论范围。我们要关注的其实是HTMl的处理方式。比如下面这行代码:通过Babel转换后生成的代码是:HTML语法转变成了JS语法,简单来说,免费云主机、域名我们所写的JSX最终变成了JS。我们写一个复杂点的例子:转换规则是比较简单的,React.createElement的第一个参数是节点类型;第二个参数是该节点的属性,以key:value的形式作为一个对象,后面的所有参数都是该节点的子节点。需要注意的是,在JSX语法中,我们不仅有原生的HTML节点,还有大量的自定义组件,比如:可以看出,React.createElement的第一个参数变成了一个变量,而不是一个字符串,尝试将函数Comp首字母小写:React.createElement的第一个参数又变成了一个字符串。
这也就是我们在React中写组件的时候,为什么会要求首字母大写的原因,Babel在编译的时候会将首字母小写的组件视为原生的HTMl节点进行处理,如果我们将自定义组件首字母小写,后续的程序将无法识别这个组件,最终会报错。通过Babel编译后的JS代码,频繁出现React.createElement这个函数。这个函数的返回值就是ReactElement,通过上面的示例可以看出,React.createElement函数的入参有三个,或者说三类。type
type指代这个ReactElement的类型。
字符串比如div,p代表原生DOM,称为HostComponentClass类型是我们继承自Component或者PureComponent的组件,称为ClassComponent方法就是functional Component原生提供的Fragment、AsyncMode等是Symbol,会被特殊处理config
参照上面Babel编译后的代码,所有节点的属性都会以Key:Value的形式放到config对象中。
children
子节点不止会有一个,所以children不只有一个,从第二个参数以后的所有参数都是children,它是一个数组。
ReactElement的结构是这样的它就是一个简单的对象,为了看清楚这个对象的创建规则,我们举个例子。 首先是我们写的JSX:它会被Babel编译为:它会生成这样一个Element$$typeof 是一个常量,所有通过React.createElement生成的元素都有这个值。一般使用 React 的组件都是挂到父组件的 this.props.children 上面,但是也有例外,比如要实现一个模态框,就需要将模态框挂载到body节点下,这个时候需要使用ReactDOM.createPortals(child, container)这个函数实现,这个函数生成的$$typeof值就是REACT_PORTAL_TYPE。
type指代这个ReactElement的类型
key和ref都是从config对象中找到的特殊配置,将其单独抽取出来,放在ReactElement下
props包含了两部分,第一部分是去除了key和ref的config,第二部分是children数组,数组的成员也是通过React.createElement生成的对象,示例中省略了这个步骤。
_owner在16.7的版本上是Fiber,Fiber是react16+版本的核心,暂时不做深究。“react element指的是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!

相关推荐: react推荐函数组件的原因是什么

这篇文章主要讲解了“react推荐函数组件的原因是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react推荐函数组件的原因是什么”吧! 原因:1、函数组件语法更短、更简单,这使得它更容易开发、理解和测试;…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册