返回 登录
0

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被调用的时候,它就会触发。

评论