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

官方例子在线参考 https://codesandbox.io/embed/1075p1yov3

若是喜欢请关注

谢谢阅读