react 組件引用組件

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

幾個(gè)月前，我在Twitter上發(fā)布了一個(gè)我認(rèn)為簡單的問題：

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

讓我感到驚訝的不是關(guān)于這個(gè)問題的共同困惑，而是我收到的不準(zhǔn)確的答復(fù)。

Instances / Instantiation

實(shí)例/實(shí)例化

Instances / Instantiation Rendering

實(shí)例/實(shí)例化 渲染

Instances / Instantiation RenderingEvaluation

實(shí)例/實(shí)例化 渲染 評估

Instances / Instantiation RenderingEvaluationInvocation

實(shí)例/實(shí)例化 渲染 評估 調(diào)用

Instances / Instantiation RenderingEvaluationInvocation“Using it :)”

實(shí)例/實(shí)例化 渲染 評估 調(diào)用 “使用它:)”

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領(lǐng)域中實(shí)際發(fā)生的事情之間經(jīng)常沒有談?wù)摮橄髮印?為了回答這個(gè)問題，我們需要深入研究該抽象。

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

讓我們從了解React的絕對基礎(chǔ)開始。

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是用于構(gòu)建用戶界面的庫。 無論React或React生態(tài)系統(tǒng)看起來多么復(fù)雜，這都是React的核心-構(gòu)建UI。 考慮到這一點(diǎn)，我們得出了第一個(gè)定義， Element 。

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

簡而言之， React元素描述了您想要在屏幕上看到的內(nèi)容 。

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

簡而言之， React元素是DOM節(jié)點(diǎn)的對象表示 。

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這個(gè)詞。 重要的是要注意，React元素實(shí)際上并不是您將在屏幕上看到的東西，而是它的對象表示。 這有幾個(gè)原因：

JavaScript objects are lightweight. React can create and destroy these elements without too much overhead.

JavaScript對象是輕量級的。 React可以創(chuàng)建和銷毀這些元素，而無需太多開銷。

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能夠分析對象，然后分析實(shí)際DOM，然后僅在發(fā)生更改的地方更新實(shí)際DOM。 這具有一些性能優(yōu)勢。

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

為了創(chuàng)建我們的DOM節(jié)點(diǎn)(又名React元素)的對象表示，我們可以使用React的createElement方法。

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

createElement takes in three arguments:

createElement接受三個(gè)參數(shù)：

a tag name string (div, span, etc.)

標(biāo)簽名稱字符串(div，span等)

any attributes you want the element to have

您希望元素具有的任何屬性

contents or the children of the element — in this case the text “Login”.

元素的內(nèi)容或子元素-在這種情況下為“登錄”文本。

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

上面的createElement調(diào)用將返回具有以下形狀的對象：

{ 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:

當(dāng)將其渲染到DOM時(shí)(使用ReactDOM.render)，我們將擁有一個(gè)新的DOM節(jié)點(diǎn)，如下所示：

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

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.”

到目前為止，一切都很好。 學(xué)習(xí)React的有趣之處在于，通常您首先要學(xué)習(xí)的是組件。 “組件是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.

但是請注意，我們是從元素開始的。 這樣做的原因是，一旦您理解了元素，理解組件就是一個(gè)平穩(wěn)的過渡。

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

組件是可以選擇接受輸入并返回React元素的函數(shù)或類。

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.

根據(jù)定義，我們有一個(gè)Button組件，它接受一個(gè)onLogin輸入并返回一個(gè)React元素。 需要注意的一件事是，我們的Button組件接收一個(gè)onLogin方法作為其支持。 要將其傳遞給我們的DOM對象表示，我們將其作為createElement的第二個(gè)參數(shù)傳遞，就像我們的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.

到目前為止，我們僅介紹了使用本機(jī)HTML元素(“ span”，“ div”等)的“ type”屬性創(chuàng)建React元素的方法，但是您也可以將其他React組件傳遞給createElement的第一個(gè)參數(shù)。

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標(biāo)簽名稱不同的是，如果React將類或函數(shù)作為第一個(gè)參數(shù)，它將在給定相應(yīng)道具的情況下檢查其呈現(xiàn)的元素。 React將繼續(xù)執(zhí)行此操作，直到不再有將類或函數(shù)作為其第一個(gè)參數(shù)的createElement調(diào)用為止。 讓我們看看實(shí)際情況。

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,

上面我們有兩個(gè)部分。 一個(gè)按鈕和一個(gè)用戶。 DOM的用戶對象表示形式將是帶有兩個(gè)子元素的“ div”，其中包含用戶名的“ p”和一個(gè)Button組件。 現(xiàn)在，讓我們將createElement調(diào)用與返回的內(nèi)容交換出去，

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.

您會(huì)在上面的代碼中注意到我們有四個(gè)不同的類型屬性，即“按鈕”，“ div”，“ p”和“按鈕”。 當(dāng)React看到一個(gè)具有函數(shù)或類類型的元素(例如上面的“type: Button” )時(shí)，它會(huì)與該組件進(jìn)行協(xié)商以知道它返回了哪個(gè)元素，并給出了相應(yīng)的道具。

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:

考慮到這一點(diǎn)，在此過程結(jié)束時(shí)，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.

這整個(gè)過程在React中稱為對帳，每次調(diào)用setState或ReactDOM.render都會(huì)觸發(fā)。

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

現(xiàn)在，讓我們再次看一下引發(fā)此博客文章的最初問題：

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

至此，我們已經(jīng)掌握了回答這一問題所需的全部知識，但其中一項(xiàng)重要內(nèi)容除外。

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.

奇怪的是，如果您已經(jīng)使用React一段時(shí)間，那么就不要使用React.createElement來創(chuàng)建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.

早些時(shí)候我寫道：“造成混淆的主要原因是，JSX與React領(lǐng)域?qū)嶋H發(fā)生的事情之間經(jīng)常沒有談?wù)摮橄髮印！?這個(gè)抽象層是JSX通常總是 通過Babel 轉(zhuǎn)換為 React.createElement 調(diào)用 。

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被編譯的結(jié)果。

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

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

所以最后，當(dāng)我們寫出這樣的組件<Ico n />時(shí)，我們怎么稱呼它？

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

我們可以稱其為“創(chuàng)建元素”，因?yàn)樵贘SX編譯之后，這就是正在發(fā)生的事情。

React.createElement(Icon, null)

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

所有這些示例都是“創(chuàng)建React元素”

React.createElement( 'div', className: 'container', 'Hello!')<div className='container'>Hello!</div&gt; <Hello />

Thanks for reading! For more on this subject, read React Components, Instances, and Elements by Dan Abramov.

謝謝閱讀！ 有關(guān)此主題的更多信息，請閱讀Dan Abramov的React組件，實(shí)例和元素 。

Follow Tyler McGinnis on Twitter ??Originally published at tylermcginnis.com.

在Twitter上關(guān)注Tyler McGinnis?? 最初發(fā)布于tylermcginnis.com 。

翻譯自: https://www.freecodecamp.org/news/react-elements-vs-react-components-fdc776705880/

react 組件引用組件

總結(jié)

以上是生活随笔為你收集整理的react 组件引用组件_React Elements VS React组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。