欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅谈React中组件间抽象

程序员文章站 2022-07-04 19:54:00
关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白,这次决定一探究竟。在组件构建中,通常有一类功能需要被不同的组件公用,此时就涉及抽象的概念,在react中我们主要了...

关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白,这次决定一探究竟。在组件构建中,通常有一类功能需要被不同的组件公用,此时就涉及抽象的概念,在react中我们主要了解mixin和高阶组件。

mixin

mixin的特性广泛存在于各个面向对象语言中,在ruby中,include关键词就是mixin,是将一个模块混入到另外一个模块中,或者是类中。

封装mixin方法

const mixin = function(obj, mixins) {
 const newobj = obj
 newobj.prototype = object.create(obj.prototype)

 for(let props in mixins) {
  newobj.prototype[props] = mixins[props]
 }

 return newobj
}

const bigmixin = {
 fly: () => {
  console.log('i can fly')
 }
}

const big = function() {
 console.log('new big')
}

const flybig = mixin(big , bigmixin)

const flybig = new flybig()
flybig.fly() //'i can fly'

对于广义的mixin方法,就是用赋值的方式将mixin对象里的方法都挂载到原对象上去,来实现对对象的混入。

react中的mixin

react在使用createclass构建组件时提供了mixin属性,如官方的purerendermixin:

import react from 'react'
import purerendermixin from 'react-addons-pure-render-mixin'
react.createclass({
  mixins: [purerendermixin]
  
  render() {
    return <div>foo</foo>
  }
})

在createclass对象参数中传入数组mixins,里面封装了我们所需要的模块,mixins数组也可以增加多个mixin,其每一个mixin方法之间的有重合,对于普通方法和生命周期方法是有所区分的。

在不同的mixin里实现两个名字一样的普通方法,在react中是不会被覆盖的,会在控制台中报一个reactclassinterface里的错误,指出你尝试在组件中多次定义一个方法。**因此在react中是不允许出现崇明普通方法的mixins,如果是react生命周期定义的方法,则会将各个模块的生命周期方法叠加在一起顺序执行**。

我们看到使用createclass的mixin为组价做了两件事情:

1. 工具方法:为组件共享了一些工具类方法,可以在各个组件中使用。

2. 生命周期继承:props和state合并,mixin能够合并生命周期方法,如果有很多mixin来定义componentdidmount这个周期,

那么react会非常智能的将他们合并一起执行。

es6 class和decorator

现在我们比较推崇使用es6 class方法去构建组件,但是它并不支持mixin。官方文档中也没有给出很好的办法。

decorator是es 7 中定义的特性,和java中的注解相似。decorator是运用在运行时的方法,在redux或者其他应用层框架中,越来越多的使用decorator实现对组件的装饰。

core-decorator库为开发者提供了一些实用的decorator,其中实现了我们正想要的@mixin。它将每个mixin对象的方法都叠加到target对象的原型上以达到mixin的目的。

import react, { component } from 'react'
import { mixin } from 'core-decorator'

const puerrender = {
  settheme()
}

const them = {
  settheme()
}

@mixin(puerrender, them)
class mycomponent extends component {
  render() {...}
}

如上decorator只是作用在类上面的,还有作用在方法上面的,它可以控制方法的自有属性。

注意:react 0.14开始剥离mixin

mixin的问题

破坏了原有组件的封装

mixin方法可以混入方法给组件带来新的特性,也会带来新的props和state,这意味着有些不可见的状态需要我们去维护。mixin也有可能存在相互依赖,这样形式依赖链,相互之间会影响。

  1. 命名冲突
  2. 增加复杂性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。