React框架,利用redux的功能----解耦

迈不过友情╰ 2022-06-02 07:51 243阅读 0赞

# [React 组件解耦之道][React] #

*    
    
 *

> React 的组件非常的`灵活可扩展`，不过随着业务复杂度的增加和许多外部工具库的引入，组件往往也会显得`浮肿`，接下来我们就一起来看看常见的几种，遵循`单一职责原则`的，组件`分割与解耦`的方法

## 分割 render 函数 ##

当一个组件渲染的内容较多时，有一个快速并且通用的方法是创建`sub-render`函数来简化原来庞大的 render

class Panel extends React.Component {
      renderHeading() {
        // ...
      }
    
      renderBody() {
        // ...
      }
    
      render() {
        return (
          <div> {this.renderHeading()} {this.renderBody()} </div>
        );
      }
    }

为了再次简化`sub-render`函数，我们还可以采用`Functional Components`写法，这种方式生成了更小的处理单元，且更有利于测试

## 用 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() {
        // ...
      }
    }

然而它却存在`代码不能复用`，`组件重构困难`等问题

我们可以使用`高阶组件`来解决这些问题，顾名思义，高阶组件就是一个函数，传给它一个组件，它返回一个新的组件

简化代码如下

class Document extends React.Component {
      render() {
        // ...
      }
    }
    
    export default withLinkAnalytics((props) => ({
      documentId: props.documentId
    }), Document);

## 总结 ##

以上 3 个 React 组件的`解耦重构`方法都可以直接拿来运用，最开始可能会觉得有点棘手，但是没关系，只要坚持下来，你就会写出更强壮和可复用的代码

`原文链接`: [Techniques for decomposing React components (David Tang)][Techniques for decomposing React components _David Tang]

[React]: https://segmentfault.com/a/1190000010051000
[Techniques for decomposing React components _David Tang]: http://t.cn/Rok5pUr