详解React 代码共享最佳实践方式

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

任何一个项目发展到一定复杂性的时候,必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式:Mixin高阶组件(HOC)修饰器(decorator)Render PropsHook。本文主要就以上几种方式的优缺点作分析,帮助开发者针对业务场景作出更适合的方式。

Mixin

这或许是刚从Vue转向React的开发者第一个能够想到的方法。Mixin一直被广泛用于各种面向对象的语言中,其作用是为单继承语言创造一种类似多重继承的效果。虽然现在React已将其放弃中,但Mixin的确曾是React实现代码共享的一种设计模式。

广义的 mixin 方法,就是用赋值的方式将 mixin 对象中的方法都挂载到原对象上,来实现对象的混入,类似 ES6 中的 Object.assign()的作用。原理如下:

const mixin = function (obj, mixins) {
  const newObj = obj
  newObj.prototype = Object.create(obj.prototype)

  for (let prop in mixins) {
    // 遍历mixins的属性
    if (mixins.hasOwnPrototype(prop)) {
      // 判断是否为mixin的自身属性
      newObj.prototype[prop] = mixins[prop]; // 赋值
    }
  }
  return newObj
};

在 React 中使用 Mixin

假设在我们的项目中,多个组件都需要设置默认的name属性,使用mixin可以使我们不必在不同的组件里写多个同样的getDefaultProps方法,我们可以定义一个mixin

const DefaultNameMixin = {
  getDefaultProps: function () {
    return {
      name: "Joy"
    }
  }
}

为了使用mixin,需要在组件中加入mixins属性,然后把我们写好的mixin包裹成一个数组,将它作为mixins的属性值:

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin]
  render: function () {
    return <h2>Hello {this.props.name}</h2>
  }
})

写好的mixin可以在其他组件里重复使用。

由于mixins属性值是一个数组,意味着我们可以同一个组件里调用多个mixin。在上述例子中稍作更改得到:

const DefaultFriendMixin = {
  getDefaultProps: function () {
    return {
      friend: "Yummy"
    }
  }
}

const ComponentOne = React.createClass({
  mixins: [DefaultNameMixin, DefaultFriendMixin]
  render: function () {
    return (
      <div>
        <h2>Hello {this.props.name}</h2>
        <h2>This is my friend {this.props.friend}</h2>
      </div>
    )
  }
})

我们甚至可以在一个mixin里包含其他的mixin

比如写一个新的mixin``DefaultProps包含以上的DefaultNameMixinDefaultFriendMixin

const DefaultPropsMixin = {
  mixins: [DefaultNameMixin, DefaultFriendMixin]
}

const ComponentOne = React.createClass({
  mixins: [DefaultPropsMixin]
  render: function () {
    return (
      <div>
        <h2>Hello {this.props.name}</h2>
        <h2>This is my friend {this.props.friend}</h2>
      </div>
    )
  }
})

至此,我们可以总结出mixin至少拥有以下优势:

  • 可以在多个组件里使用相同的mixin
  • 可以在同一个组件里使用多个mixin
  • 可以在同一个mixin里嵌套多个mixin

但是在不同场景下,优势也可能变成劣势:

  • 破坏原有组件的封装,可能需要去维护新的stateprops等状态;
  • 不同mixin里的命名不可知,非常容易发生冲突;
  • 可能产生递归调用问题,增加了项目复杂性和维护难度;

除此之外,mixin在状态冲突、方法冲突、多个生命周期方法的调用顺序等问题拥有自己的处理逻辑。感兴趣的同学可以参考一下以下文章:

高阶组件

由于mixin存在上述缺陷,故React剥离了mixin,改用高阶组件来取代它。

高阶组件本质上是一个函数,它接受一个组件作为参数,返回一个新的组件。

React官方在实现一些公共组件时,也用到了高阶组件,比如react-router中的withRouter,以及Redux中的connect。在这以withRouter为例。

默认情况下,必须是经过Route路由匹配渲染的组件才存在this.props、才拥有路由参数、才能使用函数式导航的写法执行this.props.history.push('/next')跳转到对应路由的页面。高阶组件中的withRouter作用是将一个没有被Route路由包裹的组件,包裹到Route里面,从而将react-router的三个对象historylocationmatch放入到该组件的props属性里,因此能实现函数式导航跳转

withRouter的实现原理:

const withRouter = (Component) => {
  const displayName = `withRouter(${Component.displayName || Component.name})`
  const C = props => {
    const { wrappedComponentRef, ...remainingProps } = props
    return (
      <RouterContext.Consumer>
        {context => {
          invariant(
            context,
            `You should not use <${displayName} /> outside a <Router>`
          );
          return (
            <Component
              {...remainingProps}
              {...context}
              ref={wrappedComponentRef}
            />
          )
        }}
      </RouterContext.Consumer>
    )
}

使用代码:

import React, { Component } from "react"
import { withRouter } from "react-router"
class TopHeader extends Component {
  render() {
    return (
      <div>
        导航栏
        {/* 点击跳转login * 

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板