ReactJS Render Props封裝技巧

2021-09-01 12:19:25 字數 1669 閱讀 2803

一種在 react 元件之間使用乙個值為函式的prop, 在react 元件間共享**的簡單技術

class mousetracker extends react.component ;


}  handlemousemove(event) );


}  render() , )


);}}
隨著滑鼠在螢幕上移動，在乙個 p 標籤的元件上顯示它的 (x, y) 座標。

假設我們現在有乙個在螢幕上跟隨滑鼠渲染一張貓的的元件。我們可能使用首先，你可能會像這樣，嘗試在 的內部的渲染方法渲染 元件：

class cat extends react.component } onmousemove=>


);}}
這一方法對我們的具體用例來說能夠生效，但我們卻沒法實現真正的將行為封裝成可重用的方式的目標。現在，每次我們在不同的用例中想要使用滑鼠的位置，我們就不得不建立乙個新的針對那一用例渲染不同內容的元件 (如另乙個關鍵的)。

hoc 高階元件實現

class cat extends react.component } onmousemove=>)}


}} 


export default withmouse(cat);
render prop 實現

我們可以提供乙個帶有函式 prop 的元件，它能夠動態決定什麼需要渲染的，而不是將 硬編碼到元件裡，並有效地改變它的渲染結果。

class cat extends react.component } onmousemove=>


);}}


class mousetracker extends react.component />


);}}
render props 與hoc（ 高階元件）組合
class mouse extends react.component ;


}  handlemousemove(event) );


}  render() 


);}}


function withmouse(component) />);}


}}
儘管之前的例子使用了 render，我們也可以簡單地使用 ***x prop！
class mouse extends react.purecomponent 


class mousetracker extends react.component />


);}}
在這樣例子中，每次渲染，它會生成乙個新的函式作為的 prop，因而在同時也抵消了繼承自 react.purecomponent 的元件的效果！

為了繞過這一問題，有時你可以定義乙個 prop 作為例項方法，類似如下：

class mousetracker extends react.component 


renderthecat(mouse) 


render() 


}
新特性 react hooks 也可解決類似問題

參考鏈結

UIAlertController使用技巧

由於在ios8之後，蘋果將uialertview和uiactionsheet兩者進行了整合，用uialertcontroller來代替 如何建立uialertcontroller uialertcontroller alertcontroller uialertcontroller alertcon...

Apache HBase rowKey設計技巧

hbase是三維有序儲存的，通過rowkey 行鍵 column key column family和qualifier 和timestamp 時間戳 這個三個維度可以對hbase中的資料進行快速定位。hbase中rowkey可以唯一標識一行記錄，在hbase查詢的時候，有以下幾種方式 通過get方...

ReportingSerivces 常用技巧

解決重複線問題 dim name as string public function findline byval value as string as string if name value then return false else name value return true end if...