成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【全棧React】第13天: 重復(fù)元素

RaoMeng / 3112人閱讀

摘要：在我們的應(yīng)用中添加太多的復(fù)雜度來加載外部數(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/

今天，我們將通過如何顯示多個(gè)組件來準(zhǔn)備將外部數(shù)據(jù)引入我們的應(yīng)用。

我們已經(jīng)構(gòu)建了一個(gè)沒有任何外部數(shù)據(jù)的基本應(yīng)用。在我們實(shí)現(xiàn)之前 (我們將在明天開始這個(gè)功能), 讓我們來看看過去兩周中我們所掩蓋的事情:

重復(fù)元素

我們已經(jīng)看到了這之前, 我們已經(jīng)遍歷了一個(gè)對(duì)象列表, 并在屏幕上呈現(xiàn)多個(gè)組件。在我們的應(yīng)用中添加太多的復(fù)雜度來加載外部數(shù)據(jù)之前, 今天我們將快速了解如何在應(yīng)用中重復(fù)組件/元素。

由于 jsx 被瀏覽器視為純 javascript 的, 我們可以使用任何 傳統(tǒng) javascript 內(nèi)的模板標(biāo)簽中的 jsx。我們已經(jīng)看到了這一行動(dòng)。作為一個(gè)快速演示:

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

  )
}

注意模板標(biāo)簽{} 內(nèi)的內(nèi)容看起來簡(jiǎn)單的 javascript。那是因?yàn)樗?只是 javascript。此功能允許我們使用 (大多數(shù)) 的 javascript 在我們的模板標(biāo)簽 包括 原生迭代器, 如 map和 forEach 。

讓我們來看看這是什么意思。讓我們將上一個(gè)示例的 a 值從單個(gè)整數(shù)轉(zhuǎn)換為整數(shù)列表:

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

我們可以將 a 變量映射到我們的組件中, 并返回將為我們構(gòu)建虛擬 DOM 的響應(yīng)組件列表。

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

  )
}

什么是map() 函數(shù)?


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

讓我們更新我們?cè)诘?2天創(chuàng)建的應(yīng)用與我們的 App 組件在這里。讓我們打開我們的src/App.js 文件, 并將 App 組件的內(nèi)容替換為此源。清理一些未使用的變量和您的src/App.js應(yīng)該類似于以下內(nèi)容:

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命令生成的命令再次啟動(dòng)應(yīng)用:npm start, 我們可以看到應(yīng)用在瀏覽器中工作!

但是, 如果我們打開開發(fā)人員控制臺(tái), 我們將看到打印出錯(cuò)誤。此錯(cuò)誤是由以下事實(shí)引起的: React不知道如何跟蹤我們列表中的各個(gè)組件, 因?yàn)樗鼈冎皇强雌饋硐褚粋€(gè)

  • 組件。

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

    此功能非常適合于構(gòu)建 web 應(yīng)用, 但有時(shí)我們必須通過為節(jié)點(diǎn)提供唯一標(biāo)識(shí)符來幫助做出React。在映射列表和渲染組件是其中之一。

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

    讓我們更新映射來設(shè)置key:

    const App = (props) => {
  return (
    
      
      {a.map(i => {
        return 
    • {i}
      • 
      })}
    
    
  )
}
    子組件

    我們?cè)诒局茉缧r(shí)候談到了建立父子關(guān)系的事情, 但是讓我們更詳細(xì)地介紹一下如何訪問父組件中的子組件, 以及如何呈現(xiàn)它們。

    在第11天, 我們構(gòu)建了一個(gè) 組件來處理時(shí)鐘組件中的日期格式, 以使用戶能夠靈活地使用自己的自定義時(shí)鐘渲染?；叵胍幌? 我們所創(chuàng)建的實(shí)現(xiàn)實(shí)際上是相當(dāng)丑陋和相對(duì)復(fù)雜的。

    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 對(duì)象來映射一個(gè)React對(duì)象的列表, 并讓React做這個(gè)自舉。其結(jié)果是一個(gè)更干凈的 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

    我們還沒有談?wù)?b>React.cloneElement() 函數(shù), 所以讓我們簡(jiǎn)單地看看它。
    記得 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() 為我們處理這個(gè)。有時(shí)我們會(huì)想復(fù)制它或添加自定義props/children的組件，而不是創(chuàng)建一個(gè)新的組件實(shí)例 (如果我們已經(jīng)有一個(gè))。所以我們可以保留它創(chuàng)建的相同的屬性。我們可以用React.cloneElement() 來為我們處理這一切。
    

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


    我們要克隆的 ReactElement
    

    我們要添加到實(shí)例中的任何 props

    

    我們希望它有任何children

    


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

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

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

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

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

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

    通過這一點(diǎn), 我們只處理了本地?cái)?shù)據(jù), 而不是真正關(guān)注遠(yuǎn)程數(shù)據(jù) (盡管我們?cè)跇?gòu)建活動(dòng)提要組件時(shí) 已經(jīng) 簡(jiǎn)要地提到了它)。明天, 我們將進(jìn)入與服務(wù)器的互動(dòng), 所以我們可以使用它在我們的React應(yīng)用。

    今天的工作很棒!

    • 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84685.html

    相關(guān)文章

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

      摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(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...

      appetizerio 評(píng)論0 收藏0

    • 【全棧React】第1天: 什么是 React?

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

      ralap 評(píng)論0 收藏0

    • 【全棧React】第3天: 我們的第一個(gè)組件

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

      KaltZK 評(píng)論0 收藏0

    • 【全棧React】第2天: 什么是 JSX?

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

      Eirunye 評(píng)論0 收藏0

    • 【全棧React】第4天: 復(fù)雜組件

      摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文太棒了，我們已經(jīng)構(gòu)建了第一個(gè)組件。天前一章節(jié)，我們開始構(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.fullstackre...

      Mike617 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <