高階元件高階函式一

antd裡面的form表單方面，遇到乙個高階函式，以及高階元件，於是看了一下這方面內容，前輩們的文章寫得也非常詳細，這裡就稍微kobe一下

高階函式與高階元件

高階函式:

高階函式，是一種特別的函式，接受的引數為函式，返回值也是函式

成立條件，二者兼一即可

1).一類特別的函式
a).接受函式型別的引數
b).函式返回值是函式

常見的高階函式:

2).常見
a).定時器:settimeout()/setinterval()
b).promise:promise(()=>{})  then(value=>{},reason=>{})
c).陣列遍歷相關的方法: foreach()/ filter()/ map()/ find()/findindex()
d).fn.bind() 本身是個函式，bind方法返回乙個新的函式方法
e).form.create()()  create函式能夠包裝元件，生成另外乙個元件的新功能函式 
f).getfielddecorator()()

1)函式作為引數的高階函式
settimeout(()=>,1000)

//
2 函式作為返回值輸出的高階函式
function
foo(x)
} //
平時遇到的應用場景      
//ajax中
$.get("/api",function
()) 
//陣列中
some(), every(),filter(), map()和foreach（）

高階元件

1 高階元件就是接受乙個元件作為引數並返回乙個新元件的函式

2 高階元件是乙個函式，並不乙個元件

簡單說：高階元件(函式)就好比乙個加工廠，同樣的配件、外殼、電池..工廠組裝完成就是蘋果手機，華為手機組裝完成就是華為手機，基本材料都是相同，不同工廠(高階元件)有不同的實現及產出。當然這個工廠(高階元件)也可能是針對某個基本材料的處理，總之產出的結果擁有了輸入元件不具備的功能，輸入的元件可以是乙個元件的例項，也可以是乙個元件類，還可以是乙個無狀態元件的函式

解決什麼問題？

隨著專案越來越複雜，開發過程中，多個元件需要某個功能，而且這個功能和頁面並沒有關係，所以也不能簡單的抽取成乙個新的元件，但是如果讓同樣的邏輯在各個元件裡各自實現，無疑會導致重複的**。比如頁面有三種彈窗乙個有title，乙個沒有，乙個又有右上角關閉按鈕，除此之外別無它樣，你總不能整好幾個彈窗元件吧，這裡除了tilte,關閉按鈕其他的就可以做為上面說的基本材料。

高階元件總共分為兩大類

**方式之操縱prop

刪除prop

import react from 'react'
function
return
render()  = this
.props;
return
}}export 
default hocremoveprop;

增加prop

render() ;

return

} }

export

default hocaddprop;

const  = this.props;

這是乙個利用es6語法技巧，經過上面的語句，otherprops裡面就有this.props中所有的字段除了user.

假如我們現在不希望某個元件接收user的prop,那麼我們就不要直接使用這個元件，而是把這個元件作為引數傳遞給hocremoveprop，然後我們把這個函式的返回結果當作元件來使用

兩個高階元件的使用方法：

const  newcomponent =hocremoveprop(samplecomponent);
const  newcomponent = hocaddprop(samplecomponent,'1111111');

也可以利用decorator語法糖這樣使用：

import react,  from 'react';
@hocremoveprop 
class samplecomponent extends component 
}export 
default samplecomponent;

//
例子： a元件裡面包含b元件
import react , from 'react'
function
return  class a extends component}}
export 
default  a

高階元件應用：

//
傳引數import react,  from 'react';
render() 
}export 
default
//a元件
import react , from 'react'export 
return
class a extends component
)　　   }
}　} 
//b元件
import react , from 'react'import a from './a.js'class b extends component
年齡：姓名：
)  }
}export 
default  a('提示')(b)
//有兩種方式引用高階函式，第一種入上
//第二種
import react , from 'react'import a from './a.js'@a('提示')
class b extends component
年齡：姓名：
)  }
}export 
default b

使用高階元件

2.@higherordercomponent

高階元件應用

1.**方式的高階元件

返回的新元件類直接繼承自react.component類，新元件扮演的角色傳入引數元件的乙個**，

在新元件的render函式中，將被包裹元件渲染出來，除了高階元件自己要做的工作，其餘功能全都轉手給了被包裹的元件

2.繼承方式的高階元件

//
**方式的高階元件
render() = this
.props;
return}//
繼承方式的高階元件
render() = this
.props;
this.props =otherprops;
return
super.render()
}}

繼承方式高階元件的實現

//
d.js
render() 
const newprops = 
return
react.cloneelement(element,newprops,element.props.children)
}} export 
default
modifypropshoc //
e.js
import react,  from 'react'import d from './d'class e extends component 
}export 
default
d(e)
import react,  from 'react'import d from './d'class f extends component 
}export 
default
d(f)
import react,  from 'react';
render() 
}export 
修改生命週期
componentwillmount()
render() 
const newprops = 
return
react.cloneelement(element,newprops,element.props.children)
}}export 
default modifypropshoc

高階元件高階函式一

React高階元件和高階函式

python高階一高階函式

react之高階元件（一）

高階元件 高階函式 一

React高階元件和高階函式

python高階一 高階函式

react之高階元件（一）

相關推薦

高階元件高階函式一

python高階一高階函式