保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应元素和组件:此处定义的所有内容

反应元素和组件简介:

 React非常流行,它使用户界面的开发非常简单且具有声明性。 反应的一些正式文档中已经引用了一些概念。这可能会使新的反应用户感到困惑。如果我们举一个例子,当我们查看词汇表或顶级API时。

我们对诸如React element或React component之类的关键字进行快速搜索。我们可以注意到,React的整个官方文档中都使用了这些术语。

这表明React Elements和React Components的这些概念是React的核心概念。因此,充分理解非常重要。我们的文章基于诸如React Elements和Components之类的核心概念。它针对的是那些以前已经使用过React的人,并且期望熟悉React的一些核心概念。

 

什么是React Elements?

反应 Element的概念是React的核心部分。但是,很可能新来的人最初会错过React的概念。如果您以前有过将React与JSX一起使用的经验,那么可以肯定,为JS文件编写HTML外观语法是第二天性。

但是在内部,真正的问题是,JSX语法实际上可以编译为React的函数调用,尤其是对于React.createElement()。 反应.createElement()产生的名称恰好就是React Elements。 反应元素是简单的普通JavaScript对象,具有一些其他属性,例如:

  1. 键- 此属性用于标识明确位于相同元素类型数组中的React元素。无需为此提供任何价值。但是,如果您提供一个值,它将使React能够执行优化。这将使重新渲染的过程比以前更加有效。
  2. 道具-props属性正是我们所认为的。这是用于映射所有传递给子组件的属性和值的属性。
  3. Ref-此属性用于基础DOM元素。它与React的此元素呈现的版本相关联。
  4. 类型-此属性将是字符串值,用于表示有效HTML元素到React的Component类。

 

生成的React元素是一个JavaScript对象,其中包含其他嵌套的React元素,这些元素描述HTML的外观。这听起来很熟悉,因为它正是虚拟DOM的本质。虚拟DOM是对DOM在给定时间的外观的描述。虚拟DOM由React元素声明性地表示。 

 

什么是React组件?

 

与React元素不同,人们可能更熟悉React组件。如果您编写了使用React组件的任何代码行,则意味着您之前还创建了React Component类。您必须熟悉React.createClass()并熟悉编写这些组件类,但要记住的一点是,React组件被称为React组件类的实例。

如果您熟悉JS,那么当您听到短语,类的实例并让您知道时,您会以为它是一个新运算符,并且直觉是显而易见的。但是,新运算符从未用于创建React Components。

取而代之的是,ReactDOM.render()用于将React元素呈现为特定的DOM元素,而我们要获得的返回值是ReactDom.render()是React组件实例。

从ReactDOM.render()返回的Component实例可以调用React Component类中已经定义的方法。这有助于我们往后走几步,并正确记住,reactdOm.render()只是React为我们实例化组件的方式。您不需要访问React Component实例,但是如果在测试React组件时将参考保存在Component实例中,这将对您很有帮助。

关于ReactDOM.render()的一条相当有趣的信息是,这是React在虚拟DOM上执行其如此高效的差异算法的地方。回想一下,我们看到React元素代表了虚拟DOM,这意味着ReactDoM.render()确实接受了一个虚拟DOM,作为回报,它把它渲染成一个实际的DOM元素。

之后,返回组件实例。

如果在幕后,则传递相同的React元素类型,并且prop值可能与ReactDOM.render()的同一个DOM元素不同,那么React所做的是执行差异算法,并且只进行很小的更改,是dom元素所必需的。而且,除了更新的prop和state值的情况外,每次都返回相同的组件实例就不足为奇了。

 

什么是组件后备实例?

组件支持实例与实际DOM元素本身有关。先前我们已经看到React Element和React Component都是DOM的抽象层。在之前的示例中,我们可以看到ReactDOM.render()生成的组件实例不是与该组件实例关联的实际DOM节点,但是如果我们要访问与该实例关联的基础DOM节点,组件实例,实际上非常容易。

我们只需要使用ReactDOM.findDOMNode()并将其作为参数传递给组件实例。因此,我们可能想知道它与组件支持实例有什么关系。然后答案就是这个实际的DOM节点,在整个官方文档中,React将其称为Component Backing Instance。 

 

管理实例

如果某人是React的新手,那么他们以前可能只使用过组件类和实例。如果要举一个例子,可以说可以通过使用类创建来声明一个Button组件。当应用程序运行时,我们在屏幕上可能有许多该组件的实例,每个实例都有自己的属性和自己的本地状态。这告诉我们有关传统的面向对象的用户界面编程,从而告诉我们有关引入元素的需求。在传统的用户界面模型中,完全由开发人员来负责创建和销毁子组件实例。

在React中,这就是元素概念可以拯救我们的地方。元素不是实际的实例,而是对想要在屏幕上看到的内容做出反应的一种方式。它只是一个具有两个字段类型的不可变对象,分别是Reactclass和props。

 

结论:

术语,React组件,React元素和React组件后备实例密切相关。可以将React Elements视为基础的基础构建块。 JSX语法被转换为React.createElement()调用,并且最终返回简单和旧的JavaScript对象。这些被称为反应元素。 反应 Component实例代表了称为ReactDOM.render()的下一个抽象级别。它包含一个React元素和一个引用,该引用指向一个实际的DOM节点。我们得到的是一个React Component实例。

该实例可以完全访问组件类中定义的方法。外部测试单位很少使用。众所周知,React元素和Components都不代表实际的DOM元素。由于从组件实例进行渲染而产生的DOM元素称为组件支持实例。我们可以选择的主要方式是使用ReactDOM.findDOMNode()来访问它。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。