翻译文章
原文：https://tylermcginnis.com/react-elements-vs-react-components/
原文作者：Tyler

如翻译有问题，麻烦请指出，（菜鸟级博文翻译员不胜感激！）。

---

几个月之前，我在Twitter提出了一个问题

I'm big on precise language when teaching but I haven't nailed down a great verbiage for using a component. Thoughts?
我在教学时非常重视精确的语言，但是我还没有找到一个很好的语言来使用组件。有想法吗？

// 函数定义
function add(x, y) {
    return x + y;
}

// 函数调用
add(1, 2);

// 组件定义
class Icon extends Component {}

// 组件调用???

让我感到惊讶的不是围绕着这个问题的一些困惑，而是我收到了大量不准确的回答。

造成我困惑的主要原因是JSX和在React中实际发生了什么之间，通常没有讨论抽象层。为了回答这个问题，我们需要深入挖掘这种抽象。

让我们从React的基础知识开始吧。什么是React？他是构建用户界面的库。无论React或者React生态系统看起来有多复杂，React的核心是——构建UIs。有了这个思路，我们先看我们的第一个定义，元素（Element）。简言之，React元素描述了展现在屏幕中你想要看到的内容。复杂点说，React元素是DOM节点的一个对象表示（object representation）。注意，我使用了词语是“描述”。重要的是要注意，Reast元素不是你在屏幕上看到的东西，而仅仅是一个对象表示。这里有几个原因。首先是JavaScript对象是轻量级的——React可以在没有太大的开销的情况下创建和销毁这些元素。第二，React能够分析这个对象，通过和前一个对象表示进行比较来区别其中的变化，进而更新那些仅仅发生改变的实际DOM（actual DOM）。这有一些性能方面的好处。

为了创建DOM节点的对象表示（即React元素），我们能够使用React的createElement方法。

const element = React.createElement(
    'div',
    {id: 'login-btn'},
    'Login'
)

createElement方法接收三个元素，第一个参数是标签名字符串（div,span等），第二个参数是你想要添加的任何属性，第三个参数是文本内容或者是这个元素的子元素，在上面的示例中是文本“Login”。调用上面的createElement方法将会返回下面这个形状的对象。

{
    type: 'div',
    props: {
        children: 'Login',
        id: 'login-btn'
    }
}

当使用ReactDOM.render将它渲染成DOM，我们将会得到一个新的DOM节点，像这样

Login

到目前为止，都很好。有趣的是学习React，通常第一件事情教你的是组件。“组件（Components）是构建React的块”。注意，然而，这篇文章我们是以元素开始介绍的。是因为，一旦你了解了元素，那么理解组件会是一个平滑的过度。组件是一个函数或者一个类，它可 选的接收输入并返回一个React元素。

function Button({onLogin}) {
    return React.createElement(
        'div',
        {id: 'login-btn', onClick: onLogin},
        'Login'
    )
}

通过上面的函数定义， 我们有一个Button组件，它接收onLogin的输入并且返回一个React元素。需要注意的一件事是，Button组件接收一个onLogin方法作为它的prop。为了将将其传递给DOM对象表示，我们将它作为第二个参数传递给createElement，就像id·属性一样。

到目前为止，我们只介绍了使用本地HTML元素（span, div等）的“type”属性创建React元素，但是也可以将其它React组件传递给createElement的第一个参数。

const element = React.createElement(
    User,
    {name: 'TylerMcGinnis'},
    null
)

然而，与HTML标签名不同，如果React看到一个类或者一个函数作为第一个参数，它会检查它渲染的是什么元素，然后给予相对应的props。React将会继续这样做，直到没有调用的具有一个类或有一个函数作为第一个参数的createElement。让我们看看下面这个示例。

function Button ({addFriend}) {
    return React.createElement(
        "button",
        {onClick: addFriend},
        "Add Friend"
    )
}

function User ({name, addFriend}) {
    return React.createElement(
        "div",
        null,
        React.createElement(
            "p",
            null,
            name
        ),
        React.createElement(Button, {addFriend})
    )
}

如上所示，我们有两个组件。一个Button组件和一个User组件。User组件的DOM对象表示，是一个有两个子元素div元素，一个p元素包裹着一个用户名和一个Button组件。现在让我们将createElement调用和它们返回什么进行交换

function Button ({ addFriend }) {
  return {
    type: 'button',
    props: {
      onClick: addFriend,
      children: 'Add Friend'
    }
  }
}

function User ({ name, addFriend }) {
  return {
    type: 'div',
    props: {
      children: [
        {
          type: 'p',
          props: {
            children: name
          }
        },
        {
          type: Button,
          props: {
            addFriend
          }
        }
      ]
    }
  }
}

你将会注意到上面的代码，我们有四个不同的类型属性，button, div, p和Button组件。当React看到一个元素有函数或者类类型（就像type: Button）,它将会通过解析那个组件来了解它返回哪个元素，给予相应的props。有这些思路，最后一个过程，React有一整个对象表示的DOM树。例子如下

{
  type: 'div',
  props: {
    children: [
      {
        type: 'p',
        props: {
          children: 'Tyler McGinnis'
        }
      },
      {
        type: 'button',
        props: {
          onClick: addFriend,
          children: 'Add Friend'
        }
      }
    ]
  }
}

这整个过程在React中被称为reconciliation，并且每次调用setState或者ReactDOM.render时触发。

现在再来看看我们最初提出的问题

// 函数定义
function add(x, y) {
    return x + y;
}

// 函数调用
add(1, 2);

// 组件定义
class Icon extends Component {}

// 组件调用???

现在我们用用解答这个问题的所有知识，除了一个重要的部分。奇怪的是，如果你已经在任何时间使用React，你没有使用React.createElement来创建你的DOM对象表示。相反的，你可能使用JSX。前面我写过“造成我困惑的主要原因是JSX和在React中实际发生了什么之间，通常没有讨论抽象层。”。这个抽象层是JSX总是通过Babel传递给React.createElement调用。

看看我们早前的历史，代码：

function Button ({ addFriend }) {
  return React.createElement(
    "button",
    { onClick: addFriend },
    "Add Friend"
  )
}

function User({ name, addFriend }) {
  return React.createElement(
    "div",
    null,
    React.createElement(
      "p",
      null,
      name
    ),
    React.createElement(Button, { addFriend })
  )
}

转换之后的结果：

function Button ({ addFriend }) {
  return (
    Add Friend
  )
}

function User ({ name, addFriend }) {
  return (

      {name}


  )
}

所以最后，当我们将我们的组件写成<Icon />，我们应该将它称为什么？

因为JSX被传递之后，我们可以称它为“创建一个元素（creating an element）”，这正是发生了什么。

React.createElement(Icon, null)

所有这些示例，都是“创建一个React元素”

React.createElement(
  'div',
  { className: 'container' },
  'Hello!'
)

Hello!

更多请参考：“React Components, Instances, and Elements”