【全棧React】第13天: 重復元素

RaoMeng 發布于2019-08-20 18:33 / 3105人閱讀

摘要：在我們的應用中添加太多的復雜度來加載外部數據之前今天我們將快速了解如何在應用中重復組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時需要更新的元素的數量。

本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3826
原文：https://www.fullstackreact.com/30-days-of-react/day-13/

今天，我們將通過如何顯示多個組件來準備將外部數據引入我們的應用。

我們已經構建了一個沒有任何外部數據的基本應用。在我們實現之前 (我們將在明天開始這個功能), 讓我們來看看過去兩周中我們所掩蓋的事情:

重復元素

我們已經看到了這之前, 我們已經遍歷了一個對象列表, 并在屏幕上呈現多個組件。在我們的應用中添加太多的復雜度來加載外部數據之前, 今天我們將快速了解如何在應用中重復組件/元素。

由于 jsx 被瀏覽器視為純 javascript 的, 我們可以使用任何傳統 javascript 內的模板標簽中的 jsx。我們已經看到了這一行動。作為一個快速演示:

const App = (props) => {
  return (
    
      {a.map(i => {
        return {i}
      })}
    
  )
}

注意模板標簽{} 內的內容看起來簡單的 javascript。那是因為它只是 javascript。此功能允許我們使用 (大多數) 的 javascript 在我們的模板標簽包括原生迭代器, 如 map和 forEach 。

讓我們來看看這是什么意思。讓我們將上一個示例的 a 值從單個整數轉換為整數列表:

const a = [1, 10, 100, 1000, 10000];

我們可以將 a 變量映射到我們的組件中, 并返回將為我們構建虛擬 DOM 的響應組件列表。

const App = (props) => {
  return (
    
      {a.map(i => {
        return {i}
      })}
    
  )
}

什么是map() 函數?

map() 函數是數組中一個原生javascript內置函數的。
它接受在數組的每個元素上運行的函數, 因此, 上面的函數將運行四次, 其值為i 開始為1 , 然后它將再次運行它的第二個值, i將被設置為10 等等等等。

讓我們更新我們在第12天創建的應用與我們的 App 組件在這里。讓我們打開我們的src/App.js 文件, 并將 App 組件的內容替換為此源。清理一些未使用的變量和您的src/App.js應該類似于以下內容:

import React from "react";

const a = [1, 10, 100, 1000, 10000];
const App = (props) => {
  return (
    
      {a.map(i => {
        return {i}
      })}
    
  )
}

export default App

使用create-react-app命令生成的命令再次啟動應用:npm start, 我們可以看到應用在瀏覽器中工作!

但是, 如果我們打開開發人員控制臺, 我們將看到打印出錯誤。此錯誤是由以下事實引起的: React不知道如何跟蹤我們列表中的各個組件, 因為它們只是看起來像一個

組件。

出于性能原因, React使用虛擬 DOM 嘗試限制在重新視圖時需要更新的 DOM 元素的數量。如果沒有任何變化, React不會使瀏覽器更新任何東西以節省工作。

此功能非常適合于構建 web 應用, 但有時我們必須通過為節點提供唯一標識符來幫助做出React。在映射列表和渲染組件是其中之一。

React要求我們通過使用特殊屬性來識別惟一的組件, 這是列表中每個元素的 key 屬性。key 屬性可以是任何我們想要的, 但它 必須是唯一的 的元素。在我們的示例中, 我們可以在 map 中使用i變量, 因為數組中沒有其他元素具有相同的值。

讓我們更新映射來設置key:

const App = (props) => {
  return (
    
      {a.map(i => {
        return {i}
      })}
    
  )
}

子組件

我們在本周早些時候談到了建立父子關系的事情, 但是讓我們更詳細地介紹一下如何訪問父組件中的子組件, 以及如何呈現它們。

在第11天, 我們構建了一個組件來處理時鐘組件中的日期格式, 以使用戶能夠靈活地使用自己的自定義時鐘渲染。回想一下, 我們所創建的實現實際上是相當丑陋和相對復雜的。

const Formatter = (props) => {
  let children = props.format.split("").map((e, idx) => {
    if (e === "h") {
      return 
    } else if (e === "m") {
      return 
    } else if (e === "s") {
      return 
    } else if (e === "p") {
      return 
    } else if (e === " ") {
      return  ;
    } else {
      return 
    }
  });

  return {children};
}

我們可以用React.Children 對象來映射一個React對象的列表, 并讓React做這個自舉。其結果是一個更干凈的 Formatter組件 (不是完美的, 但可使用的):

const Formatter = ({format, state}) => {
  let children = format.split("").map(e => {
    if (e == "h") {
      return 
    } else if (e == "m") {
      return 
    } else if (e == "s") {
      return 
    } else if (e == "p") {
      return 
    } else if (e == " ") {
      return  ;
    } else {
      return 
    }
  });
  return (
      {React.Children
        .map(children, c => React.cloneElement(c, state))}
      )
}

React.cloneElement

我們還沒有談論React.cloneElement() 函數, 所以讓我們簡單地看看它。
記得 WWWWWAAAAAYYYYY（way）回到第2天, 我們看了如何瀏覽器看待 JSX? 它把它變成了類似于如下的 javascript:

React.createElement("div", null, 
  React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
  React.createElement("h1", null, "Welcome back Ari")
);

React.cloneElement() 為我們處理這個。有時我們會想復制它或添加自定義props/children的組件，而不是創建一個新的組件實例 (如果我們已經有一個)。所以我們可以保留它創建的相同的屬性。我們可以用React.cloneElement() 來為我們處理這一切。

React.cloneElement() 和React.createElement() 函數有相同的api，參數所在的位置:

我們要克隆的 ReactElement

我們要添加到實例中的任何 props

我們希望它有任何children

在我們的 Formatter 示例中, 我們正在創建列表中所有子級 (, 等組件) 并將state 對象作為其屬性。

React.Children 的對象提供了一些很好的實用工具來處理children的函數。上面的 Formatter 示例使用 map 函數循環訪問子級, 并在列表中克隆每一個。它為每一個創建一個key (如果需要), 使我們不必自己管理唯一性。

讓我們使用React.Children.map() 函數更新我們的應用組件:

const App = (props) => {
  return (
    
      {React.Children.map(a, i => {i})}
    
  )
}

在瀏覽器中, 一切仍然正常。

在 React.Children 中還有其他一些非常有用的方法，我們將主要使用React.Children.map() 函數，但了解其他可用的對我們來說也是很好的。點擊文檔查看更多列表。

通過這一點, 我們只處理了本地數據, 而不是真正關注遠程數據 (盡管我們在構建活動提要組件時已經簡要地提到了它)。明天, 我們將進入與服務器的互動, 所以我們可以使用它在我們的React應用。

今天的工作很棒!

云服務器 GPU云服務器數組重復元素 list去重復元素 java取出重復元素 js數組去重復元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84685.html

【全棧React】React 30天教程索引

摘要：今天我們將討論創建組件的最終方案，即無狀態函數的純組件。今天我們正在研究一種處理提出的復雜數據的方法，稱為體系結構。第天部署介紹今天，我們將探討部署我們的應用所涉及的不同部分，以便外界可以使用我們的應用。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 評論0 收藏0
【全棧React】第1天: 什么是 React?

摘要：本文轉載自眾成翻譯譯者鏈接原文今天，我們從一開始就開始。讓我們看看是什么，是什么讓運轉起來。什么是是一個用于構建用戶界面的庫。它是應用程序的視圖層。所有應用程序的核心是組件。組件是可組合的。虛擬完全存在于內存中，并且是網絡瀏覽器的的表示。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...

ralap 2019-08-20 18:29 評論0 收藏0
【全棧React】第3天: 我們的第一個組件

摘要：我們的應用由一個單一的元素組成。讓我們通過構建我們的第一個組件來開始接觸這個力量。我們將把組件寫成類。讓我們來看一個我們要調用的組件。然而，什么都不會在屏幕上呈現。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3799原文：https://www.fullstackreact.com/30-days-of-react/day-...

KaltZK 2019-08-20 18:29 評論0 收藏0
【全棧React】第2天: 什么是 JSX?

摘要：代表基本上是常規。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉換為。在組件的情況下，寫入的將如下所示在我們在第一個作出反應組件使用的語法是語法。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

Eirunye 2019-08-20 18:29 評論0 收藏0
【全棧React】第4天: 復雜組件

摘要：本文轉載自眾成翻譯譯者鏈接原文太棒了，我們已經構建了第一個組件。天前一章節，我們開始構建我們的第一個組件。內容部分內有個不同的項目組件。決定劃分組件的深度比科學更顯得藝術。子組件當組件嵌套在另一個組件中時，它被稱為子組件。本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3817原文：https://www.fullstackre...

Mike617 2019-08-20 18:29 評論0 收藏0