React中的元素、组件、实例和节点如何使用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React中的元素、组件、实例和节点如何使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5542字，纯文字阅读大概需要8分钟。
内容图文
这这次给大家带来React中的元素、组件、实例和节点如何使用，React中的元素、组件、实例和节点使用的注意事项有哪些，下面就是实战案例，一起来看一下。React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。
React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。
元素 (Element)
React 元素其实就是一个简单JavaScript对象，一个React 元素和界面上的一部分DOM对应，描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React 元素，例如：
const element = <h1 className='greeting'>Hello, world</h1>;
element是一个React 元素。在编译环节，JSX 语法会被编译成对React.createElement()的调用，从这个函数名上也可以看出，JSX语法返回的是一个React 元素。上面的例子编译后的结果为：
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);最终，element的值是类似下面的一个简单JavaScript对象：
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
}React 元素可以分为两类：DOM类型的元素和组件类型的元素。DOM类型的元素使用像h1、p、p等DOM节点创建React 元素，前面的例子就是一个DOM类型的元素；组件类型的元素使用React 组件创建React 元素，例如：
const buttonElement = <Button color='red'>OK</Button>;
buttonElement就是一个组件类型的元素，它的值是：
const buttonElement = {
type: 'Button',
props: {
color: 'red',
children: 'OK'
}
}对于DOM类型的元素，因为和页面的DOM节点直接对应，所以React知道如何进行渲染。但是对于组件类型的元素，如buttonElement，React是无法直接知道应该把buttonElement渲染成哪种结构的页面DOM，这时就需要组件自身提供React能够识别的DOM节点信息，具体实现方式在介绍组件时会详细介绍。
有了React 元素，我们应该如何使用它呢？其实，绝大多数情况下，我们都不会直接使用React 元素，React 内部会自动根据React 元素，渲染出最终的页面DOM。更确切地说，React元素描述的是React虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。
组件 (Component)
React 组件，应该是大家最熟悉的React中的概念。React通过组件的思想，将界面拆分成一个个可以复用的模块，每一个模块就是一个React 组件。一个React 应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。
React组件和React元素关系密切，React组件最核心的作用是返回React元素。这里你也许会有疑问：React元素不应该是由React.createElement() 返回的吗？但React.createElement()的调用本身也是需要有“人”负责的，React组件正是这个“责任人”。React组件负责调用React.createElement()，返回React元素，供React内部将其渲染成最终的页面DOM。
既然组件的核心作用是返回React元素，那么最简单的组件就是一个返回React元素的函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}Welcome是一个用函数定义的组件。如果使用类（class）定义组件，返回React元素的工作具体就由组件的render方法承担，例如：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}其实，使用类定义的组件，render方法是唯一必需的方法，其他组件的生命周期方法都只不过是为render服务而已，都不是必需的。
现在来考虑下面这个例子：
class Home extends React.Component {
render() {
return (
<p>
<Welcome name='老干部' />
<p>Anything you like</p>
</p>
)
}
}Home 组件使用了Welcome组件，返回的React元素为：
{
type: 'p',
props: {
children: [
{
type: 'Welcome',
props: {
name: '老干部'
}
},
{
type: 'p',
props: {
children: 'Anything you like'
}
}，
]
}
}对于这个结构，React 知道如何渲染type = 'p' 和 type = 'p' 的节点，但不知道如何渲染type='Welcome'的节点，当React 发现Welcome 是一个React 组件时（判断依据是Welcome首字母为大写），会根据Welcome组件返回的React 元素决定如何渲染Welcome节点。Welcome组件返回的React 元素为：
{
type: 'h1',
props: {
children: 'Hello, 老干部'
}
}这个结构中只包含DOM节点，React是知道如何渲染的。如果这个结构中还包含其他组件节点，React 会重复上面的过程，继续解析对应组件返回的React 元素，直到返回的React 元素中只包含DOM节点为止。这样的递归过程，让React 获取到页面的完整DOM结构信息，渲染的工作自然就水到渠成了。
另外，如果仔细思考的话，可以发现，React 组件的复用，本质上是为了复用这个组件返回的React 元素，React 元素是React 应用的最基础组成单位。
实例 (Instance）
这里的实例特指React组件的实例。React 组件是一个函数或类，实际工作时，发挥作用的是React 组件的实例对象。只有组件实例化后，每一个组件实例才有了自己的props和state，才持有对它的DOM节点和子组件实例的引用。在传统的面向对象的开发方式中，实例化的工作是由开发者自己手动完成的，但在React中，组件的实例化工作是由React自动完成的，组件实例也是直接由React管理的。换句话说，开发者完全不必关心组件实例的创建、更新和销毁。
节点 (Node)
在使用PropTypes校验组件属性时，有这样一种类型：
MyComponent.propTypes = {
optionalNode: PropTypes.node,
}PropTypes.node又是什么类型呢？这表明optionalNode是一个React 节点。React 节点是指可以被React渲染的数据类型，包括数字、字符串、React 元素，或者是一个包含这些类型数据的数组。例如：
// 数字类型的节点
function MyComponent(props) {
return 1;
}
// 字符串类型的节点
function MyComponent(props) {
return 'MyComponent';
}
// React元素类型的节点
function MyComponent(props) {
return <p>React Element</p>;
}
// 数组类型的节点，数组的元素只能是其他合法的React节点
function MyComponent(props) {
const element = <p>React Element</p>;
const arr = [1, 'MyComponent', element];
return arr;
}
// 错误，不是合法的React节点
function MyComponent(props) {
const obj = { a : 1}
return obj;
}最后总结一下，React 元素和组件的概念最重要，也最容易混淆；React 组件实例的概念大家了解即可，几乎使用不到；React 节点有一定使用场景，但看过本文后应该也就不存在理解问题了。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
JS怎样操作改变radio的状态
bootstrap table怎样设置为高度百分比
以上就是React中的元素、组件、实例和节点如何使用的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的React中的元素、组件、实例和节点如何使用全部内容，希望文章能够帮你解决React中的元素、组件、实例和节点如何使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。