您好,登錄后才能下訂單哦!
小編給大家分享一下Render props是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
Render props
Rrender prop 是指一種在 React 組件之間
使用一個(gè)值為函數(shù)的 prop 共享代碼
的簡單技術(shù), 和 HOC 類似, 都是組件間的邏輯復(fù)用問題
。
更具體地說,Render prop 是一個(gè)用于告知組件需要渲染什么內(nèi)容
的函數(shù)。
下面看一下簡單的例子:
以下組件跟蹤 Web 應(yīng)用程序中的鼠標(biāo)位置:
class Mouse extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( <p style={{ height: '100%' }} onMouseMove={this.handleMouseMove}> <p>The current mouse position is ({this.state.x}, {this.state.y})</p> </p> ); }}class MouseTracker extends React.Component { render() { return ( <> <h2>移動鼠標(biāo)!</h2> <Mouse /> </> ); }}
當(dāng)光標(biāo)在屏幕上移動時(shí),組件顯示其(x,y)坐標(biāo)。
現(xiàn)在的問題是:
我們?nèi)绾卧诹硪粋€(gè)組件中復(fù)用這個(gè)行為?
換個(gè)說法,若另一個(gè)組件需要知道鼠標(biāo)位置,我們能否封裝這一行為,以便輕松地與其他組件共享它 ??
假設(shè)產(chǎn)品想要這樣一個(gè)功能: 在屏幕上呈現(xiàn)一張?jiān)谄聊簧献分鹗髽?biāo)的貓的圖片。
我們或許會使用 <Cat mouse={{ x, y }} prop 來告訴組件鼠標(biāo)的坐標(biāo)以讓它知道圖片應(yīng)該在屏幕哪個(gè)位置。
class Cat extends React.Component { render() { const mouse = this.props.mouse; return ( <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} /> ); }}
這個(gè)需求如此簡單,你可能就直接修改Mouse組件了:
class Mouse extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( <p style={{ height: '100%' }} onMouseMove={this.handleMouseMove}> <Cat mouse={this.state} /> </p> ); }}
巴適~ 簡單粗暴, 一分鐘完成任務(wù)。
可是,如果下次產(chǎn)品再要想加條狗呢
?
以上的例子,雖然可以完成了貓追鼠標(biāo)的需求,還沒有達(dá)到以可復(fù)用的方式
真正封裝行為的目標(biāo)。
當(dāng)我們想要鼠標(biāo)位置用于不同的用例時(shí),我們必須創(chuàng)建一個(gè)新的組件,專門為該用例呈現(xiàn)一些東西.
這也是 render prop 的來歷:
我們可以提供一個(gè)帶有函數(shù) prop 的 <Mouse>
組件,它能夠動態(tài)決定
什么需要渲染的,而不是將 <Cat> 硬編碼
到 <Mouse> 組件里.
修改一下上面的代碼:
class Cat extends React.Component { render() { const mouse = this.props.mouse; return ( <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} /> ); }}class Mouse extends React.Component { state = { x: 0, y: 0 }; handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( <p style={{ height: '100%' }} onMouseMove={this.handleMouseMove}> {this.props.render(this.state)} </p> ); }}class MouseTracker extends React.Component { render() { return ( <p> <h2>移動鼠標(biāo)!</h2> <Mouse render={mouse => ( <Cat mouse={mouse} /> )}/> </p> ); }}
提供了一個(gè)render 方法,讓動態(tài)決定什么需要渲染。
事實(shí)上,render prop 是因?yàn)槟J讲疟环Q為 render prop ,不一定要用名為 render 的 prop 來使用這種模式。
任何被用于告知組件需要渲染什么內(nèi)容的函數(shù) prop, 在技術(shù)上都可以被稱為 "render prop".
另外,關(guān)于 render prop 一個(gè)有趣的事情是你可以使用帶有 render prop 的常規(guī)組件來實(shí)現(xiàn)大多數(shù)高階組件 (HOC)。
例如,如果你更喜歡使用 withMouse HOC 而不是 <Mouse> 組件,你可以使用帶有 render prop 的常規(guī) <Mouse> 輕松創(chuàng)建一個(gè):
function withMouse(Component) { return class extends React.Component { render() { return ( <Mouse render={mouse => ( <Component {...this.props} mouse={mouse} /> )}/> ); } }}
也是非常的簡潔清晰。
有一點(diǎn)需要注意的是, 如果你在定義的render函數(shù)里創(chuàng)建函數(shù), 使用 render prop 會抵消
使用 React.PureComponent 帶來的優(yōu)勢。
因?yàn)闇\比較 props 的時(shí)候總會得到 false,并且在這種情況下每一個(gè) render 對于 render prop 將會生成一個(gè)新的值
。
class Mouse extends React.PureComponent { // 與上面相同的代碼......}class MouseTracker extends React.Component { render() { return ( <> <Mouse render={mouse => ( // 這是不好的! 每個(gè)渲染的 `render` prop的值將會是不同的。 <Cat mouse={mouse} /> )}/> </> ); }}
在這樣例子中,每次 <MouseTracker> 渲染,它會生成一個(gè)新的函數(shù)作為 <Mouse render> 的 prop,因而在同時(shí)也抵消了繼承自 React.PureComponent 的 <Mouse> 組件的效果.
為了繞過這一問題
,有時(shí)你可以定義一個(gè) prop 作為實(shí)例方法
,類似這樣:
class MouseTracker extends React.Component { renderTheCat(mouse) { return <Cat mouse={mouse} />; } render() { return ( <p> <h2>Move the mouse around!</h2> <Mouse render={this.renderTheCat} /> </p> ); }}
以上是“Render props是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。