component-element-instance
Elements Describe the Tree
在react
中,元素(element)就是描述组件实例或DOM节点及其所需属性的普通对象。 它仅包含有关组件类型(例如,Button
组件), 其属性(例如,颜色)以及其中的任何子元素的信息。
并且元素也不是实际的组件实例。相反,它是一种告诉React你想在屏幕上看到什么的方法。 你不能在元素上调用任何方法。它只是一个带有两个字段的不可变描述对象:type: (string | ReactClass) && props: Object1
。
DOM Elements
当元素(element
)的类型是字符串时,它表示具有该标记名称的DOM
节点,并且props
对应其属性。这就是React
将呈现的内容。例如:
此element
只是将以下HTML
表示为普通对象的一种方法:
请注意元素如何嵌套。按照惯例,当我们想要创建一个元素树时,我们将一个或多个子元素指定为其包含元素的children prop
。
重要的是,子元素和父元素都只是描述而不是实际的实例。
React
元素很容易遍历,不需要解析,当然它们比实际的DOM
元素轻得多 - 它们只是对象!
Component Elements
我们知道,元素的类型(type)也可以是与React组件对应的函数或类:
这是react
的核心理念
描述组件的元素也是一个元素,就像描述DOM节点的元素一样。它们可以嵌套并相互混合。
此功能可以将DangerButton
组件定义为具有特定颜色属性值的Button
,而无需担心Button
是否呈现为DOM <button>
,<div>
或其他的标签:
也可以在一个元素树中匹配dom
或者component
的元素。如下:
或者可以用你jsx
的形式:
Components Encapsulate Element Trees
当React
看到一个具有函数(function)或类(class)类型的元素(element)时,它知道在给定相应的props的情况下向该组件询问它呈现的元素。
比如他看到这么一个元素:
React
会询问Button
渲染什么。然后Button
会返回一个元素告诉他:
React
将重复此过程,直到它知道页面上每个组件的底层DOM元素都被标记。
React
就像一个孩子,问你每个'X是Y'的'Y是什么',你向他们解释,直到他们弄清楚世界上的每一件小事。
还记得上面的表单示例吗?它可以用React编写如下:
对于React
组件,props
是输入,元素树
是输出。
返回的元素树可以包含描述DOM节点的元素和描述其他组件的元素。这使得可以在不依赖于其内部DOM结构的情况下组成UI的独立部分。
我们让React
创建,更新和销毁实例。并且使用从组件返回的元素来描述它们,React
负责管理实例。
Components Can Be Classes or Functions
在上面的例子中,Form
, Message
, Button
都是组件。我们可以把它用function
的方式展现,就像上面的那样,也可以使用class
继承自React.Component
。声明组件的三种方式,可以像下面这样:
将组件定义为类时,它比功能组件更强大。它可以存储一些本地状态,并在创建或销毁相应的DOM
节点时执行自定义方法逻辑。
函数组件功能较弱但更简单,并且只使用一个render
方法。除非需要仅在class
中提供的功能,否则建议使用function
组件。
无论是函数还是类,从根本上说它们都是React
的组件。他们将props
作为输入,并将元素作为输出返回。
Top-Down Reconciliation
当我们调用下面代码时:
react
会根据给定的props
询问Form
组件返回什么元素树。
这个是React
和解过程中的一部分,并且这个是在调用ReactDOM.render或setState时触发的。
在和解结束后,React
会知道DOM
树结果,并且像react-dom
或react-native
这样的渲染器应用,以最小的更改集去更新DOM
节点(或者在React Native
的情况下,特定于平台的视图) 。
这种渐进的精炼过程也是React
应用程序易于优化的原因。如果组件树的某些部分变得太大而React
无法有效访问,就可以告诉它跳过这个“精炼”并在相关props
未更改的情况下区分树的某些部分。如果它们是不可变的,那么计算props
是否已经改变是非常快的,因此React
和immutability
可以很好地协同工作,并且可以用最小的努力提供很好的优化。
你可能已经注意到,此博客条目对组件和元素进行了大量讨论,而不是实例。事实上,实例在React
中的重要性远远低于大多数面向对象的UI
框架。
只有声明为类的组件才有实例,而且你永远不会直接创建它们:React
会为你做这件事。虽然存在父组件实例访问子组件实例的机制,但它们仅用于命令性操作(例如将焦点设置在字段上),并且通常应该避免。
React
负责为每个类组件创建一个实例,因此您可以使用方法和本地状态以面向对象的方式编写组件,但除此之外,实例在React
的编程模型中并不是非常重要,并且由React
本身管理。
总结
元素是一个普通对象,用于描述您希望在DOM
节点或其他组件方面在屏幕上显示的内容。元素可以在其道具中包含其他元素。创建React
元素很简单。一旦创建了一个元素,它就永远不会发生改变。
组件
可以用几种不同的声明方式。它可以是一个带有render
方法的类。或者,在简单(你可以认为是没有状态)的情况下,可以将其定义为函数。在任何一种情况下,它都将props
作为输入,并返回一个元素树作为输出。
当一个组件接收一些props
作为输入时,这是因为一个特定的父组件返回了一个元素及其类型和这些props
。这就是人们说props
在React
中以一种方式流动的原因:从父母到孩子。
在编写的组件类中,this
就是指的实例。它对于存储本地状态和对生命周期事件做出反应非常有用。
功能组件根本没有实例。类组件有实例,但您永远不需要直接创建组件实例--React
负责这一点。
最后,要创建元素,请使用React.createElement
,JSX
或元素工厂助手。不要在真实代码中将元素写为普通对象 - 只要知道它们是引擎盖下的普通对象。
扩展阅读
Last updated