[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); // 提供渲染 ```