本文转载自:众成翻译
译者: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中使用功能组件的优点是: