淺談React中組件間抽象

2024-05-06 16:42:08

字體：大中小

來源：轉載

供稿：網友

關于今天要學習的組件間抽象其實我這小白看了幾次還沒弄明白，這次決定一探究竟。在組件構建中，通常有一類功能需要被不同的組件公用，此時就涉及抽象的概念，在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也有可能存在相互依賴，這樣形式依賴鏈，相互之間會影響。