資訊專欄INFORMATION COLUMN
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文太棒了，我們已經(jīng)構(gòu)建了第一個(gè)組件。天前一章節(jié)，我們開(kāi)始構(gòu)建我們的第一個(gè)組件。內(nèi)容部分內(nèi)有個(gè)不同的項(xiàng)目組件。決定劃分組件的深度比科學(xué)更顯得藝術(shù)。子組件當(dāng)組件嵌套在另一個(gè)組件中時(shí)，它被稱為子組件。
本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3817
原文：https://www.fullstackreact.com/30-days-of-react/day-4/
太棒了，我們已經(jīng)構(gòu)建了第一個(gè)組件?，F(xiàn)在讓我們來(lái)看一下，開(kāi)始構(gòu)建一個(gè)更復(fù)雜的界面。
React 30天 前一章節(jié)，我們開(kāi)始構(gòu)建我們的第一個(gè) React 組件。在本節(jié)中，我們將繼續(xù)使用我們的App 組件，并開(kāi)始構(gòu)建一個(gè)更復(fù)雜的UI。
我們可能會(huì)看到一個(gè)常見(jiàn)的網(wǎng)頁(yè)元素是用戶時(shí)間軸。例如，我們可能會(huì)有一個(gè)應(yīng)用顯示事件發(fā)生的歷史，如Facebook和Twitter等應(yīng)用。
我們_可以_在單個(gè)組件中構(gòu)建整個(gè)UI。然而，在單個(gè)組件中構(gòu)建整個(gè)應(yīng)用不是一個(gè)好主意，因?yàn)樗赡芊浅４?，?fù)雜且難以測(cè)試。
class Timeline extends React.Component {
render() {
return (
Timeline
An hour ago
Ate lunch
10 am
Read Day two article
10 am
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
2:21 pm
Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
)
}
}
拆分一下
比將其構(gòu)建在單個(gè)組件中更好的做法是，我們將其分解成多個(gè)組件。
看這個(gè)組件，整個(gè)大組件有兩個(gè)獨(dú)立的部分：
標(biāo)題欄
內(nèi)容
我們可以將組件的內(nèi)容部分劃分成個(gè)別的關(guān)注點(diǎn)。內(nèi)容部分內(nèi)有3個(gè)不同的_項(xiàng)目_組件。
如果我們想進(jìn)一步，我們甚至可以將標(biāo)題欄分解成3個(gè)組件，_菜單_按鈕，_標(biāo)題_和_搜索_圖標(biāo)。如果我們需要，我們可以進(jìn)一步深入每一個(gè)。
決定劃分組件的深度比科學(xué)更顯得藝術(shù)。
在任何情況下，在應(yīng)用中開(kāi)始尋找使用的_組件_想法通常是一個(gè)好主意。通過(guò)將我們的應(yīng)用分解成組件，變得更容易測(cè)試，更容易跟蹤哪些功能在哪里。
容器組件要構(gòu)建我們的通知應(yīng)用，讓我們開(kāi)始構(gòu)建容器來(lái)保存整個(gè)應(yīng)用。我們的容器只是另外兩個(gè)組件的包裝器。
這些組件都不需要特殊的功能，它們看起來(lái)類似于我們的 HelloWorld 組件，因?yàn)樗皇且粋€(gè)具有單個(gè)渲染功能的組件。
我們來(lái)構(gòu)建一個(gè)我們將要調(diào)用的_包裝器_組件 App ，它們可能類似于：
class App extends React.Component {
render() {
return (
{/* content goes here */}
)
}
}
子組件請(qǐng)注意，我們使用 React 中調(diào)用的屬性 className，而不是 HTML 版本 class。請(qǐng)記住，我們不是直接寫(xiě) DOM，因此不會(huì)寫(xiě) HTML，而是 JSX（這只是JavaScript）。
我們使用 className 的原因 class 是 JavaScript 是一個(gè)保留字。
當(dāng)組件嵌套在另一個(gè)組件中時(shí)，它被稱為 子組件。組件可以有多個(gè)子組件。然后將使用子組件的組件稱為 父組件。
隨著容器組件的定義，我們可以建立我們 title 和 content 基本組件，從我們最初的設(shè)計(jì)抓住了源，并把源文件分別到每個(gè)組件。
例如，標(biāo)題組件包括 容器元素 最后，我們可以 Content 使用時(shí)間軸項(xiàng)目編寫(xiě)組件。每個(gè)時(shí)間軸項(xiàng)目被包裝在單個(gè)組件中，具有與其相關(guān)聯(lián)的頭像，時(shí)間戳和一些文本。 Ate lunch 為了在 React 組件中編寫(xiě)注釋，我們必須將其作為 JavaScript 中的多行注釋放在括號(hào)中。 現(xiàn)在，我們有我們這兩個(gè)_子組件_，我們可以設(shè)置Header和Content組件是App組件的子組件。然后，我們App 組件可以使用這些組件，就像它們是瀏覽器內(nèi)置的 HTML 元素一樣。我們的新 App 組件包括標(biāo)題和內(nèi)容現(xiàn)在看起來(lái)像： 有了這些知識(shí)，我們現(xiàn)在有能力編寫(xiě)多個(gè)組件，我們可以開(kāi)始構(gòu)建更復(fù)雜的應(yīng)用程序。 但是，您可能會(huì)注意到此應(yīng)用沒(méi)有任何用戶交互或自定義數(shù)據(jù)。事實(shí)上，正如我們現(xiàn)在所說(shuō)的那樣，我們的React應(yīng)用程序并不比直接構(gòu)建不復(fù)雜的HTML容易。 在下一節(jié)中，我們將介紹如何使我們的組件更加動(dòng)態(tài)，并使用 React 進(jìn)行 數(shù)據(jù)驅(qū)動(dòng)。 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84573.html ，菜單圖標(biāo)，標(biāo)題和搜索欄 看起來(lái)像這樣：
class Header extends React.Component {
render() {
return (
Timeline
)
}
}
class Content extends React.Component {
render() {
return (
{/* Timeline item */}
)
}
}
{/* ... */}
Doug
An hour ago
2
把它們放在一起
class App extends React.Component {
render() {
return (
)
}
}
摘要：今天我們將討論創(chuàng)建組件的最終方案，即無(wú)狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復(fù)雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們從一開(kāi)始就開(kāi)始。讓我們看看是什么，是什么讓運(yùn)轉(zhuǎn)起來(lái)。什么是是一個(gè)用于構(gòu)建用戶界面的庫(kù)。它是應(yīng)用程序的視圖層。所有應(yīng)用程序的核心是組件。組件是可組合的。虛擬完全存在于內(nèi)存中，并且是網(wǎng)絡(luò)瀏覽器的的表示。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...
摘要：我們的第一個(gè)假設(shè)是非常簡(jiǎn)單的測(cè)試。我們正在測(cè)試以確保元素被包裝在類中。在我們編寫(xiě)的每個(gè)測(cè)試中我們都需要將應(yīng)用呈現(xiàn)在工作測(cè)試文檔中。作為提醒我們可以使用命令或命令來(lái)運(yùn)行測(cè)試。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...
摘要：在方法中處理數(shù)據(jù)有三不同的角色派發(fā)器儲(chǔ)存視圖層我們的組件的主要思想是有一個(gè)單一源儲(chǔ)存他們只能通過(guò)觸發(fā)更新。這些操作負(fù)責(zé)調(diào)用派發(fā)器可以訂閱更改并相應(yīng)地更新自己的數(shù)據(jù)。與不同不使用派發(fā)器而是使用純函數(shù)來(lái)定義數(shù)據(jù)變異函數(shù)。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3812原文：https://www.fullstackreact...
摘要：在我們的應(yīng)用中添加太多的復(fù)雜度來(lái)加載外部數(shù)據(jù)之前今天我們將快速了解如何在應(yīng)用中重復(fù)組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時(shí)需要更新的元素的數(shù)量。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...
閱讀 2633·2021-11-19 09:59
閱讀 2126·2019-08-30 15:55
閱讀 1008·2019-08-29 13:30
閱讀 1408·2019-08-26 10:18
閱讀 3152·2019-08-23 18:36
閱讀 2451·2019-08-23 18:25
閱讀 1232·2019-08-23 18:07
閱讀 500·2019-08-23 17:15
