在前端開發的過程中，如果我們遇到兩個元件功能相同或者類似，應該怎麼處理呢？復用相似的功能？復用什麼？state，操作state的方法。
有兩種方式：render props模式、高階元件（hoc）。這兩種方式不是新的api，而是利用react自身特點的編碼技巧，演化而成的固定模式，接下來我們以render-props模式為例，一步一步演示其使用流程。
我們以滑鼠移動獲取座標為例，該案例是未優化過的**，我們發現ui都限制在了render中。
思路：將要復用的state和操作state的方法封裝到乙個元件中
如何拿到該元件中復用的state
在使用元件時，新增乙個值為函式的prop，通過函式引數來獲取
如何渲染到任意的ui，使用該函式的返回值作為要渲染的ui內容
建立mouse元件，在元件中提供復用的邏輯**
將要復用的狀態作為 props.render(state)方法的引數，暴露到元件外部
使用props.render() 的返回值作為要渲染的內容
children代替render屬性
注意：並不是該模式叫 render props就必須使用名為render的prop，實際上可以使用任意名稱的prop
把prop是乙個函式並且告訴元件要渲染什麼內容的技術叫做： render props模式
推薦：使用childre代替render屬性
mouse元件內部的render修改為：
推薦給render-props模式新增props校驗
當元件移除時候解綁事件
react中的通訊
import react,from react class extends component render data 自定義類名 省略 class extends component render import proptypes from prop types class extends com...
react 動態修改路由 React中的路由設定
在本文中，我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中，我們建立了三個頁面 page 1，page 2，page 3。為了簡化處理，三個頁面的定義類似如下 import react from react function page1 from react r...
react解密 react中key的作用是什麼？
我們知道，不管是在vue還是react中，當迴圈列表的時候，往往會寫乙個key,那麼這個key起到了什麼作用呢？其實，key是react用來追蹤哪些列表的元素被修改，被新增或者是被刪除的輔助標示。在開發過程中我們需要保證某個元素的key在其同級元素中具有唯一性。在react的diff演算法中reac...