Render Props - New pattern in React

在软件开发的过程当中Code Reuse和可读性一直是开发人员致力于解决的问题，在React社区中，以往出现了不少的Pattern来解决这个问题，例如Mixin，HOC等等。Render Props是React社区中里提出的另外的一种Pattern。由React Router的Co-author Michael Jackson 提出，它与HOC等有什么区别呢？又解决了什么问题呢？在这篇文章来一探究竟。

问题的引出

全部的Pattern或者solution都是为了解决问题而提出的，那么render props究竟是为了解决什么问题呢？咱们先来看一个例子。例如在咱们的App里咱们实现了这样一个component

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    };
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: 800 }} onMouseMove={this.handleMouseMove}> <p> The mouse is at ({this.state.x}, {this.state.y}) </p> </div>
    );
  }
}    
复制代码

Code Sandbox

熟悉React的同窗都知道这是一个很简单的App，他能够追踪鼠标位置给到本身。可是问题来了，万一哪天你的朋友看到这个component，说这个feature很Cool，他的app里能不能用上呢？那么该怎么解决这个问题呢？

Code Repeat

首先第一种想法很直接，能够把这个component作为一个父Component，另一个Component做为一个子Component。来看代码。

import React from 'react';

const Dog = ({mouse}) => (
    <div>{mouse.x}, {mouse.y}</div>
)

class MouseDog extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    };
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: 800 }} onMouseMove={this.handleMouseMove}> <p> The mouse is at ({this.state.x}, {this.state.y}) <Dog mouse={mouse} /> </p> </div> ); } } 复制代码

如今咱们有了两个Component, Dog 和 DogWithMouse,其实Dog做为DogWithMouse的子Component，那么DogWithMouse Component就能利用鼠标位置。好像这样是把问题解决了，可是若是咱们有另一个Component也想要trace mouse这个feature怎么办呢？难道再从新这样写一个Component吗？显然这种方式是不可取的。

HOC

若是熟悉react的同窗，可能会想到，这很简单呀，咱们写一个High order Component（HOC）就好了，的确HOC能够解决这个问题，咱们来看看HOC的代码是怎么样的。

import React from 'react';

const withMouse = (Component) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        x: 0,
        y: 0
      };
      this.handleMouseMove = this.handleMouseMove.bind(this);
    }

    handleMouseMove(event) {
      this.setState({
        x: event.clientX,
        y: event.clientY
      });
    }

    render() {
      return (
        <div style={{ height: 800 }} onMouseMove={this.handleMouseMove}> <Component mouse={this.state} {...this.props} /> </div> ); } } } const Dog = ({ mouse }) => <div>{mouse.x}, {mouse.y}</div> const EnhancedDog = withMouse(Dog) 复制代码

在上面的代码里，咱们建立了一个withMouse的HOC, 这样就把这部分逻辑抽象了出来。其余的Component想要使用咱们mouse tracking的feature。只要将Component传入HOC就能获得一个enhance过的Component。pretty cool， right？若是对于HOC不太了解，能够参考react 的官方文档进行了解。 HOC

HOC彷佛已经完美的解决了问题，可是这种方式有没有什么缺点呢？彷佛是有下面的一些缺点。

1. 间接的props传入。 让咱们从新看一看Dog Component，他的props传入了mouse，可是在使用这个Component的时候，并无地方传入了mouse。这是由于mouse是在HOC里传入的。你大概会纳闷这个Mouse是从那来的。若是维护一个大项目的时候，有时候你就会发现这种间接的props传入，是有多么坑了。

2. 命名冲突的问题。 用过react的同窗不知道有没有经历过大量使用HOC的场景，笔者是见过多层HOC嵌套使用的项目代码。就像这样： const NewComponent = withA(withB(withC(...(Component)))) 若是你用过这样的多层嵌套的HOC，那么就可能会发生命名冲突的问题。来看代码：

const withB = (Component) => {
  return class extends React.Component {
    render() {
      return (
        <div style={{ height: 800 }} > <Component mouse={'hehe'} {...this.props} /> </div> ); } } } const EnhancedDog = withB(withMouse(Dog)) 复制代码

在这里定义另外的一个HOC withB。它也给props上传了一个一样的mouse， 若是再用它来wrap withMouse(Dog) 时，你会发现mouse tracking的feature就不work，可是React不会有任何提示，这是命名冲突的问题。若是你有一个七八层的wrapp到一块儿的Component，若是出现这样的命名冲突的问题，那么就有的debug了。

Render props

好了，既然HOC有这样的问题，那有没有什么方式既能够作到code reuse，同时也能够避免HOC的这些问题呢？答案就是Render Props。Render Props是React Traning团队提出的一种新的React中组织Component的方式，同时也是十分的简单，咱们来看上边的例子中，若是用render props如何解决code reuse的问题。

import React from 'react';
import { render } from "react-dom";

class Mouse extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0
    };
    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: 800 }} onMouseMove={this.handleMouseMove}> {this.props.render(this.state)} </div>
    );
  }
}

const DogMouse = () => (
  <Mouse render={({x, y}) => (<div>this mouose is ({x}, {y})</div>})> ) render(<DogMouse/>, document.getElementById('app')) 复制代码

CodeSandBox

上边就是render props的一个简单例子，咱们看完会发现特别的简单，没什么特别的。Mouse就是一个普通的Component，惟一不一样的是这个Component上定义了一个叫render的prop，是一个函数。在Mouse中会将state做为参数调用这个函数。而建立的DogMouse一样也是一个普通的Component，其中定义render的方法，用于定义要render什么Component。咱们看看render props和HOC相比解决了什么问题：

1. code reuse。和HOC同样的，render props一样解决了code reuse的问题。把mouse tracking的feature抽象成为一个Mouse的Component，若是有另一个Component像复用这个feature的时候，简单的定义另一个Component定义相应的render props就行了。

2. 间接的props传入，render props 没有这个问题，能够清楚的看到props(x, y)是从什么地方出入的.

3. 命名冲突。利用render props是没有Component wrapp的，因此除非定义Component时候本身命名重复，不然不会有命名冲突的问题。

从上面的例子上看，render props能够再大多数状况下替代HOC。react的官方文档上，目前也正式的介绍了render props,下次让你想用HOC的时候，来试一试Render props把。