资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/React 深入系列１：React 中的元素、组件、实例和节点

React 深入系列１：React 中的元素、组件、实例和节点

techstay / 978人阅读

摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。

文：徐超，《React进阶之路》作者
授权发布，转载请注明作者及出处


React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。

React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。

元素 (Element)

React 元素其实就是一个简单JavaScript对象，一个React 元素和界面上的一部分DOM对应，描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React 元素，例如：

const element = 
Hello, world
;

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 = ;

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 
Hello, {props.name}
;
}

Welcome是一个用函数定义的组件。如果使用类（class）定义组件，返回React元素的工作具体就由组件的render方法承担，例如：

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

其实，使用类定义的组件，render方法是唯一必需的方法，其他组件的生命周期方法都只不过是为render服务而已，都不是必需的。

现在来考虑下面这个例子：

class Home extends React.Component {
  render() {
    return (
      

        
        
Anything you like

      

    )
  }
}

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 
React Element
;
}

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

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

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

下篇预告：

React 深入系列2：组件分类

新书推荐《React进阶之路》

作者：徐超

毕业于浙江大学，硕士，资深前端工程师，长期就职于能源物联网公司远景智能。8年软件开发经验，熟悉大前端技术，拥有丰富的Web前端和移动端开发经验，尤其对React技术栈和移动Hybrid开发技术有深入的理解和实践经验。

云服务器 GPU云服务器 react _React React 源码 react cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93967.html

相关文章

  • React 深入系列1：React 中的元素、组件、实例和节点

    摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实...

    LeviDing 评论0 收藏0

  • JavaScript 是如何工作的：编写自己的 Web 开发框架 + React 及其虚拟 DOM

    摘要：与大多数全局对象不同，没有构造函数。为什么要设计更加有用的返回值早期写法写法函数式操作早期写法写法可变参数形式的构造函数一般写法写法当然还有很多，大家可以自行到上查看什么是代理设计模式代理模式，为其他对象提供一种代理以控制对这个对象的访问。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇。 如果你错过了前面的章节，可以在这里找到它们： 想阅读更多优质文章请...

    余学文 评论0 收藏0

  • React前端学习小结

    摘要：正式开始系统地学习前端已经三个多月了，感觉前端知识体系庞杂但是又非常有趣。更新一个节点需要做的事情有两件，更新顶层标签的属性，更新这个标签包裹的子节点。 正式开始系统地学习前端已经三个多月了，感觉前端知识体系庞杂但是又非常有趣。前端演进到现在对开发人员的代码功底要求已经越来越高，几年前的前端开发还是大量操作DOM，直接与用户交互，而React、Vue等MVVM框架的出现，则帮助开发者从...

    iOS122 评论0 收藏0

  • 深入React知识点整理（一）

    摘要：以我自己的理解，函数式编程就是以函数为中心，将大段过程拆成一个个函数，组合嵌套使用。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继面向对象编程之后，函数式编程会成为下一个编程的主流范式。 使用React也满一年了，从刚刚会使用到逐渐探究其底层实现，以便学习几招奇技淫巧从而在自己的代码中使用，写出高效的代码。下面整理一些知识点，算是React看书...

    Gilbertat 评论0 收藏0

  • 从代码实践潜入React内部，深入diff

    摘要：概述协调，调解本身不存在公共的。安装的确切结果有时在源代码中称为取决于渲染器，可以是节点，字符串或表示原生视图。关键的缺失部分是对更新的支持。为避免混淆，我们将和的实例叫做内部实例。但是，内部实例树包含复合和主机内部实例。 本节是 stack reconciler程序的实现说明的集合。 本文有一定的技术含量，要对React公共API以及它如何分为核心，渲染器和协调(和解，reconci...

    leap_frog 评论0 收藏0

发表评论

登陆后可评论

0条评论

techstay

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<