当前位置: 首页 > news >正文

深入解析React中的元素、组件、实例和节点

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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'
 }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}

React 元素可以分为两类:DOM类型的元素和组件类型的元素。DOM类型的元素使用像h1、div、p等DOM节点创建React 元素,前面的例子就是一个DOM类型的元素;组件类型的元素使用React 组件创建React 元素,例如:

const buttonElement = <Button color='red'>OK</Button>;

buttonElement就是一个组件类型的元素,它的值是:

const buttonElement = {
 type: 'Button',
 props: {
  color: 'red',
  children: 'OK'
 }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}

对于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>;
 }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}

其实,使用类定义的组件,render方法是唯一必需的方法,其他组件的生命周期方法都只不过是为render服务而已,都不是必需的。 现在来考虑下面这个例子:

class Home extends React.Component {
 render() {
  return (
   <div>
    <Welcome name='前端攻城小牛' />
    <p>Anything you like</p>
   </div>
  )//欢迎加入前端全栈开发交流圈一起学习交流:864305860
 }
}

Home 组件使用了Welcome组件,返回的React元素为:

{
 type: 'div',
 props: {
  children: [
   {
    type: 'Welcome',
    props: {
     name: '前端攻城小牛'
    }
   },
   {
    type: 'p',
    props: {
     children: 'Anything you like'
    }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
   },
  ]
 }
}

对于这个结构,React 知道如何渲染type = 'div' 和 type = 'p' 的节点,但不知道如何渲染type='Welcome'的节点,当React 发现Welcome 是一个React 组件时(判断依据是Welcome首字母为大写),会根据Welcome组件返回的React 元素决定如何渲染Welcome节点。Welcome组件返回的React 元素为:

{
 type: 'h1',
 props: {
  children: 'Hello, 前端攻城小牛'
 }//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}

这个结构中只包含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';
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860
 
// React元素类型的节点
function MyComponent(props) {
 return <div>React Element</div>;
}
 
// 数组类型的节点,数组的元素只能是其他合法的React节点
function MyComponent(props) {
 const element = <div>React Element</div>;
 const arr = [1, 'MyComponent', element];
 return arr;
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860
 
// 错误,不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

总结一下,React 元素和组件的概念最重要,也最容易混淆;React 组件实例的概念大家了解即可,几乎使用不到;React 节点有一定使用场景,但看过本文后应该也就不存在理解问题了。

结语

感谢您的观看,如有不足之处,欢迎批评指正。

转载于:https://my.oschina.net/u/3982182/blog/2988742

相关文章:

  • JS实现小图放大轮播效果
  • Javascript继承机制的设计思想
  • 在PC上测试移动端网站和模拟手机浏览器的5大方法
  • ios 推送证书 p12生成
  • Beaker:一个基于Electron的点对点Web浏览器
  • Linux查看文件内容
  • 追溯ASP.NET发展史
  • 前端MVVM框架设计及实现(一)
  • python的不定时更新
  • LumiSoft收取邮件(含邮件附件)
  • Frost Sullivan权威报告:阿里云再次领跑云WAF大中华区市场
  • Yii框架官方指南系列28——缓存:概览
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • 一个表单对应多个提交按钮,每个提交按钮对应不同的行为
  • MySQL用户中的%到底包不包括localhost?
  • 【译】JS基础算法脚本:字符串结尾
  • 【407天】跃迁之路——程序员高效学习方法论探索系列(实验阶段164-2018.03.19)...
  • 【Amaple教程】5. 插件
  • angular学习第一篇-----环境搭建
  • Bytom交易说明(账户管理模式)
  • Java 最常见的 200+ 面试题:面试必备
  • JS专题之继承
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • Python - 闭包Closure
  • Python中eval与exec的使用及区别
  • React-redux的原理以及使用
  • session共享问题解决方案
  • zookeeper系列(七)实战分布式命名服务
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 聚簇索引和非聚簇索引
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 深入 Nginx 之配置篇
  • 实战|智能家居行业移动应用性能分析
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • 移动端高清、多屏适配方案
  • ​渐进式Web应用PWA的未来
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • $.type 怎么精确判断对象类型的 --(源码学习2)
  • $refs 、$nextTic、动态组件、name的使用
  • (C语言)二分查找 超详细
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (七)c52学习之旅-中断
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (十一)图像的罗伯特梯度锐化
  • (一) storm的集群安装与配置
  • (原創) 如何動態建立二維陣列(多維陣列)? (.NET) (C#)
  • (转)Oracle存储过程编写经验和优化措施
  • (转)程序员技术练级攻略
  • (轉貼)《OOD启思录》:61条面向对象设计的经验原则 (OO)
  • ******之网络***——物理***
  • .NET CF命令行调试器MDbg入门(一)
  • .NET 常见的偏门问题
  • .NET/C# 中设置当发生某个特定异常时进入断点(不借助 Visual Studio 的纯代码实现)