作者:手机用户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社区 其它相关文章!
推荐阅读
Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ...
[详细]
蜡笔小新 2023-12-12 15:59:36
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ...
[详细]
蜡笔小新 2023-12-12 13:43:58
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
蜡笔小新 2023-12-14 20:14:33
本文介绍了2018年人工智能大数据的爆发以及学习Java和Python的相关知识。在人工智能和大数据时代,Java和Python这两门编程语言都很优秀且火爆。选择学习哪门语言要根据个人兴趣爱好来决定。Python是一门拥有简洁语法的高级编程语言,容易上手。其特色之一是强制使用空白符作为语句缩进,使得新手可以快速上手。目前,Python在人工智能领域有着广泛的应用。如果对Java、Python或大数据感兴趣,欢迎加入qq群458345782。 ...
[详细]
蜡笔小新 2023-12-14 20:08:28
本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ...
[详细]
蜡笔小新 2023-12-14 19:45:47
本文介绍了一个PHP玩家基地系统的毕业设计,包括用户登录界面、游戏管理和玩家作品管理等功能。附带源码和运行环境,并提供免费赠送本源代码和数据库的方式,请私信获取详细信息。摘要共计约XXX字。 ...
[详细]
蜡笔小新 2023-12-14 19:16:11
Monkey《大话移动——Android与iOS应用测试指南》的预购信息已经发布,可以在京东和当当网进行预购。感谢几位大牛给出的书评,并呼吁大家的支持。明天京东的链接也将发布。 ...
[详细]
蜡笔小新 2023-12-14 18:57:09
本文介绍了《中秋夜作》的翻译及原文赏析,以及诗人当代钱钟书的背景和特点。通过对诗歌的解读,揭示了其中蕴含的情感和意境。 ...
[详细]
蜡笔小新 2023-12-14 18:37:02
本文详细介绍了SQL日志收缩的方法,包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时,还介绍了截断日志的原理和注意事项,包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法,可以有效减小逻辑日志的大小,提高数据库的性能。 ...
[详细]
蜡笔小新 2023-12-14 18:23:25
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ...
[详细]
蜡笔小新 2023-12-14 17:58:15
手机用户2502885997
这个家伙很懒,什么也没留下!