【全栈React】第11天: 纯组件
React提供了几种创建组件的不同方法。今天我们将讨论创建组件的最终方案,即无状态函数的纯组件。 我们已经研究了几种不同的方法来构建反应组件。 通过这一点我们遗漏的一种方法是构建React组件的无状态组件/功能方法。 正如我们已经看到的那样,我们只使用 纯组件可以替换只有 _纯_组件是我们可以编写的最简单,最快的组件。 它们易于编写,简单易用,以及我们可以撰写的最快的组件。 在我们深入_为什么_之前,这些更好,让我们写一个,或者一对! // 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知道发送到组件中的 在React中,功能组件被称为一个参数 的 例如,假设我们想使用功能组件来重写我们原来的 我们可以将我们的时钟分解成多个组件,我们可以将每个时间段用作单个组件。 我们可能像这样打破他们: 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> 我们可以重构我们的时钟组件来接受 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>; } 这是一个有点丑陋的 Clock 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> ) } } 我们的 呃...所以为什么要关心?在React中使用功能组件的优点是:
你可能会说为什么不使用功能组件?那么使用功能组件的一些缺点就会有一些优点:
总的来说,喜欢尝试在其较重的 今天工作得不错,我们已经成功实现了React等级。我们现在知道制作React组件的_三种_方法。明天,我们将使用React团队开发的软件包管理工具,使用/构建React应用程序进行设置: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |