ReactJS Render Props封装技巧

Render Props

一种在 React 组件之间使用一个值为函数的prop, 在React 组件间共享代码的简单技术

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) 座标。

假设我们现在有一个在屏幕上跟随鼠标渲染一张猫的图片的 <Cat>组件。我们可能使用 <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 }} />
    );
  }
}

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}>
        <Cat mouse={this.state} />
      </div>
    );
  }
}

这一方法对我们的具体用例来说能够生效，但我们却没法实现真正的将行为封装成可重用的方式的目标。现在，每次我们在不同的用例中想要使用鼠标的位置，我们就不得不创建一个新的针对那一用例渲染不同内容的组件 (如另一个关键的 <MouseWithCat>)。

HOC 高阶组件实现

class Cat extends React.Component {
    render() {
      const mouse = this.props.mouse
      return (
        <img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=550398634,1506778242&fm=202" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
      );
    }
  }
function withMouse(Component) {
    return class 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}>
            <Component mouse={this.state} />
          </div>
          )
      }
    }
  } 
  export default withMouse(Cat);

render prop 实现

我们可以提供一个带有函数 prop 的<Mouse>组件，它能够动态决定什么需要渲染的，而不是将 硬编码到 <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 {
  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>
    );
  }
}

render props 与HOC（ 高阶组件）组合

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}>
        {this.props.render(this.state)}
      </div>
    );
  }
}
function withMouse(Component) {
  return class extends React.Component {
    render() {
      return (
        <Mouse render={mouse => (
          <Component {...this.props} mouse={mouse} />
        )}/>
      );
    }
  }
}

尽管之前的例子使用了 render，我们也可以简单地使用 xxxx prop！

使用PureComponent的一个常见问题

class Mouse extends React.PureComponent {
 
}

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

        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

在这样例子中，每次 <MouseTracker>渲染，它会生成一个新的函数作为<Mouse render>的 prop，因而在同时也抵消了继承自 React.PureComponent 的<Mouse>组件的效果！

为了绕过这一问题，有时你可以定义一个 prop 作为实例方法，类似如下：

class MouseTracker extends React.Component {
  constructor(props) {
    super(props);

    this.renderTheCat = this.renderTheCat.bind(this);
  }

  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }

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

新特性 React Hooks 也可解决类似问题 https://juejin.im/post/5be3ea136fb9a049f9121014

参考链接https://react.docschina.org/docs/render-props.html#%E5%9C%A8%E4%BA%A4%E5%8F%89%E5%85%B3%E6%B3%A8%E7%82%B9%EF%BC%88cross-cutting-concerns%EF%BC%89%E4%BD%BF%E7%94%A8-render-props