主页 / 网络编程 /

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

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

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

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包含以上的DefaultNameMixin和DefaultFriendMixin 

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；

在不同场景下，优势也可能变成劣势

  • 破坏原有组件的封装，可能需要去维护新的state和props等状态；
  • 不同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的三个对象history、location、match放入到该组件的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
上一篇：JavaScript继承的三种方法实例 下一篇：Vue Element前端应用开发之获取后端数据

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by