react render props

React Render Props 模式

概述

Render Props模式是一種很是靈活複用性很是高的模式，它能夠把特定行爲或功能封裝成一個組件，提供給其餘組件使用讓其餘組件擁有這樣的能力，接下來咱們一步一步來看React組件中如何實現這樣的功能。

React 組件數據傳遞

React中咱們能夠給一個組件傳遞一些props而且在組件內部展現，一樣的咱們也能夠傳遞一些組件一樣也是行得通的，一塊兒看一個例子

1. 組件普通數據傳遞

咱們能夠經過組件傳遞一些字符串數據，而且在組件內部渲染
下面的代碼很日常，咱們絕大多數代碼都是這樣。

const Foo = ({ title }) => (
  <div>
    <p>{title}</p>
  </div>
);
class App extends React.Component {
  render() {
    return (
      <div>
        <h2>這是一個示例組件</h2>
        <Foo title="你們好，我是土豆" />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'))複製代碼

2. 組件上傳遞組件

更進一步，咱們能夠在組件上傳遞普通的HTML 標籤和React 組件達到複用的目的

// https://codepen.io/tudou/full/OvdrPW
const Bar = () => (<p>我是Bar組件 ：）</p>);
const Foo = ({ title, component }) => (
  <div>
    <p>{title}</p>
    {component()}
  </div>
);
class App extends React.Component {
  render() {
    return (
      <div>
        <h2>這是一個示例組件</h2>
        <Foo title={<p>你們好，我是土豆</p>} component={() => <Bar /> } />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'))複製代碼

在上面的例子中傳遞普通的HTML 標籤對咱們複用組件沒有任何幫助，重點能夠看傳遞component這個參數，它傳遞給Foo組件一個函數這個函數返回的是一個Bar 組件，咱們會在Foo 組件中調用而且顯示component函數中的組件。咱們再來寫一個小的DEMO進行驗證。

3. 一個純粹的Render Props例子

// https://codepen.io/tudou/full/dmawvY
const Bar = ({ title }) => (<p>{title}</p>);

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: '我是一個state的屬性' };
  }
  render() {
    const { render } = this.props;
    const { title } = this.state;
    
    return (
      <div>
        {render(title)}
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>這是一個示例組件</h2>
        <Foo render={(title) => <Bar title={title} />} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'))複製代碼

在上面的例子中，給Foo 組件傳遞了一個render參數它是一個函數這個函數返回一個Bar組件，這個函數接受一個參數title他來自於Foo 組件調用時傳遞而且咱們又將title 屬性傳遞給了Bar 組件。通過上述的調用過程咱們的Bar 組件就能夠共享到Foo 組件內部的state 屬性`。

4. 經過children傳遞

這個demo略微不一樣於上面經過props傳遞，而它是經過組件的children傳遞一個函數給Foo 組件

// https://codepen.io/tudou/full/WzPPeL
const Bar = ({ title }) => (<p>{title}</p>);

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: '我是一個state的屬性' };
  }
  render() {
    const { children } = this.props;
    const { title } = this.state;
    
    return (
      <div>
        {children(title)}
      </div>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h2>這是一個示例組件</h2>
        <Foo>
          {(title) => (
            <Bar title={title} />
          )}
        </Foo>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'))複製代碼

觀察可發現只是寫法略微有些變法，咱們將要傳遞的數據放到的組件的children。實際上並沒有不一樣之處(都是傳遞一個函數)

<Foo>
  {(title) => (
    <Bar title={title} />
  )}
</Foo>複製代碼

注意事項

請注意當咱們的Foo 組件繼承於React.PureComponent的時候，咱們須要避免下面這樣的寫法。否則咱們的性能優化將付之東流。

render() {
    return (
      <div>
        <h2>這是一個示例組件</h2>
        <Foo render={(title) => <Bar title={title} />} />
      </div>
    );
  }複製代碼

若是你在render建立一個函數，在每次渲染的時候render prop將會是一個新的值，那麼每次將會從新渲染Bar。

正確的作法應該是在組件內部建立一個函數用於顯示組件

const Bar = ({ title }) => (<p>{title}</p>);

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: '我是一個state的屬性' };
  }
  render() {
    const { render } = this.props;
    const { title } = this.state;
    
    return (
      <div>
        {render(title)}
      </div>
    )
  }
}

class App extends React.Component {
  // 單首創建一個渲染函數
  renderFoo(title) {
    return <Bar title={title} />;
  }
  render() {
    return (
      <div>
        <h2>這是一個示例組件</h2>
        <Foo render={this.renderFoo} />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('app'))複製代碼

總結

學習瞭解Render Props渲染模式原理，使用了render和children兩種不一樣的渲染方法。

更新詳細的官方例子請參考https://reactjs.org/docs/render-props.html

摘自：www.cnblogs.com/monsterooo/…