需求：开发倒计时组件，运营配置倒计时结束时间，倒计时初始化时间从服务端获取，结束之前显示倒计时，倒计时结束之后做对应的操作，比如切换倒计时为其他组件。
组件拆分：
一个业务层容器组件，负责统筹，处理业务逻辑。
一个通用‘倒计时'的组件，向服务端轮询系统时间，计算当前剩余时间，FaCC 的形式提供给 children。
一个倒计时UI组件，对剩余时间格式化以及 UI 展示。
伪代码：
// CountDownContainer.js render() { const { endTime, renderSomethingAfterCountDown, } = this.props; return ( <TimeLeftProvider endTime={endTime} > {seconds => ( seconds > 0 ? <CountDown {...this.props} remainingSeconds={seconds} /> : renderSomethingAfterCountDown() )} </TimeLeftProvider> ); }
// TimeLeftProvider.js export default class TimeLeftProvider extends PureComponent { static propTypes = { children: PropTypes.func, endTime: PropTypes.number, } // ... componentDidMount() { this.poll(); } poll() { queryServerTime(); this.pollTimer = setInterval(() => { queryServerTime(); }, pollInterval * 1000); } countDown() { setInterval(() => { this.setState(prevState => ({ remainingSeconds: prevState.remainingSeconds - 1, })); }, 1000); } render() { const { remainingSeconds, reliable } = this.state; return this.props.children(remainingSeconds, reliable); } }
// CountDown.js function CountDown(props) { const { remainingSeconds, } = props; const numbers = formatSeconds(remainingSeconds); const inputs = ['days', 'hours', 'minutes', 'seconds']; return ( <div styleName={cls}> { inputs.map(key => ({ label: key, number: numbers[key], })).map( //... ) } </div> ); }
最终得到的结果是：
与此同时
代码结构清晰，组件之间各司其职。
组件可复用性强。
单元测试简单，每个组件都只测试自身的逻辑。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: