浅谈React中的元素、组件、实例和节点


Posted in Javascript onFebruary 27, 2018

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、div、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 (
   <div>
    <Welcome name='老干部' />
    <p>Anything you like</p>
   </div>
  )
 }
}

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

{
 type: 'div',
 props: {
  children: [
   {
    type: 'Welcome',
    props: {
     name: '老干部'
    }
   },
   {
    type: 'p',
    props: {
     children: 'Anything you like'
    }
   },
  ]
 }
}

对于这个结构,React 知道如何渲染type = 'div' 和 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 <div>React Element</div>;
}

// 数组类型的节点,数组的元素只能是其他合法的React节点
function MyComponent(props) {
 const element = <div>React Element</div>;
 const arr = [1, 'MyComponent', element];
 return arr;
}

// 错误,不是合法的React节点
function MyComponent(props) {
 const obj = { a : 1}
 return obj;
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
JS严格模式知识点总结
Feb 27 #Javascript
总结js函数相关知识点
Feb 27 #Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 #Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 #Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 #Javascript
You might like
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
客户端静态页面玩分页
2006/06/26 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
python类的继承实例详解
2017/03/30 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python框架中flask知识点总结
2018/08/17 Python
python使用多进程的实例详解
2018/09/19 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python list与NumPy array 区分详解
2019/11/06 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
小车司机岗位职责
2013/11/25 职场文书
学校社会实践活动总结
2014/07/03 职场文书
新闻学专业求职信
2014/07/28 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android