版本迭必勢必同時修改兩個模組；
大量邏輯，方法重複。
鑑於以上問題，尋找的解決方案有：
公共邏輯**抽離；
公共容器元件抽離；
mixin;
高階元件。
公共邏輯抽離方案，公共邏輯中包含了state、props、以及setstate,如果提取公共邏輯**，勢必重新處理相關狀態，對原有模組破壞性大。
mixin方案，但其方案存在缺陷。詳情，看這裡
最後能選擇的最優方案就是高階元件，侵入性小，函式式思想（同樣的輸入，返回同樣的輸出、可**性強），
其滿足高階函式的至少兩個條件：
定義：模擬高階函式的定義，高階元件就是接受乙個元件作為引數，在函式中對元件做一系列的處理，隨後返回乙個新的元件作為返回值。
示例1 (屬性**模式)
return class extends component }
示例2 (反向繼承模式)
render()
}}what? 屬性**、反向繼承，繼承就算了，怎麼還反向繼承，別急放下看
簡單講就是包裹元件，操作props，基本上這種元件巢狀的模式以及傳參方式經常用到。
上** return class extends component
} render()
}//高階元件使用
上**return class extends component
}}render()
}//高階元件使用
元件傳參基本都幹過
return class extends component }
基本上都這個幹過，使用元件例項方法。
上** return class extends component ) =>
render() = this.state;
const newprops = )}}
}}render() = this.props;
return }
}//高階元件使用
細細品味上面寫法的精髓，當你需要操作大量表單的時候，會發現它的好。
剛開始沒理解抽象state的含義，通過寫筆記搞明白了，就是把需要在原元件，通過state動態賦值的操作，抽象到高階元件中通過props傳值。
總結： 屬性**的模式，跟平常寫元件的模式差不多，只不過加了些技巧。
再看看上面的示例
render()
}}super.render()這種模式只在es6類繼承的時候通過super.method()，用在這裡實在是妙。
從寫法上看，繼承了傳入元件，使用super.render()自然是執行了傳入元件的render方法，也就是渲染了傳入元件對應的頁面，有趣的事情開始了。
操作state我理解，但操作props，什麼鬼，直到看到這樣一段**：
//該例子**於 react 高階元件(hoc)入門指南 掘金
const hocfactoryfactory = (...params) => }}
}//類似場景 redux
connect(params)(index)
別人寫的**
//例子**於《深入react技術棧》
render() ;
if (elementstree && elementstree.type === 'input') ;
}const props = object.assign({}, elementstree.props, newprops);
const newelementstree = react.cloneelement(elementstree, props, elementstree.props.children);
return newelementstree;
}} render()
}
高階元件基本使用場景介紹完了，回到正題，聊聊，我在實際專案中是怎麼用的。
說幾個資料：
改造模組前：
改造模組後：
抽離出的高階元件** 387行
當前水平只能到這一步了。
我採用了反向繼承的方案，屬性**，只能滿足操作props，但不能操作state,大家或許會有疑問，人家不是可以抽象state，是的，瞅清楚，是抽象不是操作。
還有，屬性**沒辦法使用原元件靜態方法。大神提供了批量複製靜態方法的庫hoist-non-react-statics
最終滿足我操作props，尤其是操作state的可行性方案，就是高階元件的反向繼承。
目前研究學習並實踐的內容就到這裡了，如果後續有補充的，也會持續更新。
vue元件name屬性
我們在寫vue專案的時候會遇到給元件命名 這裡的name非必選項，看起來好像沒啥用處，但是實際上這裡用處還挺多的 export default 舉個例子 我們有個元件命名為detail,其中dom載入完畢後我們在鉤子函式mounted中進行資料載入 export default mounted me...
vue元件name屬性的作用和元件遞迴實現資料樹
在vue元件註冊時，會有乙個name屬性，那麼vue元件註冊的時候的name屬性有什麼作用呢？先來看看官網，如下所示 簡單來說就是 允許元件模板遞迴地呼叫自身 便於除錯 包括警告資訊以及通過vue devtools除錯時可以更方便的定位到元件 便於獲取更有語義資訊的元件樹 還有一點，就是，可以配合k...
Vue元件中name屬性的作用
檢視其他人寫的元件 的時候經常會發現使用了name屬性，今天來把name屬性的經常使用的場景歸納一下 1.元件自身呼叫，遞迴元件 當在元件中需要呼叫自身的時候，可以通過name屬性來使用 2.使用vue tools工具時的元件名稱 當使用調式工具時，元件的名稱是通過name屬性來設定的 3.移除ke...