mixin

• mixin ：將一個(gè)模塊混入到一個(gè)另一個(gè)模塊中，或是一個(gè) 類中
• 封裝 mixin 方法

const mixin = function (obj, mixins) {const newObj = obj;<!--復(fù)制原型對象-->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' 復(fù)制代碼

• 在 React 中使用 mixin

React 在使用 createClass 構(gòu)建組件時(shí)提供了 mixin 屬性，比如官方封裝的 PureRenderMixin ：

import React from 'react'; import PureRenderMixin from 'react-addons-pure-render-mixin'; React.createClass({mixins: [PureRenderMixin],render() {return <div>foo</div>;} }); 復(fù)制代碼

使用 createClass 實(shí)現(xiàn)的 mixin 為組件做了兩件事。

工具方法。這是 mixin 的基本功能，如果你想共享一些工具類方法，就可以定義它們，直 接在各個(gè)組件中使用。

生命周期繼承，props 與 state 合并。這是 mixin 特別重要的功能，它能夠合并生命周期方 法。如果有很多 mixin 來定義 componentDidMount 這個(gè)周期，那么 React 會非常智能地將它們都合并起來執(zhí)行。同樣，mixin 也可以作用在 getInitialState 的結(jié)果上，作 state 的 合并，而 props 也是這樣合并的。

• ES6 Classes 與 decorator

decorator就是裝飾器：

• 在組件類里面的方法使用：在其上一行加@函數(shù)名（3個(gè)參數(shù)和Object.defineProperty一樣）
• 在組件類上使用：在其上一行加@類名（一個(gè)參數(shù)就是類實(shí)例）

參考1

參考2

• mixin 的問題
  • 破壞了原有組件的封裝
  • 命名沖突
  • 增加復(fù)雜性 針對這些問題，React 社區(qū)提出了新的方式來取代 mixin，那就是高階組件

高階組件

• higher-order function（高階函數(shù)）在函數(shù)式 編程中是一個(gè)基本的概念，它描述的是這樣一種函數(shù)：這種函數(shù)接受函數(shù)作為輸入，或是輸出一 個(gè)函數(shù)。比如，常用的工具方法 map 、 reduce 和 sort 等都是高階函數(shù)
• 高階組件（higher-order component），類似于高階函數(shù)，它接受 React 組件作為輸入，輸出一 個(gè)新的 React 組件

高階組件讓我們的代碼更具有復(fù)用性、邏輯性與抽象特性。 它可以對 render 方法作劫持，也可以控制 props 與 state

實(shí)現(xiàn)高階組件的方法有如下兩種。

屬性代理（props proxy）。高階組件通過被包裹的 React 組件來操作 props。

定義高階組件：

import React, {Component} from 'React'; const MyContainer = (WrappedComponent) => class extends Component {render() {return <WrappedComponent {...this.props}/>;} } 復(fù)制代碼

使用高階組件：

import React, {Component} from 'React'; class MyComponent extends Component {// ... } export default MyContainer(MyComponent); 復(fù)制代碼

用 decorator 來轉(zhuǎn)換：

import React, {Component} from 'React'; @MyContainer class MyComponent extends Component {render() {} } export default MyComponent; 復(fù)制代碼

反向繼承（inheritance inversion）。高階組件繼承于被包裹的 React 組件。

const MyContainer = (WrappedComponent) => class extends WrappedComponent {render() {return super.render();} } 復(fù)制代碼

高階組件返回的組件繼承于 WrappedComponent。因?yàn)楸粍拥乩^承了 WrappedCom- ponent ，所有的調(diào)用都會反向，這也是這種方法的由來

組合式組件開發(fā)實(shí)踐

使用 React 開發(fā)組件時(shí)利用 props 傳遞參數(shù)。也就是說，用參數(shù)來配置 組件是我們最常用的封裝方式。在一般場景中，僅修改組件用于配置的 props，就可以滿足需求。 但隨著場景發(fā)生變化，組件的形態(tài)也發(fā)生變化時(shí)，我們就必須不斷增加 props 去應(yīng)對變化，此時(shí) 便會導(dǎo)致 props 的泛濫，而在擴(kuò)展過程中又必須保證組件向下兼容，只增不減，使組件的可維護(hù) 性降低

• 組件再分離

我們期望組件是沒有冗余的，組件與組件間視圖重疊的部分應(yīng)當(dāng)被抽離出來，形成顆 粒度更細(xì)小的原子組件，使組件組合充滿更多的可能

比如：抽離組件

對于顆粒度最小的組件而言，我們希望它是純粹的、木偶式的組件

對于 SelectInput 組件，其狀態(tài)完全依賴傳入的 props，包括 selectedItem （顯示用戶 所選項(xiàng)）、 isActive （當(dāng)前下拉狀態(tài)）、 onClickHeader （反饋下拉狀態(tài)）以及 placeholder （下拉 框提示）。簡要實(shí)現(xiàn)：

class SelectInput extends Component {static displayName = 'SelectInput';render() {const {selectedItem, isActive, onClickHeader, placeholder} = this.props;const {text} = selectedItem;return (<div><div onClick={onClickHeader}><Input type="text" disabled value={text} placeholder={placeholder}/><Icon className={isActive} name="angle-down"/></div></div>);} } 復(fù)制代碼

組件再次分離后，可以根據(jù)在現(xiàn)實(shí)中的組件形態(tài)對其進(jìn)行任意組合，形成統(tǒng)一層，擺 脫在原有組件上擴(kuò)展的模式，有效提高組件的靈活性

• 邏輯再抽象

組件層面的抽象不僅僅只停留在界面上，組件中的相同交互邏輯和業(yè)務(wù)邏輯也應(yīng)該進(jìn)行抽 象。在組件中，同樣貫穿著這種函數(shù)式思想，只是實(shí)現(xiàn)方式略有不同。現(xiàn)在基于高階組件來完成 組件邏輯上的抽象：

// 完成 SearchInput 與 List 的交互 const searchDecorator = WrappedComponent => {class SearchDecorator extends Component {constructor(props) {super(props);this.handleSearch = this.handleSearch.bind(this);}handleSearch(keyword) {this.setState({data: this.props.data, keyword});this.props.onSearch(keyword);}render() {const {data, keyword} = this.state;return (<WrappedComponent{...this.props}data={data}keyword={keyword}onSearch={this.handleSearch}/>);}}return SearchDecorator; } // 完成 List 數(shù)據(jù)請求 const asyncSelectDecorator = WrappedComponent => {class AsyncSelectDecorator extends Component {componentDidMount() {const {url, params} = this.props;fetch(url, {params}).then(data => {this.setState({data});});}render() {return (<WrappedComponent {...this.props} data={this.state.data}/>);}}return AsyncSelectDecorator; } 復(fù)制代碼

最終，我們既可以用 decorator 的方式疊加套用，也可以利用 compose 方法將高階組件層層包 裹，將界面與邏輯完美地結(jié)合在一起：

const FinalSelector = compose(asyncSelectDecorator, searchDecorator, selectedItemDecorator)(Selector); class SearchSelect extends Component {render() {return (<FinalSelector {...this.props}><SelectInput/><SearchInput/><List/></FinalSelector>);} } 復(fù)制代碼

在配置式組件內(nèi)部，組件與組件間以及組件與業(yè)務(wù)間是緊密關(guān)聯(lián)的，而我們需要完成的僅僅 是配置工作

轉(zhuǎn)載于:https://juejin.im/post/5c26d071e51d4570f14553a9

總結(jié)

以上是生活随笔為你收集整理的react系列知识---11组件间抽象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。