react 组件引用组件

A few months ago I posted what I thought was a simple question:

几个月前，我在发布一个我认为简单的问题：

What surprised me wasn’t the joint confusion around this question, but rather the amount of inaccurate responses I received.

让我感到惊讶的不是关于这个问题的共同困惑，而是我收到的不准确的答复。

Instances / Instantiation

实例/实例化

Instances / Instantiation Rendering

实例/实例化 渲染

Instances / Instantiation RenderingEvaluation

实例/实例化 渲染 评估

Instances / Instantiation RenderingEvaluationInvocation

实例/实例化 渲染 评估 调用

Instances / Instantiation RenderingEvaluationInvocation“Using it :)”

实例/实例化 渲染 评估 调用 “使用它:)”

The primary reason for the confusion is that there’s an often un-talked about abstraction layer between JSX and what’s actually going on in React land. In order to answer this question, we need to take a deep dive into that abstraction.

造成混淆的主要原因是，在JSX与React领域中实际发生的事情之间经常没有谈论抽象层。 为了回答这个问题，我们需要深入研究该抽象。

Let’s start by looking at the absolute fundamentals of React.

让我们从了解React的绝对基础开始。

React到底是什么？ (What exactly is React?)

React is a library for building user interfaces. No matter how complex React or the React ecosystem seem to be, this is React at its core — building UIs. With this in mind, we arrive at our first definition, an Element.

React是用于构建用户界面的库。 无论React或React生态系统看起来多么复杂，这都是React的核心-构建UI。 考虑到这一点，我们得出了第一个定义， Element 。

Simply put, a React element describes what you want to see on the screen.

简而言之， React元素描述了您想要在屏幕上看到的内容 。

Not so simply put, a React element is an object representation of a DOM node.

简而言之， React元素是DOM节点的对象表示 。

Notice that I used the word describe. It’s important to note that a React element isn’t actually the thing you’ll see on your screen, instead, it’s just an object representation of it. There are a few reasons for this:

注意，我使用了describe这个词。 重要的是要注意，React元素实际上并不是您将在屏幕上看到的东西，而是它的对象表示。 这有几个原因：

1. JavaScript objects are lightweight. React can create and destroy these elements without too much overhead.
   JavaScript对象是轻量级的。 React可以创建和销毁这些元素，而无需太多开销。
2. React is able to analyze the object, then analyze the actual DOM, and then update the actual DOM only where a change occurred. This has some performance upsides to it.
   React能够分析对象，然后分析实际DOM，然后仅在发生更改的地方更新实际DOM。 这具有一些性能优势。

In order to create our object representation of a DOM node (aka React element), we can use React’s createElement method.

为了创建我们的DOM节点(又名React元素)的对象表示，我们可以使用React的createElement方法。

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

createElement takes in three arguments:

createElement接受三个参数：

1. a tag name string (div, span, etc.)
   标签名称字符串(div，span等)
2. any attributes you want the element to have
   您希望元素具有的任何属性
3. contents or the children of the element — in this case the text “Login”.
   元素的内容或子元素-在这种情况下为“登录”文本。

The createElement invocation above is going to return an object with this shape:

上面的createElement调用将返回具有以下形状的对象：

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

And when it’s rendered to the DOM (using ReactDOM.render), we’ll have a new DOM node that looks like this:

当将其渲染到DOM时(使用ReactDOM.render)，我们将拥有一个新的DOM节点，如下所示：

    
     Login
    

So far, so good. What’s interesting about learning React is that typically the first thing you’re taught is components. “Components are the building blocks of React.”

到目前为止，一切都很好。 学习React的有趣之处在于，通常您首先要学习的是组件。 “组件是React的基石。”

Notice, however, that we started this post with elements. The reason for this is because once you understand elements, understanding components is a smooth transition.

但是请注意，我们是从元素开始的。 这样做的原因是，一旦您理解了元素，理解组件就是一个平稳的过渡。

A component is a function or a Class which optionally accepts input and returns a React element.

组件是可以选择接受输入并返回React元素的函数或类。

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

By definition, we have a Button component which accepts an onLogin input and returns a React element. One thing to note is that our Button component receives an onLogin method as its prop. To pass that along to our object representation of the DOM, we pass it along as the second argument to createElement, just as we did our id attribute.

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

Let’s go deeper.

让我们更深入。

Up until this point we’ve only covered creating React elements with the “type” property of native HTML elements (“span”, “div”, etc), but you can also pass in other React components to the first argument of createElement.

到目前为止，我们仅介绍了使用本机HTML元素(“ span”，“ div”等)的“ type”属性创建React元素的方法，但是您也可以将其他React组件传递给createElement的第一个参数。

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

However, unlike with an HTML tag name, if React sees a class or a function as the first argument, it will then check to see what element it renders, given the corresponding props. React will continue to do this until there are no more createElement invocations which have a class or a function as their first argument. Let’s take a look at this in action.

但是，与HTML标签名称不同的是，如果React将类或函数作为第一个参数，它将在给定相应道具的情况下检查其呈现的元素。 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 })  ) }

Above we have two components. A Button and a User. User’s object representation of the DOM will be a “div” with two children, a “p” which wraps the user’s name and a Button component. Now let’s swap out the createElement invocations with what they return,

上面我们有两个部分。 一个按钮和一个用户。 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 }       }]    }  }}

You’ll notice in the above code we have four different type properties, “button”, “div”, “p”, and Button. When React sees an element with a function or class type (like our “type: Button” above), it will then consult with that component to know which element it returns, given the corresponding props.

您会在上面的代码中注意到我们有四个不同的类型属性，即“按钮”，“ div”，“ p”和“按钮”。 当React看到一个具有函数或类类型的元素(例如上面的“type: Button” )时，它会与该组件进行协商以知道它返回了哪个元素，并给出了相应的道具。

With that in mind, at the end of this process, React has a full object representation of the DOM tree. In our example, that will look like this:

考虑到这一点，在此过程结束时，React具有DOM树的完整对象表示形式。 在我们的示例中，将如下所示：

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

This whole process is called reconciliation in React and it’s triggered every time setState or ReactDOM.render are called.

这整个过程在React中称为对帐，每次调用setState或ReactDOM.render都会触发。

So now let’s again take a look at our initial question that sparked this blog post:

现在，让我们再次看一下引发此博客文章的最初问题：

At this point we have all the knowledge we need to answer this question, except for one important piece.

至此，我们已经掌握了回答这一问题所需的全部知识，但其中一项重要内容除外。

Odds are if you’ve been using React for any amount of time, you don’t use React.createElement to create your object representations of the DOM. Instead, you probably use JSX.

奇怪的是，如果您已经使用React一段时间，那么就不要使用React.createElement来创建DOM的对象表示形式。 相反，您可能使用JSX。

Earlier I wrote: “The primary reason for the confusion is that there’s an often un-talked about abstraction layer between JSX and what’s actually going on in React land.” This abstraction layer is that JSX is always going to get transpiled to React.createElement invocations, typically via Babel.

早些时候我写道：“造成混淆的主要原因是，JSX与React领域实际发生的事情之间经常没有谈论抽象层。” 这个抽象层是JSX通常总是 通过Babel 转换为 React.createElement 调用 。

Looking at our earlier example, this code:

看我们前面的例子，这段代码：

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 })  )}

is the result of this JSX being transpiled.

是此JSX被编译的结果。

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

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

So finally, what do we call it when we write out our component like this, <Icon/>?

所以最后，当我们写出这样的组件<Ico n />时，我们怎么称呼它？

We can call it “creating an element” because after the JSX is transpiled, that’s exactly what’s happening.

我们可以称其为“创建元素”，因为在JSX编译之后，这就是正在发生的事情。

React.createElement(Icon, null)

All of these examples, are “creating an React element”

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

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

    
     Hello!
     
    

Thanks for reading! For more on this subject, read by Dan Abramov.

谢谢阅读！ 有关此主题的更多信息，请阅读Dan Abramov的 。

Follow on Twitter ⚛️Originally published at .

在Twitter上关注 最初发布于 。

翻译自:

react 组件引用组件