在前端開發(fā)的過程中，如果我們遇到兩個組件功能相同或者類似，應(yīng)該怎么處理呢？復(fù)用相似的功能？復(fù)用什么？state，操作state的方法。

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

      案例分析

      我們以鼠標移動獲取坐標為例，該案例是未優(yōu)化過的代碼，我們發(fā)現(xiàn)ui都限制在了render中。

      優(yōu)化思路分析

      思路：將要復(fù)用的state和操作state的方法封裝到一個組件中

      如何拿到該組件中復(fù)用的state

      在使用組件時，添加一個值為函數(shù)的prop，通過函數(shù)參數(shù)來獲取

      如何渲染到任意的UI，使用該函數(shù)的返回值作為要渲染的UI內(nèi)容

      使用步驟

      創(chuàng)建Mouse組件，在組件中提供復(fù)用的邏輯代碼

      將要復(fù)用的狀態(tài)作為 props.render(state)方法的參數(shù)，暴露到組件外部

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

      示例demo

      children代替render屬性

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

      把prop是一個函數(shù)并且告訴組件要渲染什么內(nèi)容的技術(shù)叫做： render props模式

      推薦：使用childre代替render屬性

      Mouse組件內(nèi)部的render修改為：

      優(yōu)化代碼

      推薦給render-props模式添加props校驗

      當組件移除時候解綁事件

      學(xué)習(xí)web前端，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~