30天入坑React ---------------day11 Pure Components

最新推荐文章于 2024-08-20 08:53:34 发布

小李科技

最新推荐文章于 2024-08-20 08:53:34 发布

阅读量215

点赞数

分类专栏： React React入门30天

React 同时被 2 个专栏收录

68 篇文章

订阅专栏

React入门30天

30 篇文章

订阅专栏

本文深入探讨React中的纯组件概念，讲解如何利用无状态组件提高性能，包括纯组件的定义、优势及应用场景，并通过实例说明如何创建和使用纯组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章是30天React系列的一部分。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

30天的React Mini-Ebook

纯组件

在Github上编辑此页面

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

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

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

一个纯粹的组件可以替换只有一个组件render的功能。我们可以创建一个纯粹的内容，而不是制作一个完整的组件只是为了将一些内容渲染到屏幕上。

纯组件是我们可以编写的最简单，最快速的组件。它们易于编写，易于推理，而且我们可以编写最快的组件。在我们深入了解为什么这些更好之前，让我们写一个，或者说几个！

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

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

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

  return (
    <div className="list">
      <a
        href="#"
        onClick={handleClick}>
          {props.children}
      </a>
    </div>
  )
}

所以它们只是功能，对吗？是的！由于它们只是函数，因此使用纯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 (<span>{hours}</span>)
}

const Minute  = ({minutes}) => (<span>{minutes<10 && '0'}{minutes}</span>)

const Second  = ({seconds}) => (<span>{seconds<10 && '0'}{seconds}</span>)

const Separator = ({separator}) => (<span>{separator || ':'}</span>)

const Ampm = ({hours}) => (<span>{hours >= 12 ? 'pm' : 'am'}</span>)

有了这些，我们可以放置单个组件，因为它们是完整的React组件（它们是）：

<div>Minute: <Minute minutes={12} /></div>
<div>Second: <Second seconds={51} /></div>

我们可以重构我们的时钟组件来接受一个format字符串并分解这个字符串，只选择我们用户有兴趣展示的组件。我们可以通过多种方式处理此问题，例如将逻辑强制转换为Clock组件，或者我们可以创建另一个接受格式字符串的无状态组件。让我们这样做（更容易测试）：

const Formatter = (props) => {
  let children = props.format.split('').map((e, idx) => {
    if (e === 'h') {
      return <Hour key={idx} {...props} />
    } else if (e === 'm') {
      return <Minute key={idx} {...props} />
    } else if (e === 's') {
      return <Second key={idx} {...props} />
    } else if (e === 'p') {
      return <Ampm key={idx} {...props} />
    } else if (e === ' ') {
      return <span key={idx}> </span>;
    } else {
      return <Separator key={idx} {...props} />
    }
  });

  return <span>{children}</span>;
}

这是一个有点丑陋与key和{...props}的thingie在那里。React为我们提供了一些辅助工具，用于映射孩子并负责key通过React.Children对象处理每个孩子的唯一性。

由于组件可以大大简化render()我们Clock组件的功能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 (
      <div className='clock'>
        <Formatter
          {...this.props}
          state={this.state}
          hours={hour}
          minutes={minute}
          seconds={second}
        />
      </div>
    )
  }
}

这不仅是我们的Clock成分多简单，但它是如此更容易测试。这也将帮助我们过渡到使用数据状态的树，像流量/ Redux的框架，但更多的后来者。