title: react-高階組件
date: 2018-07-11 09:42:35
tags: web
組件間抽象
在React組件的構(gòu)建過程中，常常有這樣的場景，有一類功能需要被不同的組件公用，此時，就涉及抽象的話題，在不同設(shè)計理念下，有許多的抽象方法，而針對React，我們重點討論兩種：mixin和高階組件。
mixin
mixin的特性一直廣泛存在于各種面向?qū)ο笳Z言中。比如在Ruby中，include關(guān)鍵詞即是mixin。是將一個模塊混入到一個另一個模塊中，或是一個類中。
為什么編程語言要引入這樣一種特性呢？
事實上，包括C++等一些年齡較大的OOP語言，它們都有一個強(qiáng)大但危險的多重繼承特性。在現(xiàn)代語言中，為了權(quán)衡利弊，大都舍棄了多重繼承，只采用單繼承，但單繼承在實現(xiàn)抽象時有很多不方便的地方，為了彌補(bǔ)缺失，java引入了接口interface。其他一些語言則引入了像mixin的技巧。
封裝mixin方法
const mixin = function(obj,mixins){
const newObj = obj;
newObj.prototype = Object.create(obj.prototype);
for(let prop in mixins){
if(mixins.hasOwnProperty(prop)){
newObj.prototype[prop] = mixins[prop];
}
}
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(); //=>'new big'
flyBig.fly(); //=> 'I can fly'
從上面的代碼，我們不難看出，對于廣義的mixin方法，就是用賦值的方式將mixin對象里的方法都掛載到原對象上，來實現(xiàn)對對象的混入。
從上述的實現(xiàn)，我們可以聯(lián)想到 underscore庫中的extend 或 lodash庫中的 assign方法，或者說ES6中的Object.assign()方法。
在react中使用mixin
在官方封裝的'reat-addons-pure-render-mixin'；在git上沒找到相關(guān)的有價值的庫，應(yīng)該是react認(rèn)為mixin是一種反模式形式。
但是發(fā)現(xiàn)了react-immutable-render-mixin這樣的庫。只是很久沒維護(hù)了，不建議使用
參考鏈接
我們可以看到，使用createClass實現(xiàn)的mixin為組件做了兩件事。
工具方法:這是mixin的基本功能，如果你想共享一些工具類方法，就可以定義它們，直接在各個組件中使用。
生命周期繼承:prips與state合并。這是mixin特別重要的功能，
ES6 Classes 與 decorator
然而，使用我們推薦的ES6 classes形勢構(gòu)建組件時，它并不支持mixin。React文檔中也未能給出解決方法。
要在class的基礎(chǔ)上封裝mixin，就要說到class的本質(zhì)。ES6并沒有改變js面向?qū)ο蠓椒ɑ谠偷谋举|(zhì)，不過再次智商提供了一些語法糖。class就是其中之一。
對于是按mixin方法來說，這就沒什么不一樣了。接下來我們來聊聊另一個語法糖decorator。正巧可以用來實現(xiàn)class的mixin。
decorator 是ES7定義的新特性，與java 的 pre-defined annotation（預(yù)定義注解）相似。但與java 的annotation 不同的是，decorator是運用在運行時的方法，在Redux或其他一些應(yīng)用層框架中，越來越多的使用decorator以實現(xiàn)對組件的修飾。
這樣我們就可以使用@mixin。
import {getOwnPropertyDescriptors} from './private/utils';
const { defineProperty } = Object;
function handleClass(target,mixins){
if(!mixins.length){
throw new SyntaxError('@mixin() class .....')
}
for(let i=0;i<mixins.length;i++){
const descs = getOwnPropertyDescriptors(mixins[i]);
for(const key in descs){
if(!(key in target.prototype)){
defineProperty(target.prototype,key,descs[key])
}
}
}
}
export default function mixin(...mixins){
if(typeof mixins[0] == 'function'){
return handelClass(mixins[0],[]);
}
else{
return target=>{
return handleClass(target,mixins);
}
}
}
可以看到，源代碼十分簡單，它將每一個mixin對象的方法都跌價到target 對象的原型上以達(dá)到mixin的目的，這樣，就可以用@mixin來做多個重用模塊的疊加了。
對于react，我們自然可以用上述方法來實現(xiàn)mixin。但不幸的是，社區(qū)從0.14版本開始漸漸開始剝離mixin。那么，到底是什么原因?qū)е耺ixin成為反模式了呢？
mixin問題
- 破壞了原有組件的封裝
- 命名沖突
- 增加復(fù)雜性
針對這些困擾，React社區(qū)提出來新的方式來取代mixin，那就是高階組件。
高階組件(Higher-Order Components)
高階組件（HOC）是 React 中用于重用組件邏輯的高級技術(shù)。 HOC 本身不是 React API 的一部分。 它們是從 React 構(gòu)思本質(zhì)中浮現(xiàn)出來的一種模式。
具體來說，高階組件是一個函數(shù)，能夠接受一個組件并返回一個新的組件。
在我們項目中使用react-redux框架的時候，有一個connect的概念，這里的connect其實就是一個高階組件。也包括類似react-router-dom中的withRouter的概念
構(gòu)建一個簡單的hoc
function hello (){
console.log("hello i love react ")
}
function hoc(fn){
return ()=>{
console.log("first");
fn();
console.log("end");
}
}
hello = hoc(hello);
hello();
實現(xiàn)高階組件的方法
實現(xiàn)高階組件的方法有如下兩種：
- 屬性代理。高階組件通過唄包裹的React組件來操作props
- 反向繼承。高階組件繼承于被包裹的React組件
接下來我們分別來闡述這兩種方法。
屬性代理
屬性代理是我們react中常見高階組件的實現(xiàn)方法，我們通過一個例子來說明：
import React,{Component} from 'react';
const MyContainer = (WraooedComponent) =>
class extends Component {
render(){
return <WrappedComponent {...this.props} />
}
}
從這里看到最重要部分是render 方法中返回了傳入 WrappedComponent的React組件。這樣，我們就可以通過高階組件來傳遞props。這種方法即為屬性代理。
自然，我們想要使用MyContainer這個高階組件就變得非常容易：
import React,{Component} from 'react';
class MyComponent extends Component{
//...
}
export default MyContainer(MyComponent);
這樣組件就可以一層層地作為參數(shù)被調(diào)用，原始組件就具備了高階組件對它的修飾。就這么簡單，保持單個組件封裝性的同時還保留了易用性。當(dāng)然，我們也可以用decorator來轉(zhuǎn)換。
當(dāng)使用屬性代理構(gòu)建高階組件時，調(diào)用順序不同于mixin。上述執(zhí)行生命周期的過程類似于堆棧調(diào)用：
didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount
反向繼承
另一種構(gòu)建高階組件的方法稱為反向繼承，從字面意思上看，它一定與繼承性相關(guān)。我們同樣來看一個簡單的實現(xiàn)。
const MyContainer = (WrappedComponent)=>{
class extends WrappedComponent {
render(){
return super.render();
}
}
}
如上代碼。高階組件返回的組件繼承于 WrappedComponent 。因為被動地繼承了 WrappedComponent，所有的調(diào)用都會反向，這也是種方法的由來。
這種方法與屬性代理不太一樣。它通過繼承WrappedComponent來實現(xiàn)，方法可以通過super來順序調(diào)用。因為依賴于繼承機(jī)制。HOC的調(diào)用順序和隊列是一樣的。
didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)
在反向繼承方法中，高階組件可以使用 WrappedComponent 引用，這意味著它可以使用 WrappedComponent 的state 、props。生命周期和render方法。但它不能保證完整的子組件樹被解析。它有兩個比較大的特點，下面我們展開來講一講。
渲染劫持
渲染劫持就是指的是高階組件可以控制 WrappedComponent的渲染過程，并渲染各種各樣的結(jié)果。我們可以在這個過程中在任何React元素輸出的結(jié)果中讀取、增加、修改、刪除props，或讀取或修改React元素樹，或條件顯示。又或者用樣式包裹元素樹
控制state
高階組件可以讀取、修改或刪除WrappedComponent實例中的state，如果需要的話，也可以增加state。
組件命名
當(dāng)包裹一個高階組件時，我們失去了原始 WrappedComponent的displayName，而組件名字是方便我們開發(fā)與調(diào)試的重要屬性。
組件參數(shù)
有時，我們調(diào)用高階組件需要傳入一些參數(shù)，這可以用非常簡單的方式來實現(xiàn)。
import React from 'react'
function HOCFactoryFactory(...params){
return function HOCFactory(WrappedComponent){
return class HOC extends Component{
render(){
return <WrappedComponent {...this.props} />
}
}
}
}
當(dāng)你使用的時候，可以這么寫：
HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)
class WrappedComponent extends React.Component{}
這也是利用了函數(shù)式編程的特征。可見，在React抽象的過程中，處處可見它的影子。
