【全栈React】第11天: 纯组件

Cciradih 发布于2019-08-20 18:33 / 976人阅读

摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。为了获得更多的性能和简单性，同样允许我们使用正常的函数创建纯粹的，无状态的组件。在中，功能组件被称为一个参数的类似于构造函数类，它们是它所调用的，以及组件树的当前。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3819
原文：https://www.fullstackreact.com/30-days-of-react/day-11/

React提供了几种创建组件的不同方法。今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。

我们已经研究了几种不同的方法来构建反应组件。通过这一点我们遗漏的一种方法是构建React组件的无状态组件/功能方法。

正如我们已经看到的那样，我们只使用React.Component 和React.createClass() 方法构建组件。为了获得更多的性能和简单性，React _同样_允许我们使用正常的JavaScript函数创建纯粹的，无状态的组件。

纯组件可以替换只有 render 功能的组件。而不是使一个完整的组件只是将一些内容呈现到屏幕，我们可以创建一个_纯_一个代替。

_纯_组件是我们可以编写的最简单，最快的组件。它们易于编写，简单易用，以及我们可以撰写的最快的组件。在我们深入_为什么_之前，这些更好，让我们写一个，或者一对！

// The simplest one
const HelloWorld = () => (Hello world);

// A Notification component
const Notification = (props) => {
  const {level, message} = props;
  const classNames = ["alert", "alert-" + level]
  return (
    
      {message}
    
  )
};

// In ES5
var ListItem = function(props) {
  var handleClick = function(event) {
    props.onClick(event);
  };

  return (
    
      
          {props.children}
      
    
  )
}

所以他们只是功能，对吧？是的！由于它们只是函数，所以使用纯JavaScript进行测试非常简单。这个想法是，如果React知道发送到组件中的 props ，知道是否必须重新投递，这可能是确定性的。相同的属性在相同的输出虚拟DOM中。

在React中，功能组件被称为一个参数的props （类似于 React.Component 构造函数类），它们是它所调用的 props ，以及组件树的当前context 。

例如，假设我们想使用功能组件来重写我们原来的 Timer 组件，因为我们希望给用户一个动态的方式来设置自己的时钟风格（24 / 12小时时钟使用不同的分隔符，也许他们不想显示秒数等）。

我们可以将我们的时钟分解成多个组件，我们可以将每个时间段用作单个组件。我们可能像这样打破他们：

const Hour    = (props) => {
  let {hours} = props;
  if (hours === 0) { hours = 12; }
  if (props.twelveHours) { hours -= 12; }
  return ({hours})
}

const Minute  = ({minutes}) => ({minutes<10 && "0"}{minutes})

const Second  = ({seconds}) => ({seconds<10 && "0"}{seconds})

const Separator = ({separator}) => ({separator || ":"})

const Ampm = ({hours}) => ({hours >= 12 ? "pm" : "am"})

通过这些，我们可以通过他们是完整的React组件（它们是）放置单个组件：

Minute: 
Second:

我们可以重构我们的时钟组件来接受 format 字符串，并分解这个字符串，只选择用户感兴趣的组件。有多种方法可以解决这个问题，比如强制逻辑进入Clock 组件_或者_我们可以创建另一个接受格式字符串的无状态组件。让我们这样做（更容易测试）：

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};
}

这是一个有点丑陋的key 和 {...props} 的东西。 React为我们提供了一些帮助映射children的属性，并且通过React.Children 对象来处理每个孩子的唯一key 。

Clock 组件的render() 函数可以大大简化，这要归功于Formatter` 组件：

class Clock extends React.Component {
  state = { currentTime: new Date() }
  componentDidMount() {
    this.setState({
      currentTime: new Date()
    }, this.updateTime);
  }
  componentWillUnmount() {
    if (this.timerId) {
      clearTimeout(this.timerId)
    }
  }

  updateTime = e => {
    this.timerId = setTimeout(() => {
      this.setState({
        currentTime: new Date()
      }, this.updateTime);
    })
  }

  render() {
    const { currentTime } = this.state
    const hour = currentTime.getHours();
    const minute = currentTime.getMinutes();
    const second = currentTime.getSeconds();

    return (
      
        
      
    )
  }
}

我们的 Clock 组件不仅更简单，而且更容易测试。它_也_将帮助我们过渡到使用数据状态树，如Flux / Redux框架，但更多的是在以后。

呃...所以为什么要关心？

在React中使用功能组件的优点是：

我们可以摆脱笨重的组件，没有构造函数，状态，极度愚蠢的生命周期等。

没有this关键字（即不需要绑定）

演示组件（也称为哑组件）强调UI超越业务逻辑（即组件中没有状态操纵）

鼓励建立较小的，独立的组件

强调严格的代码（更好重构）

快速，快速，快速（重要的话要说3遍）

他们是_容易_重用

你可能会说为什么不使用功能组件？那么使用功能组件的一些缺点就会有一些优点：

没有生命周期回调钩子函数

功能有限

没有this 关键字

总的来说，喜欢尝试在其较重的 React.Component 表兄弟中使用功能组件是一个很好的主意。当我们讨论React中的数据管理时，我们将看到我们如何使用这些演示组件与数据作为纯粹的props。

今天工作得不错，我们已经成功实现了React等级。我们现在知道制作React组件的_三种_方法。明天，我们将使用React团队开发的软件包管理工具，使用/构建React应用程序进行设置： create-react-app。

云服务器私有云第7天:CSS入门全栈型全栈的全栈和

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

转载请注明本文地址：https://www.ucloud.cn/yun/84687.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】第2天: 什么是 JSX?

摘要：代表基本上是常规。第次更新，在年完成。几乎完全支持所有主要的浏览器。但这将是一段时间，直到较旧版本的浏览器逐步停止使用。这意味着将转换为。在组件的情况下，写入的将如下所示在我们在第一个作出反应组件使用的语法是语法。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3797原文：https://www.fullstackreact....

Eirunye 2019-08-20 18:29 评论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
【全栈React】第18天: Flux 简介

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

mtunique 2019-08-20 18:35 评论0 收藏0
【全栈React】第30天: 总结和更多的资源

摘要：本文转载自众成翻译译者链接原文我们做到了第天。欢迎来到最后一天恭喜你做到了我们此行的最后一个部分是通过参与。反应社区是活跃成长和友好的。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3800原文：https://www.fullstackreact.com/30-days-of-react/day-30/ 我们做到了！第30天...

Miracle_lihb 2019-08-21 11:52 评论0 收藏0