React元素 VS React组件

React是什么？

React是一个用来打造UI的库。不管React和其生态系统有多复杂，其本质都是要打造UI。

请牢记这一点，下面我们来看看第一个定义：元素。

简单的说，React元素描述了你在屏幕上想看到什么东西。复杂点说，React元素是DOM node的代表对象。

请注意，我用了“描述”这个词，因为React元素并不是你在屏幕上看到的东西。原因如下：

JavaScript对象都是轻量级的。React可以轻松的创建或是删除这些元素。

React能够分析这个对象，然后分析真正的DOM，之后在改变发生的时候对DOM进行更新。

要想创建React元素，我们可以使用React的 createElement 方法。

const element = React.createElement(

  'div',

  {id: 'login-btn'},

  'Login'

)

createElement 需要3个参数：

tag name字符串(div, span, etc.)
你希望元素所拥有的任何属性
内容或是元素的子元素

上面的createElement会返回一个这样的对象：

{

  type: 'div',

  props: {

    children: 'Login',

    id: 'login-btn'

  }

}

当它在DOM中被渲染出来的时候，我们将会迎来一个新的DOM node：

<div id=‘login-btn'>Login</div>

接下来，我们又迎来了另一个概念：组件：“组件就像是组成React的积木”。

组件是一个函数，或是一个Class，用来接收input，并且返回出一个React元素。

 function Button ({ onLogin }) {

  return React.createElement(

    'div',

    {id: 'login-btn', onClick: onLogin},

    'Login'

  )

}

例如上面的代码，这里有一个Button组件，它负责接收onLogin的input，并且返回了一个React元素。

目前为止，我们只说了如何使用HTML原生元素(“span”, “div”, etc)的type属性来创建React元素。其实，你也可以将React组件作为 createElement 方法所需要的第一个参数：

 const element = React.createElement(

  User,

  {name: 'Tyler McGinnis'},

  null

)

但是，与HTML tag name不同的是，如果React发现你在使用一个类或是一个函数作为参数的时候，它会查看自己所渲染的元素。React会一直检查下去，直到没有新的类或是函数当做第一个参数：

 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，一个包含了用户名和一个Button组件的p元素。我们现在看看它会返回出什么：

 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 }

      }]

    }

  }

}

你会注意到上面的代码中有4个不同的type属性：button、div、p和Button。当React发现一个带有函数或是类的元素时（例如上面的 “type: Button”），它会根据相应的prop像那个组件进行咨询，以确定返回哪个元素。

例如：

 {

  type: 'div',

  props: {

    children: [{

      type: 'p',

      props: { children: 'Tyler McGinnis' }

    },

    {

      type: 'button',

      props: {

        onClick: addFriend,

        children: 'Add Friend'

      }

     }]

   }

}

这个过程在React中被称为Reconciliation，每一次当setState或是ReactDOM.render被调用的时候，它就会触发。