[译]React 组件解耦之道

gl8661 2年前
   <p>React 的组件非常的 灵活可扩展 ,不过随着业务复杂度的增加和许多外部工具库的引入,组件往往也会显得 浮肿 ,接下来我们就一起来看看常见的几种,遵循 单一职责原则 的,组件 分割与解耦 的方法</p>    <h2>分割 render 函数</h2>    <p>当一个组件渲染的内容较多时,有一个快速并且通用的方法是创建 sub-render 函数来简化原来庞大的 render</p>    <pre>  <code class="language-javascript">class Panel extends React.Component {    renderHeading() {      // ...    }      renderBody() {      // ...    }      render() {      return (        <div>          {this.renderHeading()}          {this.renderBody()}        </div>      );    }  }</code></pre>    <p>为了再次简化 sub-render 函数,我们还可以采用 Functional Components 写法,这种方式生成了更小的处理单元,且更有利于测试</p>    <pre>  <code class="language-javascript">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>      );    }  }</code></pre>    <h2>用 props 传递元素</h2>    <p>如果一个组件的状态或配置较多,我们可以运用 props 传递元素而不仅是数据,比如再声明一个组件,使其中的父组件 只专注于配置</p>    <pre>  <code class="language-javascript">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>      );    }  }</code></pre>    <p>父组件</p>    <pre>  <code class="language-javascript">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} />;    }  }</code></pre>    <h2>使用高阶组件</h2>    <p>实现点击某组件的超链接,发送该组件的 ID,我们大多的解决方法可能如下</p>    <pre>  <code class="language-javascript">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() {      // ...    }  }</code></pre>    <p>然而它却存在 代码不能复用 , 组件重构困难 等问题</p>    <p>我们可以使用 高阶组件 来解决这些问题,顾名思义,高阶组件就是一个函数,传给它一个组件,它返回一个新的组件</p>    <pre>  <code class="language-javascript">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;  }</code></pre>    <p>简化代码如下</p>    <pre>  <code class="language-javascript">class Document extends React.Component {    render() {      // ...    }  }    export default withLinkAnalytics((props) => ({    documentId: props.documentId  }), Document);</code></pre>    <h2>总结</h2>    <p>以上 3 个 React 组件的 解耦重构 方法都可以直接拿来运用,最开始可能会觉得有点棘手,但是没关系,只要坚持下来,你就会写出更强大和可复用的代码</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000010051000</p>    <p> </p>