思考：如果兩個元件中的部分功能相似或相同，該如何處理？
處理方式：復用相似的功能（聯想函式封裝）
復用什麼？1. state 2. 操作state的方法 （元件狀態邏輯 ）
兩種方式：1. render props模式 2. 高階元件（hoc）
注意：這兩種方式不是新的api，而是利用react自身特點的編碼技巧，演化而成的固定模式（寫法）
在使用元件時，新增乙個值為函式的prop，通過 函式引數 來獲取（需要元件內部實現）
使用該函式的返回值作為要渲染的ui內容（需要元件內部實現）
使用步驟
1. 建立mouse元件，在元件中提供復用的狀態邏輯**（1. 狀態 2. 操作狀態的方法）
2. 將要復用的狀態作為 props.render(state) 方法的引數，暴露到元件外部
3. 使用 props.render() 的返回值作為要渲染的內容
import react from 'react'
import reactdom from 'react-dom'
/* render props 模式*/
// 匯入資源
import img from './images/cat.png'
// 作用：滑鼠位置復用
class mouse extends react.component
// 滑鼠移動事件的事件處理程式 操作狀態的方法：滑鼠移動事件
handlemousemove = e => )
}// 監聽滑鼠移動事件
componentdidmount()
render()
}render() )}}
/>
alt="貓"
style=}
/>
) }}
/>)}
}注意：並不是該模式叫 render props 就必須使用名為render的prop，實際上可以使用任意名稱的prop
把prop是乙個函式並且告訴元件要渲染什麼內容的技術叫做：render props模式
推薦：使用 children 代替 render 屬性
**優化:
1. 推薦：給 render props 模式新增 props校驗
2. 應該在元件解除安裝時解除 mousemove 事件繫結
import react from 'react'
import reactdom from 'react-dom'
import proptypes from 'prop-types'
// 作用：滑鼠位置復用
class mouse extends react.component
// 滑鼠移動事件的事件處理程式
handlemousemove = e => )
}// 監聽滑鼠移動事件
componentdidmount()
// 推薦：在元件解除安裝時移除事件繫結
componentwillunmount()
render()
}// 新增props校驗
mouse.proptypes =
render() )}}
)}
}目的：實現狀態邏輯復用
採用 包裝（裝飾）模式 ，比如說：手機殼
手機：獲取保護功能
手機殼 ：提供保護功能
高階元件就相當於手機殼，通過包裝元件，增強元件功能
思路分析:
高階元件（hoc，higher-order component）是乙個函式，接收要包裝的元件，返回增強後的元件
高階元件內部建立乙個類元件，在這個類元件中提供復用的狀態邏輯**，通過prop將復用的狀態傳遞給
// 高階元件內部建立的類元件：
class mouse extends react.component
1. 建立乙個函式，名稱約定以 with 開頭
2. 指定函式引數，引數應該以大寫字母開頭（作為要渲染的元件）
3. 在函式內部建立乙個類元件，提供復用的狀態邏輯**，並返回
4. 在該元件中，渲染引數元件，同時將狀態通過prop傳遞給引數元件
5. 呼叫該高階元件，傳入要增強的元件，通過返回值拿到增強後的元件，並將其渲染到頁面中
設定displayname
使用高階元件存在的問題：得到的兩個元件名稱相同
原因：預設情況下，react使用元件名稱作為 displayname
解決方式：為 高階元件 設定 displayname 便於除錯時區分不同的元件
displayname的作用：用於設定除錯資訊（react developer tools資訊）
傳遞props
問題：props丟失
原因：高階元件沒有往下傳遞props
import react from 'react'
import reactdom from 'react-dom'
/* 高階元件*/
// 建立高階元件
// 該元件提供復用的狀態邏輯
class mouse extends react.component
handlemousemove = e => )
}// 控制滑鼠狀態的邏輯
componentdidmount()
componentwillunmount()
render()
}// 設定displayname
return mouse}}
// 用來測試高階元件
const position = props => , y: ))}
// 獲取增強後的元件：
const mouseposition = withmouse(position)
render()
}
React高階元件
想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...
react高階元件
基本概念 函式可以作為引數被傳遞 函式可以作為返回值輸出 元件作為引數被傳遞，返回值是乙個元件 高階元件是乙個函式 案例 將a元件作為公共元件，bc元件作為a函式的引數，來共享顯示a元件 此處紅框是a元件，紅框裡左邊內容為b元件，右邊內容為c元件 1.建立公共的a元件 將元件a封裝成乙個函式，接收乙...
React 高階元件
高階元件 high order component,hoc 輸入 react 元件 輸出 react 元件 高階元件的作用主要是用來加強元件，通過把基礎元件拆分成很小的粒度，通過高階元件進行增強並返回，以此提高復用性。比如需要開發乙個訊息框，一開始只需要乙個模態框能夠顯示訊息就可以。後來需要多增加 ...