資訊專欄INFORMATION COLUMN
摘要：本文轉載自眾成翻譯譯者鏈接原文太棒了，我們已經構建了第一個組件。天前一章節，我們開始構建我們的第一個組件。內容部分內有個不同的項目組件。決定劃分組件的深度比科學更顯得藝術。子組件當組件嵌套在另一個組件中時，它被稱為子組件。
本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3817
原文：https://www.fullstackreact.com/30-days-of-react/day-4/
太棒了，我們已經構建了第一個組件。現在讓我們來看一下，開始構建一個更復雜的界面。
React 30天 前一章節，我們開始構建我們的第一個 React 組件。在本節中，我們將繼續使用我們的App 組件，并開始構建一個更復雜的UI。
我們可能會看到一個常見的網頁元素是用戶時間軸。例如，我們可能會有一個應用顯示事件發生的歷史，如Facebook和Twitter等應用。
我們_可以_在單個組件中構建整個UI。然而，在單個組件中構建整個應用不是一個好主意，因為它可能非常大，復雜且難以測試。
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.
)
}
}
拆分一下
比將其構建在單個組件中更好的做法是，我們將其分解成多個組件。
看這個組件，整個大組件有兩個獨立的部分：
標題欄
內容
我們可以將組件的內容部分劃分成個別的關注點。內容部分內有3個不同的_項目_組件。
如果我們想進一步，我們甚至可以將標題欄分解成3個組件，_菜單_按鈕，_標題_和_搜索_圖標。如果我們需要，我們可以進一步深入每一個。
決定劃分組件的深度比科學更顯得藝術。
在任何情況下，在應用中開始尋找使用的_組件_想法通常是一個好主意。通過將我們的應用分解成組件，變得更容易測試，更容易跟蹤哪些功能在哪里。
容器組件要構建我們的通知應用，讓我們開始構建容器來保存整個應用。我們的容器只是另外兩個組件的包裝器。
這些組件都不需要特殊的功能，它們看起來類似于我們的 HelloWorld 組件，因為它只是一個具有單個渲染功能的組件。
我們來構建一個我們將要調用的_包裝器_組件 App ，它們可能類似于：
class App extends React.Component {
render() {
return (
{/* content goes here */}
)
}
}
子組件請注意，我們使用 React 中調用的屬性 className，而不是 HTML 版本 class。請記住，我們不是直接寫 DOM，因此不會寫 HTML，而是 JSX（這只是JavaScript）。
我們使用 className 的原因 class 是 JavaScript 是一個保留字。
當組件嵌套在另一個組件中時，它被稱為 子組件。組件可以有多個子組件。然后將使用子組件的組件稱為 父組件。
隨著容器組件的定義，我們可以建立我們 title 和 content 基本組件，從我們最初的設計抓住了源，并把源文件分別到每個組件。
例如，標題組件包括 容器元素 最后，我們可以 Content 使用時間軸項目編寫組件。每個時間軸項目被包裝在單個組件中，具有與其相關聯的頭像，時間戳和一些文本。 Ate lunch 為了在 React 組件中編寫注釋，我們必須將其作為 JavaScript 中的多行注釋放在括號中。 現在，我們有我們這兩個_子組件_，我們可以設置Header和Content組件是App組件的子組件。然后，我們App 組件可以使用這些組件，就像它們是瀏覽器內置的 HTML 元素一樣。我們的新 App 組件包括標題和內容現在看起來像： 有了這些知識，我們現在有能力編寫多個組件，我們可以開始構建更復雜的應用程序。 但是，您可能會注意到此應用沒有任何用戶交互或自定義數據。事實上，正如我們現在所說的那樣，我們的React應用程序并不比直接構建不復雜的HTML容易。 在下一節中，我們將介紹如何使我們的組件更加動態，并使用 React 進行 數據驅動。 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。 轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84573.html ，菜單圖標，標題和搜索欄 看起來像這樣：
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 (
)
}
}
摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們從一開始就開始。讓我們看看是什么，是什么讓運轉起來。什么是是一個用于構建用戶界面的庫。它是應用程序的視圖層。所有應用程序的核心是組件。組件是可組合的。虛擬完全存在于內存中，并且是網絡瀏覽器的的表示。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...
摘要：我們的第一個假設是非常簡單的測試。我們正在測試以確保元素被包裝在類中。在我們編寫的每個測試中我們都需要將應用呈現在工作測試文檔中。作為提醒我們可以使用命令或命令來運行測試。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...
摘要：在方法中處理數據有三不同的角色派發器儲存視圖層我們的組件的主要思想是有一個單一源儲存他們只能通過觸發更新。這些操作負責調用派發器可以訂閱更改并相應地更新自己的數據。與不同不使用派發器而是使用純函數來定義數據變異函數。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3812原文：https://www.fullstackreact...
摘要：在我們的應用中添加太多的復雜度來加載外部數據之前今天我們將快速了解如何在應用中重復組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時需要更新的元素的數量。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...
閱讀 2444·2021-11-19 09:59
閱讀 1973·2019-08-30 15:55
閱讀 930·2019-08-29 13:30
閱讀 1330·2019-08-26 10:18
閱讀 3081·2019-08-23 18:36
閱讀 2382·2019-08-23 18:25
閱讀 1156·2019-08-23 18:07
閱讀 430·2019-08-23 17:15
