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

本文转载自：众成翻译
译者：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 = () => (<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} 的东西。 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 (
      <div className='clock'>
        <Formatter
          {...this.props}
          state={this.state}
          hours={hour}
          minutes={minute}
          seconds={second}
        />
      </div>
    )
  }
}

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

呃...因此为何要关心？

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

• 咱们能够摆脱笨重的组件，没有构造函数，状态，极度愚蠢的生命周期等。
• 没有this关键字（即不须要绑定）
• 演示组件（也称为哑组件）强调UI超越业务逻辑（即组件中没有状态操纵）
• 鼓励创建较小的，独立的组件
• 强调严格的代码（更好重构）
• 快速，快速，快速（重要的话要说3遍）
• 他们是_容易_重用

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

• 没有生命周期回调钩子函数
• 功能有限
• 没有this 关键字

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

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