【全栈React】第13天: 重复元素

RaoMeng 发布于2019-08-20 18:33 / 3119人阅读

摘要：在我们的应用中添加太多的复杂度来加载外部数据之前今天我们将快速了解如何在应用中重复组件元素。出于性能原因使用虚拟尝试限制在重新视图时需要更新的元素的数量。

本文转载自：众成翻译
译者：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数组去重复元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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