前端技巧：react中的render-props模式

在前端開發的過程中，如果我們遇到兩個元件功能相同或者類似，應該怎麼處理呢？複用相似的功能？複用什麼？state，操作state的方法。

有兩種方式：render props模式、高階元件（HOC）。這兩種方式不是新的API，而是利用React自身特點的編碼技巧，演化而成的固定模式，接下來小千以render-props模式為例，一步一步演示其使用流程。

案例分析

我們以滑鼠移動獲取座標為例，該案例是未最佳化過的程式碼，我們發現ui都限制在了render中。

最佳化思路分析

思路：將要複用的state和操作state的方法封裝到一個元件中

如何拿到該元件中複用的state

在使用元件時，新增一個值為函式的prop，透過函式引數來獲取

如何渲染到任意的UI，使用該函式的返回值作為要渲染的UI內容

使用步驟

建立Mouse元件，在元件中提供複用的邏輯程式碼

將要複用的狀態作為 props.render(state)方法的引數，暴露到元件外部

使用props.render() 的返回值作為要渲染的內容

示例demo

children代替render屬性

注意：並不是該模式叫 render props就必須使用名為render的prop，實際上可以使用任意名稱的prop

把prop是一個函式並且告訴元件要渲染什麼內容的技術叫做： render props模式

推薦：使用childre代替render屬性

Mouse元件內部的render修改為：

最佳化程式碼

推薦給render-props模式新增props校驗

當元件移除時候解綁事件

想了解更多程式設計知識，歡迎關注我，每天更新行業資訊和熱點技術。