Render props是什么

小編給大家分享一下Render props是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Render props

Rrender prop 是指一種在 React 組件之間使用一個值為函數的 prop 共享代碼的簡單技術, 和 HOC 類似， 都是組件間的邏輯復用問題。

更具體地說，Render prop 是一個用于告知組件需要渲染什么內容的函數。

下面看一下簡單的例子：

以下組件跟蹤 Web 應用程序中的鼠標位置：

class Mouse extends React.Component {  state = { x: 0, y: 0 };  handleMouseMove = (event) => {    this.setState({      x: event.clientX,      y: event.clientY    });  }  render() {    return (      <p style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>      </p>    );  }}class MouseTracker extends React.Component {  render() {    return (      <>        <h2>移動鼠標!</h2>        <Mouse />      </>    );  }}

當光標在屏幕上移動時，組件顯示其（x，y）坐標。

現在的問題是：

我們如何在另一個組件中復用這個行為？

換個說法，若另一個組件需要知道鼠標位置，我們能否封裝這一行為，以便輕松地與其他組件共享它 ？？

假設產品想要這樣一個功能： 在屏幕上呈現一張在屏幕上追逐鼠標的貓的圖片。

我們或許會使用 <Cat mouse={{ x, y }} prop 來告訴組件鼠標的坐標以讓它知道圖片應該在屏幕哪個位置。

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 }} />    );  }}

這個需求如此簡單，你可能就直接修改Mouse組件了：

class Mouse extends React.Component {  state = { x: 0, y: 0 };  handleMouseMove = (event) => {    this.setState({      x: event.clientX,      y: event.clientY    });  }  render() {    return (      <p style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>        <Cat mouse={this.state} />      </p>    );  }}

巴適～ 簡單粗暴， 一分鐘完成任務。

可是，如果下次產品再要想加條狗呢？

以上的例子，雖然可以完成了貓追鼠標的需求，還沒有達到以可復用的方式真正封裝行為的目標。

當我們想要鼠標位置用于不同的用例時，我們必須創建一個新的組件，專門為該用例呈現一些東西.

這也是 render prop 的來歷：

我們可以提供一個帶有函數 prop 的 <Mouse> 組件，它能夠動態決定什么需要渲染的，而不是將 <Cat> 硬編碼到 <Mouse> 組件里.

修改一下上面的代碼：

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 {  state = { x: 0, y: 0 };  handleMouseMove = (event) => {    this.setState({      x: event.clientX,      y: event.clientY    });  }  render() {    return (      <p style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>        {this.props.render(this.state)}      </p>    );  }}class MouseTracker extends React.Component {  render() {    return (      <p>        <h2>移動鼠標!</h2>        <Mouse render={mouse => (          <Cat mouse={mouse} />        )}/>      </p>    );  }}

提供了一個render 方法，讓動態決定什么需要渲染。

事實上，render prop 是因為模式才被稱為 render prop ，不一定要用名為 render 的 prop 來使用這種模式。

任何被用于告知組件需要渲染什么內容的函數 prop, 在技術上都可以被稱為 "render prop".

另外，關于 render prop 一個有趣的事情是你可以使用帶有 render prop 的常規組件來實現大多數高階組件 (HOC)。

例如，如果你更喜歡使用 withMouse HOC 而不是 <Mouse> 組件，你可以使用帶有 render prop 的常規 <Mouse> 輕松創建一個：

function withMouse(Component) {  return class extends React.Component {    render() {      return (        <Mouse render={mouse => (          <Component {...this.props} mouse={mouse} />        )}/>      );    }  }}

也是非常的簡潔清晰。

有一點需要注意的是， 如果你在定義的render函數里創建函數， 使用 render prop 會抵消使用 React.PureComponent 帶來的優勢。

因為淺比較 props 的時候總會得到 false，并且在這種情況下每一個 render 對于 render prop 將會生成一個新的值。

class Mouse extends React.PureComponent {  // 與上面相同的代碼......}class MouseTracker extends React.Component {  render() {    return (      <>        <Mouse render={mouse => ( // 這是不好的！ 每個渲染的 `render` prop的值將會是不同的。          <Cat mouse={mouse} />        )}/>      </>    );  }}

在這樣例子中，每次 <MouseTracker> 渲染，它會生成一個新的函數作為 <Mouse render> 的 prop，因而在同時也抵消了繼承自 React.PureComponent 的 <Mouse> 組件的效果.

為了繞過這一問題，有時你可以定義一個 prop 作為實例方法，類似這樣：

class MouseTracker extends React.Component {  renderTheCat(mouse) {    return <Cat mouse={mouse} />;  }  render() {    return (      <p>        <h2>Move the mouse around!</h2>        <Mouse render={this.renderTheCat} />      </p>    );  }}

以上是“Render props是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！