component-element-instance

Elements Describe the Tree

在react中，元素(element)就是描述组件实例或DOM节点及其所需属性的普通对象。 它仅包含有关组件类型（例如，Button组件），其属性（例如，颜色）以及其中的任何子元素的信息。

并且元素也不是实际的组件实例。相反，它是一种告诉React你想在屏幕上看到什么的方法。你不能在元素上调用任何方法。它只是一个带有两个字段的不可变描述对象：type: (string | ReactClass) && props: Object1。

DOM Elements

当元素(element)的类型是字符串时，它表示具有该标记名称的DOM节点，并且props对应其属性。这就是React将呈现的内容。例如：

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

此element只是将以下HTML表示为普通对象的一种方法:

<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

请注意元素如何嵌套。按照惯例，当我们想要创建一个元素树时，我们将一个或多个子元素指定为其包含元素的children prop。

重要的是，子元素和父元素都只是描述而不是实际的实例。

React元素很容易遍历，不需要解析，当然它们比实际的DOM元素轻得多 - 它们只是对象!

Component Elements

我们知道，元素的类型(type)也可以是与React组件对应的函数或类：

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

这是react的核心理念

描述组件的元素也是一个元素，就像描述DOM节点的元素一样。它们可以嵌套并相互混合。

此功能可以将DangerButton组件定义为具有特定颜色属性值的Button，而无需担心Button是否呈现为DOM <button>，<div>或其他的标签：

const DangerButton = ({ children }) => ({
  type: Button,
  props: {
    color: 'red',
    children: children
  }
});

也可以在一个元素树中匹配dom或者component的元素。如下:

const DeleteAccount = () => ({
  type: 'div',
  props: {
    children: [{
      type: 'p',
      props: {
        children: 'Are you sure?'
      }
    }, {
      type: DangerButton,
      props: {
        children: 'Yep'
      }
    }, {
      type: Button,
      props: {
        color: 'blue',
        children: 'Cancel'
      }
   }]
});

或者可以用你jsx的形式：

const DeleteAccount = () => (
  <div>
    <p>Are you sure?</p>
    <DangerButton>Yep</DangerButton>
    <Button color='blue'>Cancel</Button>
  </div>
);

Components Encapsulate Element Trees

当React看到一个具有函数(function)或类(class)类型的元素(element)时，它知道在给定相应的props的情况下向该组件询问它呈现的元素。

比如他看到这么一个元素:

{
  type: Button,
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

React会询问Button渲染什么。然后Button会返回一个元素告诉他：

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

React将重复此过程，直到它知道页面上每个组件的底层DOM元素都被标记。

React就像一个孩子，问你每个'X是Y'的'Y是什么'，你向他们解释，直到他们弄清楚世界上的每一件小事。

还记得上面的表单示例吗？它可以用React编写如下：

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。声明组件的三种方式，可以像下面这样:

// 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

当我们调用下面代码时:

ReactDOM.render({
  type: Form,
  props: {
    isSubmitted: false,
    buttonText: 'OK!'
  }
}, document.getElementById('root'));

react会根据给定的props询问Form组件返回什么元素树。

// 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和解过程中的一部分，并且这个是在调用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或元素工厂助手。不要在真实代码中将元素写为普通对象 - 只要知道它们是引擎盖下的普通对象。

扩展阅读

本文doc地址

Previouscodebase-overview Nextcontext

Last updated 6 years ago