react之——render prop

在react 「從上至下的數據流原則」 背景下，常規的消息傳遞機制就是經過prop屬性，把父級數據傳遞給子級，這樣一種數據流通模式決定了——數據的接收方子組件要被」硬植入「進數據的數據的給予方父組件，模式以下：

圖1  傳統依賴props進行數據傳遞的組件「硬植入」模型

基於上述的「硬植入」模式，就造成了組件之間的強耦合，進而會在代碼裏寫出不少這種基於「功能型」中間件——大組件裏嵌特定小組件。

那若是大組件裏的數據要被多個子組件共享怎麼辦？若是繼續「硬植入」要繼續寫出「功能型組件1」，「功能型組件2」。。。這種方式很顯然破壞了前端功能化，讓維護和擴展都變的艱難。

render prop

render prop的出現，讓「子組件注入」變成了可能，在注入階段進行父子組件之間的傳值，從而實現了父子組件的解耦，具體參看react官網示例代碼，本地demo了一下，貼上來：

class Cat extends React.Component{
  render(){
    const mouse = this.props.mouse;
    return(
      <div>
        <img src={require("./cat.PNG")} style={{position:"absolute",left:mouse.x,top:mouse.y}} />
      </div>
    );
  }
}
//帶有函數prop的Mouse組件———render prop的由來
class Mouse extends React.Component{
  constructor(){
    super();
    this.state = {
      x:0,
      y:0
    };
    this.handleMouseMove = this.handleMouseMove.bind( this );
  }
  handleMouseMove( e ){
    this.setState( {
      x: e.clientX,
      y: e.clientY
    } );
  }
  render(){//用render注入的方式，能夠動態渲染注入對象
    return (<div style={{height:"900px",position:"relative"}} onMouseMove={this.handleMouseMove}>
      {this.props.render( this.state )}//調用render prop（函數引用），渲染注入的子組件 </div>);
  }
}
class MouseTracker extends React.Component{
  render(){
    return (<div className="customized-wrapper">
      <h1>Move the mouse around!</h1>
      <Mouse 
      render={ mouse => (//render接收一個箭頭函數引用，render做爲一個prop傳入子級 <Cat mouse={mouse}/>
        ) }
        />
    </div>);
  }
}

事實上，除了render prop以外，react組件也能夠接收用戶自定義的函數型屬性做爲注入依賴，固然也能夠在父級調用該prop實現render或其餘公用，用法於render相似，你們可在本地demo.

render prop實現了什麼？

1. 爲減小「硬植入」的功能型組件編寫提供瞭解決方案，固然不能爲了解耦而解耦，當某個父級只須要給一個子級傳遞數據時，大可沒必要進行這樣的解耦操做

2. 提供了一種簡單的「數據共享」機制，將數據使用方注入數據的提供方，實現了一種「按需供給」的機制，一份數據支持多方共享，很nice.

上述機制數據模型以下：

 

 

end

 

——May stars guide your way.