【全栈React】第4天: 复杂组件

Mike617 发布于2019-08-20 18:29 / 3068人阅读

摘要：本文转载自众成翻译译者链接原文太棒了，我们已经构建了第一个组件。天前一章节，我们开始构建我们的第一个组件。内容部分内有个不同的项目组件。决定划分组件的深度比科学更显得艺术。子组件当组件嵌套在另一个组件中时，它被称为子组件。

</>复制代码 
本文转载自：众成翻译
译者：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 基本组件，从我们最初的设计抓住了源，并把源文件分别到每个组件。

例如，标题组件包括容器元素

，菜单图标，标题和搜索栏看起来像这样：

</>复制代码 
class Header extends React.Component {
  render() {
    return (
      
        
        Timeline
        
        
      
    )
  }
}

最后，我们可以 Content 使用时间轴项目编写组件。每个时间轴项目被包装在单个组件中，具有与其相关联的头像，时间戳和一些文本。

</>复制代码 
class Content extends React.Component {
  render() {
    return (
      
        
      {/* Timeline item */}
        
          
            
            Doug
          
          
            An hour ago
          
          Ate lunch
          
            2
          
        
        {/* ... */}
      
    )
  }
}

</>复制代码 
为了在 React 组件中编写注释，我们必须将其作为 JavaScript 中的多行注释放在括号中。

把它们放在一起

现在，我们有我们这两个_子组件_，我们可以设置Header和Content组件是App组件的子组件。然后，我们App 组件可以使用这些组件，就像它们是浏览器内置的 HTML 元素一样。我们的新 App 组件包括标题和内容现在看起来像：

</>复制代码 
class App extends React.Component {
  render() {
    return (
      
        
          
          
        
      
    )
  }
}

有了这些知识，我们现在有能力编写多个组件，我们可以开始构建更复杂的应用程序。

但是，您可能会注意到此应用没有任何用户交互或自定义数据。事实上，正如我们现在所说的那样，我们的React应用程序并不比直接构建不复杂的HTML容易。

在下一节中，我们将介绍如何使我们的组件更加动态，并使用 React 进行数据驱动。

云服务器 GPU云服务器 react-router4 python 第4版第4代编程语言 hadoop权威指南第4版

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

转载请注明本文地址：https://www.ucloud.cn/yun/84573.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】第24天: 测试应用

摘要：我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在类中。在我们编写的每个测试中我们都需要将应用呈现在工作测试文档中。作为提醒我们可以使用命令或命令来运行测试。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...

ziwenxie 2019-08-21 11:50 评论0 收藏0
【全栈React】第18天: Flux 简介

摘要：在方法中处理数据有三不同的角色派发器储存视图层我们的组件的主要思想是有一个单一源储存他们只能通过触发更新。这些操作负责调用派发器可以订阅更改并相应地更新自己的数据。与不同不使用派发器而是使用纯函数来定义数据变异函数。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3812原文：https://www.fullstackreact...

mtunique 2019-08-20 18:35 评论0 收藏0
【全栈React】第13天: 重复元素

摘要：在我们的应用中添加太多的复杂度来加载外部数据之前今天我们将快速了解如何在应用中重复组件元素。出于性能原因使用虚拟尝试限制在重新视图时需要更新的元素的数量。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

RaoMeng 2019-08-20 18:33 评论0 收藏0