React中Render Props模式有什么用

這篇文章主要介紹React中Render Props模式有什么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

概述

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>
  <h2>Move the mouse around!</h2>
  <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）是動態構建的。

以上是“React中Render Props模式有什么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！