【译】TypeScript中的React Render Props

原文连接： https://medium.com/@jrwebdev/...

和以前的文章同样，本文也要求你对render props有一些知识背景，若是没有官方文档可能会对你有很大的帮助。本文将会使用函数做为children的render props模式以及结合React的context API来做为例子。若是你想使用相似于render这样子的render props，那也只须要把下面例子的children做为你要渲染的props便可。

---

为了展现render props，咱们将要重写以前文章的makeCounter HOC。这里先展现HOC的版本:

export interface InjectedCounterProps {
  value: number;
  onIncrement(): void;
  onDecrement(): void;
}

interface MakeCounterProps {
  minValue?: number;
  maxValue?: number;
}

interface MakeCounterState {
  value: number;
}

const makeCounter = <P extends InjectedCounterProps>(
  Component: React.ComponentType<P>
) =>
  class MakeCounter extends React.Component<
    Subtract<P, InjectedCounterProps> & MakeCounterProps,
    MakeCounterState
  > {
    state: MakeCounterState = {
      value: 0,
    };

    increment = () => {
      this.setState(prevState => ({
        value:
          prevState.value === this.props.maxValue
            ? prevState.value
            : prevState.value + 1,
      }));
    };

    decrement = () => {
      this.setState(prevState => ({
        value:
          prevState.value === this.props.minValue
            ? prevState.value
            : prevState.value - 1,
      }));
    };

    render() {
      const { minValue, maxValue, ...props } = this.props;
      return (
        <Component
          {...props as P}
          value={this.state.value}
          onIncrement={this.increment}
          onDecrement={this.decrement}
        />
      );
    }
  };

HOC向组件注入了value和两个回调函数（onIncrement 和 onDecrement），此外还在HOC内部使用minValue和maxValue两个props而没有传递给组件。咱们讨论了若是组件须要知道这些值，如何不传递props可能会出现问题，而且若是使用多个HOC包装组件，注入的props的命名也可能与其余HOC注入的props冲突。

makeCounter HOC将会被像下面这样重写:

interface InjectedCounterProps {
  value: number;
  onIncrement(): void;
  onDecrement(): void;
}

interface MakeCounterProps {
  minValue?: number;
  maxValue?: number;
  children(props: InjectedCounterProps): JSX.Element;
}

interface MakeCounterState {
  value: number;
}

class MakeCounter extends React.Component<MakeCounterProps, MakeCounterState> {
  state: MakeCounterState = {
    value: 0,
  };

  increment = () => {
    this.setState(prevState => ({
      value:
        prevState.value === this.props.maxValue
          ? prevState.value
          : prevState.value + 1,
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value:
        prevState.value === this.props.minValue
          ? prevState.value
          : prevState.value - 1,
    }));
  };

  render() {
    return this.props.children({
      value: this.state.value,
      onIncrement: this.increment,
      onDecrement: this.decrement,
    });
  }
}

这里有一些须要注意的变化。首先，injectedCounterProps被保留，由于咱们须要定义一个props的interface在render props函数调用上而不是传递给组件的props（和HOC同样）。MakeCounter（MakeCounterProps）的props已经改变，加上如下内容：

children(props: InjectedCounterProps): JSX.Element;

这是render prop，而后组件内须要一个函数带上注入的props并返回JSX element。下面是它用来突出显示这一点的示例：

interface CounterProps {
  style: React.CSSProperties;
  minValue?: number;
  maxValue?: number;
}

const Counter = (props: CounterProps) => (
  <MakeCounter minValue={props.minValue} maxValue={props.maxValue}>
    {injectedProps => (
      <div style={props.style}>
        <button onClick={injectedProps.onDecrement}> - </button>
        {injectedProps.value}
        <button onClick={injectedProps.onIncrement}> + </button>
      </div>
    )}
  </MakeCounter>
);

MakeCounter本身的组件声明变得简单多了；它再也不被包装在函数中，由于它再也不是临时的，输入也更加简单，不须要泛型、作差值和类型的交集。它只有简单的MakeCounterProps和MakeCounterState，就像其余任何组成部分同样：

class MakeCounter extends React.Component<
  MakeCounterProps, 
  MakeCounterState
>

最后，render（）的工做也变少了；它只是一个函数调用并带上注入的props-不须要破坏和对象的props扩展运算符展开了！

return this.props.children({
  value: this.state.value,
  onIncrement: this.increment,
  onDecrement: this.decrement,
});

而后，render prop组件容许对props的命名和在使用的灵活性上进行更多的控制，这是和HOC等效的一个问题：

interface CounterProps {
  style: React.CSSProperties;
  value: number;
  minCounterValue?: number;
  maxCounterValue?: number;
}

const Counter = (props: CounterProps) => (
  <MakeCounter
    minValue={props.minCounterValue}
    maxValue={props.maxCounterValue}
  >
    {injectedProps => (
      <div>
        <div>Some other value: {props.value}</div>
        <div style={props.style}>
          <button onClick={injectedProps.onDecrement}> - </button>
          {injectedProps.value}
          <button onClick={injectedProps.onIncrement}> + </button>
        </div>
        {props.minCounterValue !== undefined ? (
          <div>Min value: {props.minCounterValue}</div>
        ) : null}
        {props.maxCounterValue !== undefined ? (
          <div>Max value: {props.maxCounterValue}</div>
        ) : null}
      </div>
    )}
  </MakeCounter>
);

有了全部这些好处，特别是更简单的输入，那么为何不一直使用render props呢？固然能够，这样作不会有任何问题，但要注意render props组件的一些问题。

首先，这里有一个关注点之外的问题；MakeCounter组件如今被放在了Counter组件内而不是包装了它，这使得隔离测试这两个组件更加困难。其次，因为props被注入到组件的渲染函数中，所以不能在生命周期方法中使用它们（前提是计数器被更改成类组件）。

这两个问题都很容易解决，由于您可使用render props组件简单地生成一个新组件：

interface CounterProps extends InjectedCounterProps {
  style: React.CSSProperties;
}

const Counter = (props: CounterProps) => (
  <div style={props.style}>
    <button onClick={props.onDecrement}> - </button>
    {props.value}
    <button onClick={props.onIncrement}> + </button>
  </div>
);

interface WrappedCounterProps extends CounterProps {
  minValue?: number;
  maxValue?: number;
}

const WrappedCounter = ({
  minValue,
  maxValue,
  ...props
}: WrappedCounterProps) => (
  <MakeCounter minValue={minValue} maxValue={maxValue}>
    {injectedProps => <Counter {...props} {...injectedProps} />}
  </MakeCounter>
);

另外一个问题是，通常来讲，它不太方便，如今使用者须要编写不少样板文件，特别是若是他们只想将组件包装在一个单独的临时文件中并按原样使用props。这能够经过从render props组件生成HOC来补救：

import { Subtract, Omit } from 'utility-types';
import MakeCounter, { MakeCounterProps, InjectedCounterProps } from './MakeCounter';

type MakeCounterHocProps = Omit<MakeCounterProps, 'children'>;

const makeCounter = <P extends InjectedCounterProps>(
  Component: React.ComponentType<P>
): React.SFC<Subtract<P, InjectedCounterProps> & MakeCounterHocProps> => ({
  minValue,
  maxValue,
  ...props
}: MakeCounterHocProps) => (
  <MakeCounter minValue={minValue} maxValue={maxValue}>
    {injectedProps => <Component {...props as P} {...injectedProps} />}
  </MakeCounter>
);

在这里，上一篇文章的技术，以及render props组件的现有类型，被用来生成HOC。这里惟一须要注意的是，咱们必须从HOC的props中移除render prop(children)，以便在使用时不暴露它：

type MakeCounterHocProps = Omit<MakeCounterProps, 'children'>;

---

最后，HOC和render props组件之间的权衡归结为灵活性和便利性。这能够经过首先编写render props组件，而后从中生成HOC来解决，这使使用者可以在二者之间进行选择。这种方法在可重用组件库中愈来愈常见，例如优秀的render-fns库。

就TypeScript而言，毫无疑问，hocs的类型定义要困可贵多；尽管经过这两篇文章中的示例，它代表这种负担是由HOC的提供者而不是使用者承担的。在使用方面，能够认为使用HOC比使用render props组件更容易。

在react v16.8.0以前，我建议使用render props组件以提升键入的灵活性和简单性，若是须要，例如构建可重用的组件库，或者对于简单在项目中使用的render props组件，我将仅从中生成HOC。在react v16.8.0中释放react hook以后，我强烈建议在可能的状况下对两个高阶组件或render props使用它们，由于它们的类型更简单。