作者:手机用户2502885997 | 来源:互联网 | 2020-11-28 21:18
react中元素和组件的区别:1、元素数据结构是普通对象,而组件数据结构是类或纯函数;2、在JSX中,被元素嵌套的元素会以属性children的方式传入该元素的组件。
react中元素和组件的区别:1、元素数据结构是普通对象,而组件数据结构是类或纯函数;2、在JSX中,被元素嵌套的元素会以属性children的方式传入该元素的组件。
react中元素和组件的区别:
1、React 元素
React 元素(React element),它是 React 中最小基本单位,我们可以使用 JSX 语法轻松地创建一个 React 元素:
const element = I'm element
React 元素不是真实的 DOM 元素,它仅仅是 js 的普通对象(plain objects),所以也没办法直接调用 DOM 原生的 API。上面的 JSX 转译后的对象大概是这样的:
{
_context: Object,
_owner: null,
key: null,
props: {
className: 'element',
children: 'I'm element'
},
ref: null,
type: "div"
} 只有在这个元素渲染被完成后,才能通过选择器的方式获取它对应的 DOM 元素。不过,按照 React 有限状态机的设计思想,应该使用状态和属性来表述组件,要尽量避免 DOM 操作,即便要进行 DOM 操作,也应该使用 React 提供的接口ref和getDOMNode()
。一般使用 React 提供的接口就足以应付需要 DOM 操作的场景了,因此像 jQuery 强大的选择器在 React 中几乎没有用武之地了。
除了使用 JSX 语法,我们还可以使用 React.createElement()
和 React.cloneElement()
来构建 React 元素。
React.createElement()
JSX 语法就是用React.createElement()
来构建 React 元素的。它接受三个参数,第一个参数可以是一个标签名。如div、span,或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数,皆作为组件的子组件。
React.createElement(
type,
[props],
[...children]
) React.cloneElement()
React.cloneElement()与React.createElement()相似,不同的是它传入的第一个参数是一个 React 元素,而不是标签名或组件。新添加的属性会并入原有的属性,传入到返回的新元素中,而就的子元素奖杯替换。
React.cloneElement(
element,
[props],
[...children]
) 2、React 组件
React 中有三种构建组件的方式。React.createClass()、ES6 class和无状态函数。
React.createClass()
React.createClass()是三种方式中最早,兼容性最好的方法。在0.14版本前官方指定的组件写法。
var Greeting = React.createClass({
render: function() {
return Hello, {this.props.name} ;
}
}); ES6 class
ES6 class是目前官方推荐的使用方式,它使用了ES6标准语法来构建,但它的实现仍是调用React.createClass()
来实现了,ES6 class的生命周期和自动绑定方式与React.createClass()略有不同。
class Greeting extemds React.Component{
render: function() {
return Hello, {this.props.name} ;
}
}; 无状态函数
无状态函数是使用函数构建的无状态组件,无状态组件传入props和context两个参数,它没有state,除了render(),没有其它生命周期方法。
function Greeting (props) {
return Hello, {props.name} ;
} React.createClass()和ES6 class构建的组件的数据结构是类,无状态组件数据结构是函数,它们在 React 被视为是一样的。
3、元素与组件的区别
组件是由元素构成的。元素数据结构是普通对象,而组件数据结构是类或纯函数。除此之外,还有几点区别要注意:
this.props.children
在 JSX 中,被元素嵌套的元素会以属性 children 的方式传入该元素的组件。当仅嵌套一个元素时,children 是一个 React 元素,当嵌套多个元素时,children 是一个 React 元素的数组。可以直接把 children 写入 JSX 的中,但如果要给它们传入新属性,就要用到React.cloneElement()
来构建新的元素。我曾放过以下错误:
render () {
var Child = this.props.children
return
}
因为 Child 是一个 React 元素,而不是组件,这样的写法是完全错误的,正确的方式应该是:
render () {
var child = this.props.children
return { React.cloneElement(child, {tip: 'right way!'}) }
}
就这样,原有属性和新添加的属性被一并传入了子元素。使用React.cloneElement()才是操作元素的正确姿势。
用户组件
有的时候,组件可以让用户以属性的方式传入自定义的组件,来提升组件的灵活性。这个属性传入的就应该是 React 元素,而非 React 组件。使用 React 元素可以让用户传入自定义组件的同时,为组件添加属性。同样,可以使用React.cloneElement()为自定义组件添加更多属性,或替换子元素。
// 推荐
} />
// 不推荐
最后
最后,打个不恰当的比喻,React 组件是MyComponent,React 元素就是
。
相关免费学习推荐: Javascript (视频)
以上就是react中元素和组件的区别是什么的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
为什么80%的码农都做不了架构师?JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然 ...
[详细]
蜡笔小新 2023-12-09 18:24:55
本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ...
[详细]
蜡笔小新 2023-12-09 17:40:33
web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ...
[详细]
蜡笔小新 2023-10-17 20:40:03
前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ...
[详细]
蜡笔小新 2023-10-17 17:47:27
项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到 ...
[详细]
蜡笔小新 2023-10-17 12:33:46
Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ...
[详细]
蜡笔小新 2023-10-13 12:28:22
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ...
[详细]
蜡笔小新 2023-12-14 18:16:27
今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ...
[详细]
蜡笔小新 2023-12-14 17:58:15
本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ...
[详细]
蜡笔小新 2023-12-14 17:46:55
本文描述了作者第一次参加比赛的经历和感受。作者是小学六年级时参加比赛的唯一选手,感到有些紧张。在比赛期间,作者与学长学姐一起用餐,在比赛题目中遇到了一些困难,但最终成功解决。作者还尝试了一款游戏,在回程的路上感到晕车。最终,作者以110分的成绩取得了省一会的资格,并坚定了继续学习的决心。 ...
[详细]
蜡笔小新 2023-12-14 17:42:14
本文介绍了在微店中如何修改分销产品的价格以及设置价格的方法。客户在拍下商品后,在1小时内可以进行修改价格的操作,通过进入订单管理,点击未付款子项,可以找到订单信息并进行改价操作。修改价格后,买家会收到改价后的短信通知,在微店订单中进行付款即可。 ...
[详细]
蜡笔小新 2023-12-14 14:10:39
本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ...
[详细]
蜡笔小新 2023-12-14 13:11:00
手机用户2502885997
这个家伙很懒,什么也没留下!