[TOC] > [React組件Render Props VS HOC 設計模式 - 簡書](https://www.jianshu.com/p/ff6b3008820a) ## :-: render props **某些組件的各種功能以及處理邏輯幾乎完全相同，只是顯示的界面不一樣。** 為了降低代碼復用，下面的方式任選其一來解決重復代碼的問題 (橫切關注點) - render props - HOC - 高階組件 ### :-: 用法(render props) **首先定義一個帶'slot'功能的自定義組件。** `<div className="props"> { this.props.children('插槽傳遞參數') } </div>` `<div className="render"> { this.props.render('插槽傳遞參數') } </div>` **然后使用該自定義組件。(通過函數的方式拿到valData)** ```jsx const renderText = valData=>{ return <>提示:{valData}</> } ``` ```jsx --- props <xxx> { renderText }} </xxx> ``` ```jsx --- render <xxx render={ renderText } /> ``` ### :-: 用法(HOC) **首先定義一個高階組件(HOC)** ```jsx import React,{ PureComponent } from 'react'; export default function withXXX(Comp){ // 通過組件內部的邏輯處理好(state.top|state.left) state = {top:'50px',left:'50px'} render class XXX extends PureComponent { // 給于額外的props屬性(top|left) return <Comp {...this.props} top={this.state.top} left={this.state.left} /> } } ``` **外部使用** ```jsx // Point -- 是一個函數組件 function Point(props){return <>Top:{props.top}|Left:{props.left}</> } const XXX = withXXX(Point); // 進行優化 ReactDOM.render(<XXX />, $root); // 提供渲染 ```