# component-element-instance ## Elements Describe the Tree 在`react`中，**元素(element)就是描述组件实例或DOM节点及其所需属性的普通对象。** 它仅包含有关组件类型（例如，`Button`组件）， 其属性（例如，颜色）以及其中的任何子元素的信息。 并且元素也不是实际的组件实例。相反，它是一种告诉React你想在屏幕上看到什么的方法。 你不能在元素上调用任何方法。它只是一个带有两个字段的不可变描述对象：`type: (string | ReactClass) && props: Object1`。 ### DOM Elements 当元素(`element`)的类型是字符串时，它表示具有该标记名称的`DOM`节点，并且`props`对应其属性。这就是`React`将呈现的内容。例如： ```javascript { type: 'button', props: { className: 'button button-blue', children: { type: 'b', props: { children: 'OK!' } } } } ``` 此`element`只是将以下`HTML`表示为普通对象的一种方法: ```markup ``` 请注意元素如何嵌套。按照惯例，当我们想要创建一个元素树时，我们将一个或多个子元素指定为其包含元素的`children prop`。 重要的是，子元素和父元素都只是描述而不是实际的实例。 `React`元素很容易遍历，不需要解析，当然它们比实际的`DOM`元素轻得多 - **它们只是对象!** ### Component Elements 我们知道，元素的类型(type)也可以是与React组件对应的函数或类： ```javascript { type: Button, props: { color: 'blue', children: 'OK!' } } ``` **这是**`react`**的核心理念** **描述组件的元素也是一个元素，就像描述DOM节点的元素一样。它们可以嵌套并相互混合。** 此功能可以将`DangerButton`组件定义为具有特定颜色属性值的`Button`，而无需担心`Button`是否呈现为`DOM ); ``` ### Components Encapsulate Element Trees 当`React`看到一个具有函数(function)或类(class)类型的元素(element)时，它知道在给定相应的props的情况下向该组件询问它呈现的元素。 比如他看到这么一个元素: ```javascript { type: Button, props: { color: 'blue', children: 'OK!' } } ``` `React`会询问`Button`渲染什么。然后`Button`会返回一个元素告诉他： ```javascript { type: 'button', props: { className: 'button button-blue', children: { type: 'b', props: { children: 'OK!' } } } } ``` `React`将重复此过程，直到它知道页面上每个组件的底层DOM元素都被标记。 `React`就像一个孩子，问你每个'X是Y'的'Y是什么'，你向他们解释，直到他们弄清楚世界上的每一件小事。 还记得上面的表单示例吗？它可以用React编写如下： ```javascript const Form = ({ isSubmitted, buttonText }) => { if (isSubmitted) { // Form submitted! Return a message element. return { type: Message, props: { text: 'Success!' } }; } // Form is still visible! Return a button element. return { type: Button, props: { children: buttonText, color: 'blue' } }; }; ``` **对于**`React`**组件，**`props`**是输入，**`元素树`**是输出。** **返回的元素树可以包含描述DOM节点的元素和描述其他组件的元素。这使得可以在不依赖于其内部DOM结构的情况下组成UI的独立部分。** 我们让`React`创建，更新和销毁实例。并且使用从组件返回的元素来描述它们，`React`负责管理实例。 ### Components Can Be Classes or Functions 在上面的例子中，`Form`, `Message`, `Button`都是组件。我们可以把它用`function`的方式展现，就像上面的那样，也可以使用`class`继承自`React.Component`。声明组件的三种方式，可以像下面这样: ```javascript // 1) As a function of props const Button = ({ children, color }) => ({ type: 'button', props: { className: 'button button-' + color, children: { type: 'b', props: { children: children } } } }); // 2) Using the React.createClass() factory const Button = React.createClass({ render() { const { children, color } = this.props; return { type: 'button', props: { className: 'button button-' + color, children: { type: 'b', props: { children: children } } } }; } }); // 3) As an ES6 class descending from React.Component class Button extends React.Component { render() { const { children, color } = this.props; return { type: 'button', props: { className: 'button button-' + color, children: { type: 'b', props: { children: children } } } }; } } ``` 将组件定义为类时，它比功能组件更强大。它可以存储一些本地状态，并在创建或销毁相应的`DOM`节点时执行自定义方法逻辑。 函数组件功能较弱但更简单，并且只使用一个`render`方法。除非需要仅在`class`中提供的功能，否则建议使用`function`组件。 **无论是函数还是类，从根本上说它们都是**`React`**的组件。他们将**`props`**作为输入，并将元素作为输出返回。** ### Top-Down Reconciliation 当我们调用下面代码时: ```javascript ReactDOM.render({ type: Form, props: { isSubmitted: false, buttonText: 'OK!' } }, document.getElementById('root')); ``` `react`会根据给定的`props`询问`Form`组件返回什么元素树。 ```javascript // React: 你告诉我这个 { type: Form, props: { isSubmitted: false, buttonText: 'OK!' } } // React: Form告诉我这个 { type: Button, props: { children: 'OK!', color: 'blue' } } // React: Button告诉我这个，此时预测已经结束。 { type: 'button', props: { className: 'button button-blue', children: { type: 'b', props: { children: 'OK!' } } } } ``` 这个是`React`[和解](https://github.com/xiaohesong/TIL/blob/master/front-end/react/reconciliation.md)过程中的一部分，并且这个是在调用[ReactDOM.render](https://reactjs.org/docs/react-dom.html#render)或[setState](https://reactjs.org/docs/react-component.html#setstate)时触发的。 在和解结束后，`React`会知道`DOM`树结果，并且像`react-dom`或`react-native`这样的渲染器应用，以最小的更改集去更新`DOM`节点（或者在`React Native`的情况下，特定于平台的视图） 。 这种渐进的精炼过程也是`React`应用程序易于优化的原因。如果组件树的某些部分变得太大而`React`无法有效访问，就可以告诉它[跳过这个“精炼”并在相关`props`未更改的情况下区分树的某些部分。](https://reactjs.org/docs/optimizing-performance.html)如果它们是[不可变](https://anhuiliujun.github.io/javascript/2016/12/02/javascript-mutable.html)的，那么计算`props`是否已经改变是非常快的，因此`React`和`immutability`可以很好地协同工作，并且可以用最小的努力提供很好的优化。 你可能已经注意到，此博客条目对组件和元素进行了大量讨论，而不是实例。事实上，实例在`React`中的重要性远远低于大多数面向对象的`UI`框架。 只有声明为类的组件才有实例，而且你永远不会直接创建它们：`React`会为你做这件事。虽然存在[父组件实例访问子组件实例的机制](https://reactjs.org/docs/refs-and-the-dom.html)，但它们仅用于命令性操作（例如将焦点设置在字段上），并且通常应该避免。 `React`负责为每个类组件创建一个实例，因此您可以使用方法和本地状态以面向对象的方式编写组件，但除此之外，实例在`React`的编程模型中并不是非常重要，并且由`React`本身管理。 ## 总结 元素是一个普通对象，用于描述您希望在`DOM`节点或其他组件方面在屏幕上显示的内容。元素可以在其道具中包含其他元素。创建`React`元素很简单。一旦创建了一个元素，它就永远不会发生改变。 `组件`可以用几种不同的声明方式。它可以是一个带有`render`方法的类。或者，在简单(你可以认为是没有状态)的情况下，可以将其定义为函数。在任何一种情况下，它都将`props`作为输入，并返回一个元素树作为输出。 当一个组件接收一些`props`作为输入时，这是因为一个特定的父组件返回了一个元素及其类型和这些`props`。这就是人们说`props`在`React`中以一种方式流动的原因：从父母到孩子。 在编写的组件类中，`this`就是指的实例。它对于[存储本地状态和对生命周期事件做出反应](https://reactjs.org/docs/react-component.html)非常有用。 功能组件根本没有实例。类组件有实例，但您永远不需要直接创建组件实例--`React`负责这一点。 最后，要创建元素，请使用[`React.createElement`](https://reactjs.org/docs/react-api.html#createelement)，[`JSX`](https://reactjs.org/docs/jsx-in-depth.html)或[元素工厂助手](https://reactjs.org/docs/react-api.html#react.createfactory)。不要在真实代码中将元素写为普通对象 - 只要知道它们是引擎盖下的普通对象。 ## 扩展阅读 * [介绍React Elements](https://reactjs.org/blog/2014/10/14/introducing-react-elements.html) * [精简React Elements](https://reactjs.org/blog/2015/02/24/streamlining-react-elements.html) * [React 术语](https://reactjs.org/docs/glossary.html) [本文doc地址](https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://xiaohesong.gitbook.io/today-i-learn/front-end/react-1/component-element-instance.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.