React进阶学习之组件的解耦之道
时间：2021-01-09 11:13:44|栏目：JavaScript代码|点击： 次
前言
众所周知，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 组件的解耦重构方法都可以直接拿来运用，最开始可能会觉得有点棘手，但是没关系，只要坚持下来，你就会写出更强壮和可复用的代码。
