精读《Epitath 源码 - renderProps 新用法》

摘要：精读源码一共行，我们分析一下其精妙的方式。更多讨论讨论地址是精读新用法如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读帮你筛选靠谱的内容。

很高兴这一期的话题是由 epitath 的作者 grsabreu 提供的。

前端发展了 20 多年，随着发展中国家越来越多的互联网从业者涌入，现在前端知识玲琅满足，概念、库也越来越多。虽然内容越来越多，但作为个体的你的时间并没有增多，如何持续学习新知识，学什么将会是个大问题。

前端精读通过吸引优质的用户，提供最前沿的话题或者设计理念，虽然每周一篇文章不足以概括这一周的所有焦点，但可以保证你阅读的这十几分钟没有在浪费时间，每一篇精读都是经过精心筛选的，我们既讨论大家关注的焦点，也能找到仓库角落被遗忘的珍珠。

在介绍 Epitath 之前，先介绍一下 renderProps。

renderProps 是 jsx 的一种实践方式，renderProps 组件并不渲染 dom，但提供了持久化数据与回调函数帮助减少对当前组件 state 的依赖。

react-powerplug 就是一个 renderProps 工具库，我们看看可以做些什么：

  {({ on, toggle }) => }

Toggle 就是一个 renderProps 组件，它可以帮助控制受控组件。比如仅仅利用 Toggle，我们可以大大简化 Modal 组件的使用方式：

class App extends React.Component {
  state = { visible: false };

  showModal = () => {
    this.setState({
      visible: true
    });
  };

  handleOk = e => {
    this.setState({
      visible: false
    });
  };

  handleCancel = e => {
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      

        
          Open Modal
        
        
          
Some contents...
          
Some contents...
          
Some contents...
        
      
    );
  }
}

ReactDOM.render(, mountNode);

这是 Modal 标准代码，我们可以使用 Toggle 简化为：

class App extends React.Component {
  render() {
    return (
      
        {({ on, toggle }) => (
          
            Open Modal
          
          
            
Some contents...
            
Some contents...
            
Some contents...
          
        )}
      
    );
  }
}

ReactDOM.render(, mountNode);

省掉了 state、一堆回调函数，而且代码更简洁，更语义化。

renderProps 内部管理的状态不方便从外部获取，因此只适合保存业务无关的数据，比如 Modal 显隐。

renderProps 虽然好用，但当我们想组合使用时，可能会遇到层层嵌套的问题：

  {counter => {
    
      {toggle => {
        ;
      }}
    ;
  }}

因此 react-powerplugin 提供了 compose 函数，帮助聚合 renderProps 组件：

import { compose } from "react-powerplug"

const ToggleCounter = compose(
  ,
  
)


  {(toggle, counter) => (
    
  )}

Epitath 提供了一种新方式解决这个嵌套的问题：

const App = epitath(function*() {
  const { count } = yield 
  const { on } = yield 

  return (
    
  )
})

renderProps 方案与 Epitath 方案，可以类比为 回调 方案与 async/await 方案。Epitath 和 compose 都解决了 renderProps 可能带来的嵌套问题，而 compose 是通过将多个 renderProps merge 为一个，而 Epitath 的方案更接近 async/await 的思路，利用 generator 实现了伪同步代码。

Epitath 源码一共 40 行，我们分析一下其精妙的方式。

下面是 Epitath 完整的源码：

import React from "react";
import immutagen from "immutagen";

const compose = ({ next, value }) =>
  next
    ? React.cloneElement(value, null, values => compose(next(values)))
    : value;

export default Component => {
  const original = Component.prototype.render;
  const displayName = `EpitathContainer(${Component.displayName ||
    "anonymous"})`;

  if (!original) {
    const generator = immutagen(Component);

    return Object.assign(
      function Epitath(props) {
        return compose(generator(props));
      },
      { displayName }
    );
  }

  Component.prototype.render = function render() {
    // Since we are calling a new function to be called from here instead of
    // from a component class, we need to ensure that the render method is
    // invoked against `this`. We only need to do this binding and creation of
    // this function once, so we cache it by adding it as a property to this
    // new render method which avoids keeping the generator outside of this
    // method"s scope.
    if (!render.generator) {
      render.generator = immutagen(original.bind(this));
    }

    return compose(render.generator(this.props));
  };

  return class EpitathContainer extends React.Component {
    static displayName = displayName;
    render() {
      return ;
    }
  };
};

immutagen 是一个 immutable generator 辅助库，每次调用 .next 都会生成一个新的引用，而不是自己发生 mutable 改变：

import immutagen from "immutagen";

const gen = immutagen(function*() {
  yield 1;
  yield 2;
  return 3;
})(); // { value: 1, next: [function] }

gen.next(); // { value: 2, next: [function] }
gen.next(); // { value: 2, next: [function] }

gen.next().next(); // { value: 3, next: undefined }

看到 compose 函数就基本明白其实现思路了：

const compose = ({ next, value }) =>
  next
    ? React.cloneElement(value, null, values => compose(next(values)))
    : value;

const App = epitath(function*() {
  const { count } = yield ;
  const { on } = yield ;
});

通过 immutagen，依次调用 next，生成新组件，且下一个组件是上一个组件的子组件，因此会产生下面的效果：

yield 
yield 
yield 
// 等价于

  
    
  

讨论地址是：精读《Epitath - renderProps 新用法》 · Issue #106 · dt-fe/weekly