关于react.js:React高级特性之Render-Props

render prop是一个技术概念。它指的是应用值为function类型的prop来实现React component之间的代码共享。

如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件外部的渲染逻辑是通过调用这个函数来实现的。那么，咱们就说这个组件应用了render props技术。

<DataProvider render={data => (
  <h1>Hello {data.target}</h1>
)}/>

不少类库都应用了这种技术，比如说：React Router和Downshift。

在这个文档外面，咱们将会探讨为什么render props是如此有用，你该如何编写本人的render props组件。

注释

应用Render Props来实现关注点拆散

在React中，组件是代码复用的根本单元（又来了，官网文档一直地在强调这个准则）。到目前为止，在React社区外面，对于共享state或者某些类似的行为（比如说，将一个组件封装进另一领有雷同state的组件）还没有一个清朗的计划。

举个例子，上面这个组件是用于在web利用中追踪鼠标的地位：

class MouseTracker 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}>
        <h1>Move the mouse around!</h1>
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

随着光标在屏幕下面挪动，这个组件将会在文档的<p>标签外面显示以后光标在x，y轴上的坐标值。

那么问题来了: 咱们该如何在别的组件复用这种行为（指的是监听mouseMove事件，获取光标的坐标值）呢？换句话说，如果别的组件也须要晓得目前光标的坐标值，那咱们能不能将这种行为封装好，而后在另外一个组件外面开箱即用呢？

因为，在React中，组件是代码复用的根本单元（again）。那好，咱们一起来重构一下代码，把咱们须要复用的行为封装到<Mouse>组件当中。

// The <Mouse> component encapsulates the behavior we need...
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}>

        {/* ...but how do we render something other than a <p>? */}
        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse />
      </div>
    );
  }
}

当初，<Mouse>组件看似把所有跟监听mousemove事件，保留光标的坐标值等相干的行为封装在一起了。实际上，它还不能达到真正的可复用。

假如，咱们须要实现这么一个组件。它须要渲染出一只用图片示意的猫去追赶光标在屏幕上挪动的视觉效果。咱们可能会通过向<Cat>组件传递一个叫mouse（它的值为{{x,y}}）的prop来取得以后光标所在位置。

首先，咱们会在<Mouse>组件的render办法外面插入这个<Cat>组件，像这样子：

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 MouseWithCat 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}>

        {/*          We could just swap out the <p> for a <Cat> here ... but then          we would need to create a separate <MouseWithSomethingElse>          component every time we need to use it, so <MouseWithCat>          isn't really reusable yet.        */}
        <Cat mouse={this.state} />
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <MouseWithCat />
      </div>
    );
  }
}

这种形式的实现可能对个别的场景有用，然而，咱们还是没有达成通过封装让这种行为真正地复用的指标。在别的利用场景下，每一次当咱们须要获取光标在屏幕上的坐标的时候，咱们都须要从新创立一个组件（例如，一个跟<MouseWithCat>类似组件）来实现这个业务场景所对应的渲染工作。

这个时候，就轮到render props 出场啦：相比间接把<Cat>这个组件硬编码到<Mouse>组件当中，刻意地去扭转<Mouse>组件的UI输入（也就是咱们从新定义一个<MouseWithCat>组件的起因）。更好的做法是，咱们能够给<Mouse>组件定义一个值为函数类型的prop，让这个prop本人来动静地决定要在Mouse组件的render办法要渲染货色。这个值为函数类型的prop就是咱们所说的render prop了。参考React实战视频解说：进入学习

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>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

当初，相比每一次都要反复地将<Mouse>组件的代码复制一遍，而后将咱们要渲染的货色硬编码到<Mouse>的render办法中去，咱们采取了一个更省力的方法。那就是给Mouse新增了一个render属性，让这个属性来决定要在<Mouse>组件中渲染什么。

更加具体和直白地说，一个render prop（这里不是代指技术，而是组件属性） 就是一个值为函数类型的prop。通过这个函数，咱们让挂载了这个prop的组件晓得本人要去渲染什么。

这种技术使得咱们之前想要共享的某些行为（的实现）变得十分之可移植（portable）。如果你想要失去这种行为，你只须要渲染一个带render属性的类<Mouse>组件到你的组件树当中就能够了。剩下的就让这个render prop来获取相干的数据（通过函数形参被实例化时失去。拿上述例子来说，就是（mouse）=> <Cat mouse={mouse}>的mouse）,而后决定如何干涉这个组件的渲染。

一个很有意思的，并值得咱们留神的事件是，你齐全能够通过一个带render属性的一般组件来实现大部分的HOC。举个例子，如果你在共享行为（监听mousemove事件，取得光标在屏幕上的坐标）时不想通过<Mouse>组件来实现，而是想通过高阶组件withMouse来实现的话，那么就能够很简略地通过创立一个带render prop的<Mouse>组件来达成：

// If you really want a HOC for some reason, you can easily
// create one using a regular component with a render prop!
function withMouse(Component) {
  return class extends React.Component {
    render() {
      return (
        <Mouse render={mouse => (
          <Component {...this.props} mouse={mouse} />
        )}/>
      );
    }
  }
}

能够这么说，render props（指技术）让HOC技术与其余技术（在这里，指它本人）的组合应用成为了可能。

render prop的prop名不肯定叫“render”

如下面的题目，你要牢牢记住，这种技术尽管叫render props，然而prop属性的名称不肯定非得叫“render”。实际上，只有组件上的某个属性值是函数类型的，并且这个函数通过本人的形参实例化时获取了这个组件的外部数据，参加到这个组件的UI渲染中去了，咱们就说这个组件利用了render props这种技术。

在下面的例子当中，咱们始终在应用“render”这个名称。实际上，咱们也能够轻易地换成children这个名称！

<Mouse children={mouse => (
  <p>The mouse position is {mouse.x}, {mouse.y}</p>
)}/>

同时，咱们也要记住，这个“children”prop不肯定非得列举在在JSX element的“属性”列表中。它实际上就是咱们平时用JSX申明组件时的children，因而你也能够像以前一样把它放在组件的外部。

<Mouse>
  {mouse => (
    <p>The mouse position is {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

在react-motion这个库的API中，你会看到这种写法的利用。

因为这种写法比拟少见，所以如果你这么做了，为了让看你代码的人不产生纳闷的话，你可能须要在动态属性propTypes中显式地申明一下children的数据类型必须为函数。

Mouse.propTypes = {
  children: PropTypes.func.isRequired
};

留神点

当跟React.PureComponent联合应用时，要当心

如果你在组件的render办法外面创立了一个函数的话，而后把这个函数赋值给这个组件的prop的话，那么失去的后果很有可能是违反了你初衷的。怎么说呢？因为一旦你这么做了，React在作shallow prop comparison的时候，new props都会被判断为不等于old props的。事实是，这么做恰好会导致在每一次render的调用的时候生成一个新的值给这个属性。

咱们持续拿下面的<Mouse>组件作为例子。如果<Mouse>组件继承了React.PureComponent的话，咱们的代码应该是像上面这样的：

class Mouse extends React.PureComponent {
  // Same implementation as above...
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>

        {/*          This is bad! The value of the `render` prop will          be different on each render.        */}
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

在下面的代码例子当中，每一次<MouseTracker>组件的render办法被调用的时候，它都会生成一个新的函数实例给<Mouse>组件，作为“render”属性的值。然而，咱们之所以继承React.PureComponent，就是想缩小<Mouse>组件被渲染的次数。如此一来，<Mouse>因为一个新的函数实例被迫断定为props曾经产生扭转了，于是乎进行了不必要的渲染。这与咱们的让<Mouse>组件继承React.PureComponent的初衷是相违反的。

为了避开（To get around）这个问题，你能够把render prop的值赋值为<MouseTracker>组件实例的一个办法，这样：

class MouseTracker extends React.Component {
  // Defined as an instance method, `this.renderTheCat` always
  // refers to *same* function when we use it in render
  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }

  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }
}

在某些场景下，你可能无奈把prop的值动态地赋值为组件实例的某个办法（例如，你须要笼罩组件的props值或者state值，又两者都要笼罩）。那么，在这种状况下，你只能老老实实地让<Mouse>组件去继承React.Component了。

【腾讯云】轻量 2核2G4M，首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布，转载请注明出处，谢谢。

标签：

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。