概述
Render Props模式是一種非常靈活復用性非常高的模式，它可以把特定行為或功能封裝成一個組件，提供給其他組件使用讓其他組件擁有這樣的能力，接下來我們一步一步來看React組件中如何實現這樣的功能。
簡要介紹：分離UI與業務的方法一直在演進，從早期的mixins，到HOC，再到Render Prop，本文主要對比HOC，談談Render Props
1 . 早期的mixins
早期復用業務通過mixins來實現，比如組件A和組件B中，有一些公用函數，通過mixins剝離這些公用部分，并將其組合成一個公用集合，然后將這個集合傳遞給每個組件調用。
//公有的函數部分const someMixins={ printColor(){ console.log(this.state.color); } printWeight(){ console.log(this.state.weight); }}class Apple extends React.Component{ //僅僅作為演示，mixins一般是通過React.createClass創建，并且ES6也沒有key:value這種寫法 mixins:[someMixins] constructor(props){ super(props); this.state={ color:'red', weight:'100g' } this.printColor=this.printColor.bind(this); } render(){ return <div className="m-box" onClick={this.printColor}> 這是一個蘋果 </div> }}class Banana extends React.Component{ mixins:[someMixins] constructor(props){ super(props); this.state={ color:'yellow', weight:'200g' } this.printColor=this.printColor.bind(this); } render(){ return <div className="m-box" onClick={this.printColor}> 這是一個香蕉 </div> }}上述的例子中，Apple和Banana都具有printColor和printWeight方法，通過mixins分離公共業務。mixins已經在React16.0版本移除，這里僅僅做一個介紹。
2 . HOC
HOC簡單理解就是組件工廠，接受原始組件作為參數，添加完功能與業務后，返回新的組件。下面來介紹HOC參數的幾個例子。
（1）參數僅為原始組件，比如：
const redApple = withFruit(Apple);
（2）參數為原始組件和一個對象，比如：
const redApple = withFruit(Apple，{color:'red',weight:'200g'});但是這種情況比較少用，如果對象中僅僅傳遞的是屬性，其實完全可以通過組件的props實現值的傳遞，我們用HOC的主要目的是分離業務，關于UI的展示，以及一些組件中的屬性和狀態，我們一般通過props來指定比較方便
（3）參數為原始組件和一個函數，比如：
const redApp=withFruit(App,()=>{console.log('I am a fruit')})這種是HOC的典型例子，原始組件參數表示UI部分，函數參數表示處理邏輯，在HOC工廠中進行耦合后生成新的組件。
（4）柯里化
最常見的是僅以一個原始組件作為參數，但是在外層包裹了業務邏輯，比如react-redux的conect函數中：
class Admin extends React.Component{}const mapStateToProps=(state)=>{ return { };}const mapDispatchToProps=(dispatch)=>{ return { }}const connect(mapStateToProps,mapDispatchToProps)(Admin)這里不是嚴格的柯里化，但是思想是一樣的，在HOC的工廠函數中在包一層父函數，用于指定業務邏輯。
3 . HOC的缺點
下面我們來看看HOC的缺點：
（1）難以溯源，且存在屬性覆蓋問題
如果原始組件A，先后通過工廠函數1，工廠函數2，工廠函數3….構造，最后生成了組件B，我們知道組件B中有很多與A組件不同的props，但是我們僅僅通過組件B，并不能知道哪個組件來自于哪個工廠函數。同時，如果有2個工廠函數同時修改了組件A的某個同名屬性，那么會有屬性覆蓋的問題，會使得前一個工廠函數的修改結果失效。
（2）HOC是靜態構建的
所謂靜態構建，也就是說生成的是一個新的組件，并不會馬上render，HOC組件工廠是靜態構建一個組件，這類似于重新聲明一個組件的部分。也就是說，HOC工廠函數里面的聲明周期函數，也只有在新組件被渲染的時候才會執行。
（3）會產生無用的空組件
4. render props
class Cat extends React.Component { render() { const mouse = this.props.mouse; return ( <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} /> ); }}class Mouse extends React.Component { constructor(props) { super(props); this.handleMouseMove = this.handleMouseMove.bind(this); this.state = { x: 0, y: 0 }; } handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }); } render() { return ( <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}> {/* Instead of providing a static representation of what <Mouse> renders, use the `render` prop to dynamically determine what to render. */} {this.props.render(this.state)} </div> ); }}class MouseTracker extends React.Component { render() { return ( <div> <h1>Move the mouse around!</h1> <Mouse render={mouse => ( <Cat mouse={mouse} /> )}/> </div> ); }}上述是官網給出的例子，我們來看主要是部分是下面這兩句：
Class Mouse extends React.component{ ... {this.props.render(this.state)} ...}......<Mouse render={mouse => ( <Cat mouse={mouse} /> )}/>在使用Mouse組件的時候，通過一個render屬性，傳遞一個可用組件Cat給父組件Mouse，而在Mouse組件中，可以將本身的state對象傳遞給Cat組件，Cat組件中的mouse屬性的值與Mouse父組件中的state相同。
精簡來說: 就是父組件可以將自己的state傳遞給子組件，而子組件可以根據父組件的state對象，來進行render。
這樣做的好處是：
（1）不用擔心props的命名問題
（2）可以溯源，子組件的props一定是來自于直接父組件
（3）是動態構建的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
