一、高階元件
①接收乙個元件返回乙個增強性的元件
高階元件其實是乙個函式，這個函式接收乙個引數，這個引數是乙個元件，返回值是乙個增強性的元件
component/list/header.js //①這是新建乙個元件
import react, from 'react'
class header extends component
}export default header
component/list/list.js
import react, from 'react'
import header from "./header" //② 在原有的元件中引入這個元件
let hoc =(com)=>
}return text
}let hi =hoc(header)
//④ 再寫乙個函式，將模板hoc中的引數寫成想要的元件名
class list extends component
}export default list
②屬性**：實現元件的復用性 //就是我寫乙個元件，我想在什麼元件中使用就將這個元件引入到那個元件中去，利用高階元件的概念進行渲染
header.js //這就相當於乙個元件模板，需要的時候引入就可以，資料可以在高階元件中進行修改
import react, from 'react'
class header extends component= this.props
return(
/>})}
)}}export default header
list.js
import react, from 'react'
import header from "./header"
let hoc =(com)=>
}render() = this.state
return()}
}return text
}let hi =hoc(header)
class list extends component
}export default list
③ 反向整合 ：渲染劫持
根據條件來渲染不同的元件或資料
list.js
import react, from 'react'
import header from "./header"
let hoc =(params)=>(com)=>
}render() = this.state
return(
params?:請登入
//這裡是乙個三目運算，根據條件的不同來渲染不同的元件)}
}return text
}let hi =hoc(false)(header)
//這裡的第乙個引數是params中的值
class list extends component
}export default list
React元件通訊 高階元件
子父元件通訊 非父子元件通訊 跨元件通訊 在react沒有類似vue中的事件匯流排來解決這個問題，我們只能借助它們共同的父級元件來實現，將非父子關係裝換成多維度的父子關係。react提供了contextapi來實現跨元件通訊,react 16.3之後的contextapi較之前的好用。使用流程 im...
高階元件 高階函式 一
antd裡面的form表單方面，遇到乙個高階函式，以及高階元件，於是看了一下這方面內容，前輩們的文章寫得也非常詳細，這裡就稍微kobe一下 高階函式與高階元件 高階函式 高階函式，是一種特別的函式，接受的引數為函式，返回值也是函式 成立條件，二者兼一即可 1 一類特別的函式 a 接受函式型別的引數 ...
React高階元件
想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...