React 的组件非常的
灵活可扩展
,不过随着业务复杂度的增加和许多外部工具库的引入,组件往往也会显得浮肿
,接下来我们就一起来看看常见的几种,遵循单一职责原则
的,组件分割与解耦
的方法
分割 render 函数
当一个组件渲染的内容较多时,有一个快速并且通用的方法是创建sub-render
函数来简化原来庞大的 render
class Panel extends React.Component { renderheading() { // ... } renderBody() { // ... } render() { return ( <div> {this.renderheading()} {this.renderBody()} </div> ); } }
为了再次简化sub-render
函数,我们还可以采用Functional Components
写法,这种方式生成了更小的处理单元,且更有利于测试
const PanelHeader = (props) => ( // ... ); const PanelBody = (props) => ( // ... ); class Panel extends React.Component { render() { return ( <div> // Nice and explicit about which props are used <PanelHeader title={this.props.title}/> <PanelBody content={this.props.content}/> </div> ); } }
用 props 传递元素
如果一个组件的状态或配置较多,我们可以运用props
传递元素而不仅是数据,比如再声明一个组件,使其中的父组件只专注于配置
class CommentTemplate extends React.Component { static propTypes = { // Declare slots as type node Metadata: PropTypes.node,actions: PropTypes.node,}; render() { return ( <div> <Commentheading> <Avatar user={...}/> // Slot for Metadata <span>{this.props.Metadata}</span> </Commentheading> <CommentBody/> <CommentFooter> <Timestamp time={...}/> // Slot for actions <span>{this.props.actions}</span> </CommentFooter> </div> ); } }
父组件
class Comment extends React.Component { render() { const Metadata = this.props.publishTime ? <PublishTime time={this.props.publishTime} /> : <span>Saving...</span>; const actions = []; if (this.props.isSignedIn) { actions.push(<LikeAction />); actions.push(<ReplyAction />); } if (this.props.isAuthor) { actions.push(<DeleteAction />); } return <CommentTemplate Metadata={Metadata} actions={actions} />; } }
使用高阶组件
实现点击某组件的超链接,发送该组件的 ID,我们大多的解决方法可能如下
class Document extends React.Component { componentDidMount() { ReactDOM.findDOMNode(this).addEventListener('click',this.onClick); } componentwillUnmount() { ReactDOM.findDOMNode(this).removeEventListener('click',this.onClick); } onClick = (e) => { if (e.target.tagName === 'A') { // Naive check for <a> elements sendAnalytics('link clicked',{ documentId: this.props.documentId // Specific information to be sent }); } }; render() { // ... } }
然而它却存在代码不能复用
,组件重构困难
等问题
我们可以使用高阶组件
来解决这些问题,顾名思义,高阶组件就是一个函数,传给它一个组件,它返回一个新的组件
function withLinkAnalytics(mapPropsToData,WrappedComponent) { class LinkAnalyticsWrapper extends React.Component { componentDidMount() { ReactDOM.findDOMNode(this).addEventListener('click',this.onClick); } componentwillUnmount() { ReactDOM.findDOMNode(this).removeEventListener('click',this.onClick); } onClick = (e) => { if (e.target.tagName === 'A') { // Naive check for <a> elements const data = mapPropsToData ? mapPropsToData(this.props) : {}; sendAnalytics('link clicked',data); } }; render() { // Simply render the WrappedComponent with all props return <WrappedComponent {...this.props} />; } } return LinkAnalyticsWrapper; }
简化代码如下
class Document extends React.Component { render() { // ... } } export default withLinkAnalytics((props) => ({ documentId: props.documentId }),Document);
总结
以上 3 个 React 组件的解耦重构
方法都可以直接拿来运用,最开始可能会觉得有点棘手,但是没关系,只要坚持下来,你就会写出更强壮和可复用的代码
原文链接
: Techniques for decomposing React components
原文地址:https://www.jb51.cc/react/303610.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。