React Component vs React Element

React Component vs React Element

有这样的一个问题：

// 方法定义
function add(x, y) {
    return x + y
}

// 方法调用
add(1, 2)

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

// 组件调用？？？？？？
<Icon />

最后的一句<Icon />用专业的词归纳是什么操做，组件调用仍是什么？

有答“组件声明”的，有答“组件调用的”，有“组件初始化”的，还有“使用一个组件”的。没有一个统一的称呼。形成这样局面的缘由是不少时候咱们都没有去详细的了解过JSX和React实际操做之间的抽象层。如今咱们就深刻研究一下这部分知识。

咱们来看看最基础的问题，什么是React？React就是一个用来写界面的库。无论React和React的生态有多复杂，最核心的功能就是用来写界面的。那么咱们来看看Element，很简单，可是一个React element描述的就是你想要在界面上看到的。再深刻一点，一个React element就是一个表明了DOM节点的对象。注意，一个React element并非在界面上实际绘制的东西，而是这些内容的表明。因为JavaScript对象是轻量级的，React能够任意的建立和销毁这些element对象，并且不用担忧太大的消耗。另外，React能够分析这些对象，把当前的对象和以前的对象对比，找出发生的改变，而后根据实际发生的改变来更新实际的DOM。

为了建立一个DOM节点的表明对象（也就是React element），咱们可使用React的createElement方法。

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

createElement方法传入了三个参数。第一个是标签名称字符串（div、span等），第二个是给element设置的属性，第三个是内容或者是子的React element。本例中的“Login”就是element的内容。上面的createElement方法调用后会返回一个这样的对象：

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

当这个对象绘制为DOM（使用ReactDOM.render方法）的时候，咱们就会有一个新的DOM节点：

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

有一个颇有意思的地方，咱们在学React的时候首先注意到的就是component（组件）。“Components（组件）是React的构建块”。注意，咱们是以element开始本文的。并且你一旦理解了element，理解component也就是水到渠成的事了。一个component就是一个方法或者一个类，能够接受必定的输入，以后返回一个React element。

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

在上面的定义中，咱们有一个Button组件（component）。接收一个onLogin输入并返回一个React element。注意，Button组件接收的onLogin方法是它的prop。而后把这个方法经过createElement方法的第二个参数传入到了实际的DOM里。

更深刻一点

目前，咱们只接触到了使用HTML元素来建立React element，好比“div”、“span”等。其实，你也能够把其余的React component（组件）做为第一个参数传入createElement方法。

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

然而，不一样于通常的HTML标签名称，React若是发现第一个参数是class或者function类型的话，它就会检查传入的参数要绘制的是一个什么element，传入必要的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})
    )
}

上面的例子里有两个component（组件）。一个Button，一个User。User“表明”了一个div，div里面有两个子节点：一个包含用户名的“p”和一个Button组件。如今咱们看看上面的例子的具体的调用过程。

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

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

在上面的代码里你会看到四种不一样的属性：“button”，“div”，“p”和Button。当React看到一个element是function和类类型的话，它就会检查element会返回什么element，并传入对应的props。在这个过程结束以后，React就拥有了一个表明DOM树的对象的数。上面的例子最后的结构是这样的：

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

上面叙述的整个过程叫作Reconciliation（这个不知道怎么翻译，应该叫和谐？）。在React里，每次调用setState方法或ReactDOM.render方法被调用的时候都会触发这个过程。

那么咱们来看看最开始的问题：

// 方法定义
function add(x, y) {
    return x + y
}

// 方法调用
add(1, 2)

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

// 组件调用？？？？？？
<Icon />

如今咱们已经有了回答这个问题的所有知识，除了一点点之外。有个地方，你可能以为奇怪在使用React的时候，历来没有用过createElement方法来建立element。你是用了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 })
  )
}

写成JSX的样子是这样的：

function Button({addFriend}) {
    return (
        <button onClick={addFriend}>Add Friend</button>
    )
}

function User({name, addFriend}) {
    return (
        <div>
            <p>{name}</p>
            <Button addFriend={addFriend} />
        </div>
    )
}

因此，最后咱们应该怎么回答前面的问题呢？<Icon />叫作什么？

应该叫作“建立element”，应为JSX最后会转码为createElement方法的调用：

React.createElement(Icon, null)

前面的例子都是“建立一个React element”。

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

<div className='container'>Hello!</div>

<Hello />

原文地址：https://tylermcginnis.com/rea...