title: react-高階組件
date: 2018-07-11 09:42:35
tags: web
組件間抽象
在React組件的構(gòu)建過程中灰署，常常有這樣的場景速客，有一類功能需要被不同的組件公用吨艇，此時(shí)与斤，就涉及抽象的話題奕短，在不同設(shè)計(jì)理念下古掏，有許多的抽象方法损话，而針對React，我們重點(diǎn)討論兩種：mixin和高階組件槽唾。
mixin
mixin的特性一直廣泛存在于各種面向?qū)ο笳Z言中丧枪。比如在Ruby中，include關(guān)鍵詞即是mixin庞萍。是將一個(gè)模塊混入到一個(gè)另一個(gè)模塊中拧烦，或是一個(gè)類中。
為什么編程語言要引入這樣一種特性呢钝计？
事實(shí)上恋博，包括C++等一些年齡較大的OOP語言，它們都有一個(gè)強(qiáng)大但危險(xiǎn)的多重繼承特性私恬。在現(xiàn)代語言中债沮，為了權(quán)衡利弊，大都舍棄了多重繼承本鸣，只采用單繼承疫衩，但單繼承在實(shí)現(xiàn)抽象時(shí)有很多不方便的地方，為了彌補(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對象里的方法都掛載到原對象上，來實(shí)現(xiàn)對對象的混入近顷。
從上述的實(shí)現(xiàn)生音，我們可以聯(lián)想到 underscore庫中的extend 或 lodash庫中的 assign方法，或者說ES6中的Object.assign()方法幕庐。
在react中使用mixin
在官方封裝的'reat-addons-pure-render-mixin'久锥；在git上沒找到相關(guān)的有價(jià)值的庫，應(yīng)該是react認(rèn)為mixin是一種反模式形式异剥。
但是發(fā)現(xiàn)了react-immutable-render-mixin這樣的庫。只是很久沒維護(hù)了絮重，不建議使用
參考鏈接
我們可以看到冤寿，使用createClass實(shí)現(xiàn)的mixin為組件做了兩件事。
工具方法:這是mixin的基本功能青伤，如果你想共享一些工具類方法督怜，就可以定義它們，直接在各個(gè)組件中使用狠角。
生命周期繼承:prips與state合并号杠。這是mixin特別重要的功能，
ES6 Classes 與 decorator
然而丰歌，使用我們推薦的ES6 classes形勢構(gòu)建組件時(shí)姨蟋，它并不支持mixin。React文檔中也未能給出解決方法立帖。
要在class的基礎(chǔ)上封裝mixin眼溶，就要說到class的本質(zhì)。ES6并沒有改變js面向?qū)ο蠓椒ɑ谠偷谋举|(zhì)晓勇，不過再次智商提供了一些語法糖堂飞。class就是其中之一。
對于是按mixin方法來說绑咱，這就沒什么不一樣了绰筛。接下來我們來聊聊另一個(gè)語法糖decorator。正巧可以用來實(shí)現(xiàn)class的mixin描融。
decorator 是ES7定義的新特性铝噩，與java 的 pre-defined annotation（預(yù)定義注解）相似。但與java 的annotation 不同的是稼稿，decorator是運(yùn)用在運(yùn)行時(shí)的方法薄榛，在Redux或其他一些應(yīng)用層框架中讳窟，越來越多的使用decorator以實(shí)現(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);
}
}
}
可以看到丽啡，源代碼十分簡單，它將每一個(gè)mixin對象的方法都跌價(jià)到target 對象的原型上以達(dá)到mixin的目的硬猫，這樣补箍，就可以用@mixin來做多個(gè)重用模塊的疊加了。
對于react啸蜜，我們自然可以用上述方法來實(shí)現(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)出來的一種模式。
具體來說睁蕾，高階組件是一個(gè)函數(shù)苞笨，能夠接受一個(gè)組件并返回一個(gè)新的組件。
在我們項(xiàng)目中使用react-redux框架的時(shí)候子眶，有一個(gè)connect的概念瀑凝，這里的connect其實(shí)就是一個(gè)高階組件。也包括類似react-router-dom中的withRouter的概念
構(gòu)建一個(gè)簡單的hoc
function hello (){
console.log("hello i love react ")
}
function hoc(fn){
return ()=>{
console.log("first");
fn();
console.log("end");
}
}
hello = hoc(hello);
hello();
實(shí)現(xiàn)高階組件的方法
實(shí)現(xiàn)高階組件的方法有如下兩種：
- 屬性代理壹店。高階組件通過唄包裹的React組件來操作props
- 反向繼承猜丹。高階組件繼承于被包裹的React組件
接下來我們分別來闡述這兩種方法。
屬性代理
屬性代理是我們r(jià)eact中常見高階組件的實(shí)現(xiàn)方法硅卢，我們通過一個(gè)例子來說明：
import React,{Component} from 'react';
const MyContainer = (WraooedComponent) =>
class extends Component {
render(){
return <WrappedComponent {...this.props} />
}
}
從這里看到最重要部分是render 方法中返回了傳入 WrappedComponent的React組件射窒。這樣，我們就可以通過高階組件來傳遞props将塑。這種方法即為屬性代理脉顿。
自然，我們想要使用MyContainer這個(gè)高階組件就變得非常容易：
import React,{Component} from 'react';
class MyComponent extends Component{
//...
}
export default MyContainer(MyComponent);
這樣組件就可以一層層地作為參數(shù)被調(diào)用点寥，原始組件就具備了高階組件對它的修飾艾疟。就這么簡單，保持單個(gè)組件封裝性的同時(shí)還保留了易用性。當(dāng)然蔽莱，我們也可以用decorator來轉(zhuǎn)換弟疆。
當(dāng)使用屬性代理構(gòu)建高階組件時(shí)，調(diào)用順序不同于mixin盗冷。上述執(zhí)行生命周期的過程類似于堆棧調(diào)用：
didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount
反向繼承
另一種構(gòu)建高階組件的方法稱為反向繼承怠苔，從字面意思上看，它一定與繼承性相關(guān)仪糖。我們同樣來看一個(gè)簡單的實(shí)現(xiàn)柑司。
const MyContainer = (WrappedComponent)=>{
class extends WrappedComponent {
render(){
return super.render();
}
}
}
如上代碼。高階組件返回的組件繼承于 WrappedComponent 锅劝。因?yàn)楸粍?dòng)地繼承了 WrappedComponent攒驰，所有的調(diào)用都會(huì)反向，這也是種方法的由來故爵。
這種方法與屬性代理不太一樣玻粪。它通過繼承WrappedComponent來實(shí)現(xiàn)，方法可以通過super來順序調(diào)用稠集。因?yàn)橐蕾囉诶^承機(jī)制奶段。HOC的調(diào)用順序和隊(duì)列是一樣的。
didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)
在反向繼承方法中剥纷，高階組件可以使用 WrappedComponent 引用，這意味著它可以使用 WrappedComponent 的state 呢铆、props晦鞋。生命周期和render方法。但它不能保證完整的子組件樹被解析棺克。它有兩個(gè)比較大的特點(diǎn)悠垛，下面我們展開來講一講。
渲染劫持
渲染劫持就是指的是高階組件可以控制 WrappedComponent的渲染過程娜谊，并渲染各種各樣的結(jié)果确买。我們可以在這個(gè)過程中在任何React元素輸出的結(jié)果中讀取、增加纱皆、修改湾趾、刪除props，或讀取或修改React元素樹派草，或條件顯示搀缠。又或者用樣式包裹元素樹
控制state
高階組件可以讀取、修改或刪除WrappedComponent實(shí)例中的state近迁，如果需要的話艺普，也可以增加state。
組件命名
當(dāng)包裹一個(gè)高階組件時(shí)，我們失去了原始 WrappedComponent的displayName歧譬，而組件名字是方便我們開發(fā)與調(diào)試的重要屬性岸浑。
組件參數(shù)
有時(shí)，我們調(diào)用高階組件需要傳入一些參數(shù)瑰步，這可以用非常簡單的方式來實(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)你使用的時(shí)候，可以這么寫：
HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)
class WrappedComponent extends React.Component{}
這也是利用了函數(shù)式編程的特征面氓”ィ可見，在React抽象的過程中舌界，處處可見它的影子掘譬。
