當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

react构建_您应该了解的有关React的一切：开始构建所需的基础知识

發(fā)布時(shí)間：2023/11/29 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 react构建_您应该了解的有关React的一切：开始构建所需的基础知识小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

react構(gòu)建

by Scott Domes

由斯科特·多姆斯(Scott Domes)

您應(yīng)該了解的有關(guān)React的一切：開(kāi)始構(gòu)建所需的基礎(chǔ)知識(shí) (Everything You Should Know About React: The Basics You Need to Start Building)

Are you curious about React and haven’t had the chance to learn it? Or maybe you’ve tried tutorials in the past, but struggled to master the core concepts? Or maybe you’ve learned the basics, but want to consolidate your knowledge? Either way, this article is for you.

您是否對(duì)React感到好奇，還沒(méi)有機(jī)會(huì)學(xué)習(xí)它？或者，也許您過(guò)去曾經(jīng)嘗試過(guò)教程，但卻難以掌握核心概念？或者，也許您已經(jīng)學(xué)習(xí)了基礎(chǔ)知識(shí)，但想鞏固您的知識(shí)？無(wú)論哪種方式，本文都適合您。

We’re going to build a simple React music player, layering on new React concepts as we go.

我們將構(gòu)建一個(gè)簡(jiǎn)單的React音樂(lè)播放器，并在開(kāi)發(fā)過(guò)程中以新的React概念為基礎(chǔ)。

Here’s what we’ll cover:

這是我們要介紹的內(nèi)容：

What is a React component?
什么是React組件？
ReactDOM rendering
ReactDOM渲染
Class vs functional components
類(lèi)與功能組件
JSX
JSX
State
州
Event handling
事件處理
Asynchronous setState
異步setState
Props
道具
Refs
參考

That’s just about everything you need to build and maintain a React application. But we’re going to introduce it piece-by-piece.

這就是構(gòu)建和維護(hù)React應(yīng)用程序所需的一切。但是，我們將逐個(gè)介紹它。

建立 (Setup)

Here’s the situation: a small start-up has reached out to you for your help. They’ve created a page for users to upload music and have it visualized in glowing colour. But they need you to do the hard part—AKA to make it work.

情況就是這樣：一家小型創(chuàng)業(yè)公司已經(jīng)向您尋求幫助。他們創(chuàng)建了一個(gè)頁(yè)面供用戶上傳音樂(lè)，并以發(fā)光的顏色對(duì)其進(jìn)行可視化。但是他們需要您盡力而為-使其工作。

To get going, make a new project directory and add the following three files.

首先，創(chuàng)建一個(gè)新的項(xiàng)目目錄并添加以下三個(gè)文件。

Make sure you’re using an up-to-date version of Chrome with this tutorial, otherwise the animations in the code above won’t work.

請(qǐng)確保您在本教程中使用的是最新版的Chrome ，否則上面代碼中的動(dòng)畫(huà)將不起作用。

Thanks to Steven Fabre for the play button CSS and Justin Windle for visualization code (you can view the original here).

感謝Steven Fabre提供CSS播放按鈕，以及Justin Windle的可視化代碼( 您可以在此處查看原始內(nèi)容 )。

Open up index.html in both a code editor and your browser, and let’s get started!

在代碼編輯器和瀏覽器中打開(kāi)index.html ，讓我們開(kāi)始吧！

什么是React？ (What is React?)

React is a way to build user interfaces. It is only concerned with what you see on the front-end. React makes user interfaces very easy to build by cutting each page into pieces. We call these pieces components.

React是一種構(gòu)建用戶界面的方法。它只與您在前端看到的內(nèi)容有關(guān)。通過(guò)將每個(gè)頁(yè)面分成幾部分，React使用戶界面的構(gòu)建非常容易。我們稱(chēng)這些部件為組件。

Here is an example of cutting a page into components:

這是將頁(yè)面切成組件的示例：

Each section highlighted above is considered a component. But what does this mean for a developer?

上面突出顯示的每個(gè)部分都被視為一個(gè)組件。但這對(duì)開(kāi)發(fā)人員意味著什么？

什么是React組件？ (What is a React Component?)

A React component is a bit of code that represents a piece of the page. Each component is a JavaScript function that returns a piece of code that represents a piece of a web page.

React組件是代表一部分頁(yè)面的一些代碼。每個(gè)組件都是一個(gè)JavaScript函數(shù)，該函數(shù)返回代表網(wǎng)頁(yè)的一段代碼。

To build a page, we call these functions in a certain order, put together the result, and show it to the user.

為了構(gòu)建頁(yè)面，我們以一定的順序調(diào)用這些函數(shù)，將結(jié)果放在一起，并顯示給用戶。

Let’s write a component inside the <script> tag in index.html with the type of “text/babel”:

讓我們寫(xiě)內(nèi)部的部件的<scri PT>噸ag in inde x.html機(jī)智h th èTY pe of “text/巴別”：

When we call the OurFirstcomponent() function, we will get back a piece of the page.

當(dāng)我們調(diào)用OurFirstcomponent()函數(shù)時(shí)，我們將返回頁(yè)面的一部分。

You can also write functions like this:

您還可以編寫(xiě)如下函數(shù)：

const OurFirstComponent = () => { return ( // Stuff to make this component goes here );}

React uses a language called JSX that looks like HTML but works inside JavaScript, which HTML usually doesn’t do.

React使用一種叫做JSX的語(yǔ)言，它看起來(lái)像HTML，但是可以在JavaScript內(nèi)運(yùn)行，而HTML通常是不支持的。

You can add plain HTML to this section to make it appear on the UI:

您可以將純HTML添加到此部分，以使其出現(xiàn)在UI中：

When we call the OurFirstComponent() function, we get back a bit of JSX. We can use something called ReactDOM to put it on the page.

當(dāng)我們調(diào)用OurFirstComponent()函數(shù)時(shí)，我們會(huì)得到一些JSX。我們可以使用稱(chēng)為ReactDOM的東西將其放在頁(yè)面上。

Now our <h1> tag will be put inside the element with the ID of hook. It should look like this when you refresh your browser:

現(xiàn)在，我們的< h1>標(biāo)記將被放置在具有鉤子ID of的元素內(nèi)。刷新瀏覽器時(shí)，它應(yīng)如下所示：

We can also write our component in JSX like so:

我們也可以像這樣在JSX中編寫(xiě)組件：

ReactDOM.render(<OurFirstComponent />, placeWeWantToPutComponent);

This is standard — invoke your components like you are writing HTML.

這是標(biāo)準(zhǔn)的-就像編寫(xiě)HTML一樣調(diào)用組件。

將組件放在一起 (Putting Components Together)

We can put React components inside other components.

我們可以將React組件放入其他組件中。

This is how we build our page out of pieces of React — by nesting components inside of each other.

這就是我們通過(guò)將組件嵌套在彼此之間，從而利用React片段構(gòu)建頁(yè)面的方式。

類(lèi)組件 (Class Components)

So far, we’ve been writing components as functions. These are called functional components.

到目前為止，我們一直在將組件編寫(xiě)為函數(shù)。這些稱(chēng)為功能組件。

But you can write components another way, as JavaScript classes. These are called class components.

但是您可以使用另一種方式編寫(xiě)組件，例如JavaScript類(lèi)。這些稱(chēng)為類(lèi)組件。

class Container extends React.Component { render() { return ( <div> <h1>I am the parent!</h1> <OurFirstComponent /> </div> ); }}const placeWeWantToPutComponent = document.getElementById('hook');ReactDOM.render(<Container />, placeWeWantToPutComponent);

Class components must have a function called render(). The render function returns the JSX of the component. They can be used the same way as functional components, like this:<AClassComponent />.

類(lèi)組件必須具有一個(gè)稱(chēng)為render()的函數(shù)。 render函數(shù)返回組件的JSX。它們可以與功能組件相同的方式使用，如下所示： <AClassComponent />。

You should use functional components over class components because they’re easier to read, unless you need component state (more on that soon).

您應(yīng)該在類(lèi)組件上使用功能組件，因?yàn)樗鼈兏子陂喿x，除非您需要組件狀態(tài) (稍后會(huì)介紹更多)。

JSX中JavaScript (JavaScript in JSX)

You can put JavaScript variables inside of your JSX like this:

您可以像這樣將JavaScript變量放入JSX：

class Container extends React.Component { render() { const greeting = 'I am a string!'; return ( <div> <h1>{ greeting }</h1> <OurFirstComponent /> </div> ); }}

Now the ‘I am a string!’ will be inside the h1.

現(xiàn)在，“我是弦樂(lè)！” 將在h1 。

You can also do more difficult stuff, like call a function:

您還可以執(zhí)行更困難的工作，例如調(diào)用函數(shù)：

class Container extends React.Component { render() { const addNumbers = (num1, num2) => { return num1 + num2; }; return ( <div> <h1>The sum is: { addNumbers(1, 2) }</h1> <OurFirstComponent /> </div> ); }}

JSX陷阱 (JSX Gotchas)

Rename OurFirstComponent() to PlayButton. We want it to return the following:

將OurFirstComponent()重命名為PlayButton 。我們希望它返回以下內(nèi)容：

But there’s a problem: class is a keyword in JavaScript, so we can’t use it. So how do we give our <;a> a class of play?

但是有一個(gè)問(wèn)題： class是JavaScript中的關(guān)鍵字，因此我們不能使用它。那么，如何才能讓我們的< ;一>一CLA ss o ?F玩嗎？

Use a property called className instead:

使用名為className的屬性代替：

該組件在做什么？ (What Is This Component Doing?)

Class components can store information about their current situation. This information is called state, which is stored in a JavaScript object.

類(lèi)組件可以存儲(chǔ)有關(guān)其當(dāng)前情況的信息。此信息稱(chēng)為state ，它存儲(chǔ)在JavaScript對(duì)象中。

In the code below, we have an object representing our components state. It has a key of isMusicPlaying which has a value of false. This object is assigned to this.state in the constructor method, which is called when the class is first used.

在下面的代碼中，我們有一個(gè)表示組件狀態(tài)的對(duì)象。它具有isMusicPlaying key ，其value false 。該對(duì)象在constructor方法中分配給this.state ，該方法在首次使用該類(lèi)時(shí)被調(diào)用。

class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; } render() { return ( <div> <PlayButton /> </div> ); }}

A constructor method of a React component always needs to call super(props) before anything else.

React組件的constructor方法始終需要先調(diào)用super(props) 。

Okay, so what do we do with state? Why does it exist?

好的，我們?cè)撊绾翁幚韘tate ？為什么存在？

根據(jù)狀態(tài)更改React組件 (Changing Our React Component Based On State)

State is way to update our UI based on events.

狀態(tài)是基于事件更新我們的UI的方法。

In this tutorial, we will use state to change the play button from paused to playing based on the user clicking the play button.

在本教程中，我們將使用狀態(tài)來(lái)改變播放按鈕從暫停打根據(jù)用戶點(diǎn)擊播放按鈕。

When the user clicks on the button, the state will update, which will then update the UI.

當(dāng)用戶單擊按鈕時(shí)，狀態(tài)將更新，然后狀態(tài)將更新UI。

Here’s how we get started. We can look at the component state with this.state. In the following code, we look at the state and use it to decide what text to present to the user.

這是我們的入門(mén)方法。我們可以使用this.state查看組件狀態(tài)。在下面的代碼中，我們查看狀態(tài)并使用它來(lái)決定向用戶呈現(xiàn)什么文本。

class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }render() { const status = this.state.isMusicPlaying ? 'Playing' : 'Not playing'; return ( <div> <h1>{ status }</h1> <PlayButton /> </div> ); }}

In the render function, this is always referring to the component it is within.

在render函數(shù)中， this始終是指其所在的組件。

But that’s not very useful unless we have a way to change this.state.isMusicPlaying.

但這不是很有用，除非我們有辦法更改this.state.isMusicPlaying 。

當(dāng)東西發(fā)生在我們的組件上 (When Stuff Happens to Our Component)

The user can interact with our components by clicking on the play button. We want to react (ha… ha…) to those events.

用戶可以通過(guò)單擊播放按鈕與我們的組件進(jìn)行交互。我們想對(duì)這些事件做出React(哈……哈……)。

We do that through functions that take care of events. We call these event handlers.

我們通過(guò)負(fù)責(zé)事件的功能來(lái)做到這一點(diǎn)。我們稱(chēng)這些事件處理程序。

class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }handleClick(event) { // Do something about the click };render() { let status = this.state.isMusicPlaying ? 'Playing :)' : 'Not playing :('; return ( <div> <h1 onClick={this.handleClick.bind(this)}>{ status }</h1> <PlayButton /> </div> ); }}

When the user clicks on the h1, our component will make the handleClick function run. The function gets the event object as the argument, which means it can use it if it wanted to.

當(dāng)用戶單擊h1 ，我們的組件將使handleClick函數(shù)運(yùn)行。該函數(shù)將事件對(duì)象作為參數(shù)，這意味著它可以在需要時(shí)使用它。

We use the .bind method on handleClick to make sure this refers to the whole component, rather than just the h1.

我們?cè)趆andleClick上使用.bind方法，以確保this引用的是整個(gè)組件，而不僅僅是h1 。

該組件應(yīng)該做什么 (What This Component Should Be Doing)

When we change the state of our component, it will call the render function again.

當(dāng)我們更改組件的狀態(tài)時(shí)，它將再次調(diào)用render函數(shù)。

We can change state with this.setState(), if we give it a new object representing the new state.

如果我們給它一個(gè)表示新?tīng)顟B(tài)的新對(duì)象，則可以使用this.setState()更改狀態(tài)。

Our component on the page will always represent its current state. React does that for us.

頁(yè)面上的組件將始終代表其當(dāng)前狀態(tài)。 React為我們做到了。

handleClick() { if (this.state.isMusicPlaying) { this.setState({ isMusicPlaying: false }); } else { this.setState({ isMusicPlaying: true }); } };

But clicking an h1 isn’t as good as clicking our actual play button. Let’s make that work.

但是單擊h1不如單擊我們的實(shí)際播放按鈕那樣好。讓我們開(kāi)始吧。

組件之間的對(duì)話 (Talking Between Components)

Your components can talk to each other. Let’s try it.

您的組件可以互相通信。讓我們嘗試一下。

We can tell PlayButton whether or not the music is playing using something called props. Props are information shared from a parent component to a child component.

我們可以使用props來(lái)告訴PlayButton音樂(lè)是否正在播放。道具是從父組件共享到子組件的信息。

Props in JSX look the same as HTML properties.

JSX中的道具看起來(lái)與HTML屬性相同。

We give PlayButton a prop called isMusicPlaying, which is the same as the isMusicPlaying in this.state.

我們給PlayButton一個(gè)道具叫isMusicPlaying ，這是一樣的isMusicPlaying在this.state 。

class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }handleClick() { if (this.state.isMusicPlaying) { this.setState({ isMusicPlaying: false }); } else { this.setState({ isMusicPlaying: true }); } };render() { return ( <div> <PlayButton isMusicPlaying={this.state.isMusicPlaying} /> </div> ); }}

When the state of Container changes, PlayButton prop will change too, and the PlayButton function will be called again. That means our component will update on the screen.

當(dāng)Container的狀態(tài)更改時(shí)， PlayButton也將更改，并且PlayButton函數(shù)將再次被調(diào)用。這意味著我們的組件將在屏幕上更新。

Inside PlayButton, we can react to the change, because PlayButton gets the props as an argument:

在PlayButton ，我們可以對(duì)更改做出React，因?yàn)镻layButton將props作為參數(shù)：

function PlayButton(props) { const className = props.isMusicPlaying ? 'play active' : 'play'; return <a href="#" title="Play video" className={className} />;}

If we change our state to this.state = { isMusicPlaying: true }; and reload the page, you should see the pause button:

如果我們將狀態(tài)更改為this.state = { isMusicPlaying: true }; 并重新加載頁(yè)面，您應(yīng)該看到“暫停”按鈕：

活動(dòng)作為道具 (Events as Props)

Your props don’t have to be just information. They can be functions.

您的道具不必僅僅是信息。它們可以是函數(shù)。

Now, when we click on the PlayButton, it’ll change the state of Container, which will change the props of PlayButton, which will cause it to update on the page.

現(xiàn)在，當(dāng)我們單擊PlayButton ，它將更改Container的狀態(tài)，這將更改PlayButton的props ，這將使其在頁(yè)面上更新。

關(guān)于setState的壞事 (The Bad Thing About setState)

setState is bad because it doesn’t do stuff right away. React waits a bit to see if there are more changes to make, then it does the state changes.

setState不好，因?yàn)樗粫?huì)立即做任何事情。 React稍等一下，看看是否還有更多更改要進(jìn)行，然后它進(jìn)行狀態(tài)更改。

That means you don’t know for sure what your state will be when you call setState.

這意味著您不確定調(diào)用setState時(shí)的狀態(tài)。

So you shouldn’t do this:

因此，您不應(yīng)該這樣做：

handleClick() { this.setState({ isMusicPlaying: !this.state.isMusicPlaying });};

If you are changing your state based on the old state, you need to do things differently.

如果您要根據(jù)舊狀態(tài)更改狀態(tài)，則需要做不同的事情。

You need to give setState a function, not an object. This function gets the old state as an argument, and returns an object that is the new state.

您需要給setState一個(gè)函數(shù)，而不是一個(gè)對(duì)象。此函數(shù)將舊狀態(tài)作為參數(shù)，并返回一個(gè)新?tīng)顟B(tài)的對(duì)象。

It looks like this:

看起來(lái)像這樣：

handleClick() { this.setState(prevState => { return { isMusicPlaying: !prevState.isMusicPlaying }; });};

It is more difficult, but only needed when you are using the old state to make the new state. If not, you can just give setState an object.

這比較困難，但是只有在使用舊狀態(tài)創(chuàng)建新?tīng)顟B(tài)時(shí)才需要。如果沒(méi)有，您可以給setState一個(gè)對(duì)象。

什么是裁判？ (What Are Refs?)

Let’s make some music happen.

讓我們做些音樂(lè)吧。

First, we add an <audio> tag:

首先，我們添加一個(gè)<aud io>標(biāo)簽：

class Container extends React.Component { constructor(props) { super(props); this.state = { isMusicPlaying: false }; }handleClick() { this.setState(prevState => { return { isMusicPlaying: !prevState.isMusicPlaying }; }); };render() { return ( <div> <PlayButton onClick={this.handleClick.bind(this)} isMusicPlaying={this.state.isMusicPlaying} /> <audio id="audio" /> </div> ); }}

We need a way to get that <audio> tag and call either play() or pause() on it. We could do it with document.getElementById('audio').play() but there’s a better React way.

我們需要一種方法來(lái)獲取<aud IO>標(biāo)簽和呼叫E ither播放() or p上澳洲英語(yǔ)()。我們可以with document.getElementById('audio').做到這一點(diǎn)with document.getElementById('audio'). play()但有更好的React方法。

We give it a prop called ref, which gets called with the <audio> element as the first argument. It takes that <audio> element and assigns it to this.audio.

我們給它提供了一個(gè)名為ref的道具，該道具以<aud io>元素作為第一個(gè)參數(shù)被調(diào)用。它that & lt; audio>元素并將其作為this.audio的signs it t 。

<audio id="audio" ref={(audioTag) => { this.audio = audioTag }} />

This function will be called every time the Container renders, which means this.audio will always be up to date, and equal the <audio> tag.

每次Container渲染時(shí)都會(huì)調(diào)用此函數(shù)，這意味著this.audio將始終是最新的，并且等于<aud io>標(biāo)簽。

We then can play and pause the music:

然后，我們可以播放和暫停音樂(lè)：

handleClick() { if (this.state.isMusicPlaying) { this.audio.pause(); } else { this.audio.play(); } this.setState(prevState => { return { isMusicPlaying: !prevState.isMusicPlaying }; });};

Upload a music file (preferably an mp3 file) using the Choose files button and hit play, and watch it go!

使用“ Choose files按鈕上傳音樂(lè)文件(最好是mp3文件)并點(diǎn)擊播放，然后觀看吧！

移出Index.html (Moving Outside of Index.html)

As you might have guessed, our React shouldn’t live forever inside a <script>tag.

您可能已經(jīng)猜到了，我們的React不應(yīng)永遠(yuǎn)存在于<scri pt>標(biāo)簽中。

React takes a lot of build configuration. Fortunately, tools like Create React App take care of all that for you.

React需要大量的構(gòu)建配置。幸運(yùn)的是，諸如Create React App之類(lèi)的工具可以為您完成所有工作。

Install it to create your own React project. Follow their brief tutorial and start editing the JavaScript inside the src directory, applying all the React knowledge you learned here!

安裝它以創(chuàng)建自己的React項(xiàng)目。遵循他們的簡(jiǎn)短教程，并開(kāi)始應(yīng)用src目錄中的所有React知識(shí)來(lái)編輯src目錄中JavaScript！

恭喜你！ (Congratulations!)

You can now make React things.

您現(xiàn)在可以制作React東西了。

Next, check out a couple of articles for more information. One is about React best practices, the other about a useful part of React called lifecycle methods.

接下來(lái)，查看幾篇文章以獲取更多信息。一個(gè)是關(guān)于React最佳實(shí)踐的，另一個(gè)是關(guān)于React有用部分的生命周期方法。

If you learned something from this article, please click those clappin’ hands, and share it with your friends.

如果您從本文中學(xué)到了一些知識(shí)，請(qǐng)單擊那些拍手的手，并將其分享給您的朋友。

You can also follow me on Medium and Twitter.

您也可以在Medium和Twitter上關(guān)注我。

翻譯自: https://www.freecodecamp.org/news/everything-you-need-to-know-about-react-eaedf53238c4/