import react from
'react'
import proptypes from
'prop-types'
// 匯入資源
// import img from '@/logo192.png'
// 建立mouse元件
class
mouse
extends
react.component
handlemousemove
= e =>)}
// 監聽滑鼠移動事件
componentdidmount()
// 元件消失時解除安裝滑鼠移入事件
componentwillunmount()
render()
, y:
//
// )
// return this.props.render(this.state) // 把state暴露出去
return
this
.props.
children
(this
.state)
// 把state暴露出去}}
// 新增props校驗
mouse.proptypes =
export
default
class
heightjie
extends
react.component
render()
, y:
)}}> */
}, y:
<
/p>)}
}) => x: , y:
} */
}<
/mouseposition>
<
/mousecat>
<
/div>)}
}// --------二、高階元件----------
// 使用步驟
// 1.建立乙個函式，名稱約定以with開頭
// 2.指定函式引數，引數應該以大寫字母開頭(作為要渲染的元件)
// 3.在函式內部建立乙個類元件，提供復用的狀態邏輯**，並返回
// 4.在該元件中，渲染引數元件，同時將狀態通過prop傳遞給引數元件
// 建立高階元件，以with開頭
function
withmouse
handlemousemove
= e =>)}
componentdidmount()
// 元件消失時解除安裝滑鼠移入事件
componentwillunmount()
render()
>
<
<
/div>)}
}// ---------------------設定displayname----------------
// 高階元件名字要大寫
mouse.displayname =
`withmouse$`
return mouse
}function
getdisplayname
// 用來測試高階元件
const
position
= props =>
(x高階座標為:
, y高階座標為:
<
/p>
)const
cat= props =>
("./logo192.png" alt=
"貓" style=
}>
<
/img>
)// 呼叫高階元件
// 獲取增強後的元件：
const mouseposition =
withmouse
(position)
const mousecat =
withmouse
(cat)
// -----------------------高階元件-優化---------------
// 由於以上高階元件被呼叫了兩次，所有有兩個相同的元件名(高階元件裡面的mouse元件)
// 設定displayname
// 1.使用高階元件存在的問題：得到的兩個元件名稱相同
// 2.原因：預設情況下，react使用元件名稱作為displayname
// 3.解決方式：為高階元件設定displayname便於除錯時區分不同的元件
// 4.displayname的作用：用於設定除錯資訊
// ----------------------呼叫高階元件時要接收props往下傳遞props-------------
// 1.問題: props丟失
// 2.原因： 高階元件沒有往下傳遞props
// 4.傳遞方式：
// // // 傳遞了乙個引數a=1
// 傳遞到高階元件裡面去了
// // 該元件提供復用的狀態邏輯
// class mouse extends react.component
// handlemousemove = e => )
// }
// componentdidmount()
// // 元件消失時解除安裝滑鼠移入事件
// componentwillunmount()
// render()
// }
// // ---------------------設定displayname----------------
// // 高階元件名字要大寫
// return mouse
// }
React高階元件
想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...
react高階元件
基本概念 函式可以作為引數被傳遞 函式可以作為返回值輸出 元件作為引數被傳遞，返回值是乙個元件 高階元件是乙個函式 案例 將a元件作為公共元件，bc元件作為a函式的引數，來共享顯示a元件 此處紅框是a元件，紅框裡左邊內容為b元件，右邊內容為c元件 1.建立公共的a元件 將元件a封裝成乙個函式，接收乙...
React 高階元件
高階元件 high order component,hoc 輸入 react 元件 輸出 react 元件 高階元件的作用主要是用來加強元件，通過把基礎元件拆分成很小的粒度，通過高階元件進行增強並返回，以此提高復用性。比如需要開發乙個訊息框，一開始只需要乙個模態框能夠顯示訊息就可以。後來需要多增加 ...