本文转载自:众成翻译
译者: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
。