Render props、render callback 和高阶组件皆可互换

姘搁『发布于2019-08-22 18:28 / 2136人阅读

摘要：现在来看看怎么使用高阶组件来达到同样的目的。在这个新的组件里包含了加强的和等内容。有时会遇到一个提供了的库，但是你喜欢的是高阶组件。我们来根据上面的例子来加一些方法可以让高阶组件和模式可以互相转换。总结，回调绘制和高阶组件都是可以互换的。

让 render-xxx 模式都可以互换。

基础

所有上面提到的三种模式都是为了处理 mixin 要处理的问题的。在我们继续之前，我们来看一些例子。

如果你已经掌握这两个概念，可以直接跳过这一节看后面的内容

Render Prop

首先，我们来写一个组件来记录 count，并绘制 render prop 里的绘制都在 render 方法里调用了。

class CounterComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  update = type => {
    if (type === "Inc") {
      this.setState(({ count }) => ({ count: count + 1 }));
    } else if (type === "Dec") {
      this.setState(({ count }) => ({ count: count - 1 }));
    }
  };

  render() {
    return this.props.render({
      ...this.state,
      ...this.props,
      update: this.update
    });
  }
}

注意：callback 属性也可以叫个别的名字，不一定就是 render。只不过这个模式叫做 render prop。

接下来我们需要一个组件来把需要的内容绘制到屏幕上：

const Counter = ({ count, update }) => {
  
    
    {count}
    
  ;
};

Counter组件接受 count 值和一个 update 方法，然后显示一个增加、一个减少按钮以及当前的 count 值。

最后我们可以用CounterComponent组件来给Counter增加一些其他的功能：

render(
   >} />,
  document.getElementById("root")
);

高阶组件

上文讲解了 render prop 模式。现在来看看怎么使用高阶组件来达到同样的目的。

const withCounter = Component =>
  class Hoc extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: 0 };
    }

    update = type => {
      if (type === "Inc") {
        this.setState(({ count }) => ({ count: count + 1 }));
      } else if (type === "Dec") {
        this.setState(({ count }) => ({ count: count - 1 }));
      }
    };

    render() {
      return 
    }
  };

看上面的例子，我们可以要把需要绘制的组件放到另外一个全新的组件里面去。在这个新的组件里包含了加强的 state 和 props 等内容。

const CounterExample = withCounter(Counter);
render(, document.getElementById("root"));

目前我们已经覆盖了基本的概念。我们可以使用不同的模式来达到相同的目的。下面我们来关注一下如何让这几个模式达到互换的目的。

在 render props 和高阶组件之间转换

有的时候你用的库提供了一个高级组件，但是你最喜欢的是通过JSX的方式来使用组件。有时会遇到一个提供了 render props 的库，但是你喜欢的是高阶组件。一个很有趣的事实是这些模式可以幻想转换。

我们来根据上面的例子来加一些方法可以让高阶组件和 render props 模式可以互相转换。

fromHoc: HOC -> RenderProp
toHoc: RenderProp -> HOC

toHoc方法可以归结为：

toHoc: Render => Comp => props => (
   } />
);

你也可以看使用 Render Props来作为替代实现。

它会把一个 render prop 模式转化为高阶组件。

const withCounter = toHoc(CounterComponent);
const CounterExample = withCounter(Counter);

从高阶组件转化为 render prop 有一点麻烦。我们需要把一个 render prop 的组件传入到高阶组件里。多亏了 Brent Jackon 的这篇文章。

fromHoc: hoc => {
  class Render extends React.Component {
    render() {
      return this.props.children(this.props);
    }
  }

  return hoc(Render);
};

或者，使用两外一种不用 class 的方式。这次要感谢 Rodrigo Pombo 的这个例子。

fromHoc: hoc => hoc(props => props.render(props));

我们可以写一个轻量的 helper 方法来实现高阶组件和 renderprops 的转化。注意，我们也可以在初始化 toHoc 方法的时候使用另外的 render name，因为 render prop 可以能有一个不一样的名字，或者是一个子 prop。

const iso = {
  fromHoc: hoc => hoc(props => props.render(props)),
  toHoc: Render => Compo => props => (
     } />
  )
};

总结

Render prop，回调绘制和高阶组件都是可以互换的。大多数的时候 render props 可以满足要求。但是你也可以通过某些方法让它在这些模式之间互相转换。

非常感谢 Brent Jackson，Kent C. Dodds 以及 Rodrigo Pombot 提供了fromHoc方法的实现，帮我们解决了不少的问题。

服务器托管超融合服务器 render render 流程 webrtc render render流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95885.html

从Preact了解一个类React的框架是怎么实现的(三): 组件

摘要：组件渲染首先我们来了解组件返回的虚拟是怎么渲染为真实，来看一下的组件是如何构造的可能我们会想当然地认为组件的构造函数定义将会及其复杂，事实上恰恰相反，的组件定义代码极少。前言　　首先欢迎大家关注我的掘金账号和Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励。　　之前分享过几篇关于React的文章: React技术内幕: k...

AlphaWatch 2019-08-21 17:16 评论0 收藏0
React组件设计技巧

摘要：我们可以通过刚刚高阶函数的思想来创建一个中间组件，也就是我们说的高阶组件。仅传递组件所需要的属性。在受控组件中，表单数据由组件负责处理。作为顶层组件接收一个名为的，可以接收任意需要被放入中的字符串，数字，甚至是函数。 React组件设计组件分类展示组件和容器组件展示组件容器组件关注事物的展示关注事物如何工作可能包含展示和容器组件，并且一般会有DOM标签和cs...

Luosunce 2019-08-22 17:31 评论0 收藏0
[译] React.js 模式

摘要：此时，我将它写下来讨论和分享这些我发现的模式。正确的姿势应该是通过的方式获取子组件的一些信息。高阶组件是需要另外一个有用的模式依赖注入。也有部分人称它是一种模式。最直接的方式是通过每一层通过来传递。原文出自：http://krasimirtsonev.com/blog/article/react-js-in-design-patterns 前言我想找一个好的前端前端框架，找了很久。...

mumumu 2019-08-20 10:50 评论0 收藏0
React的组件模式

摘要：有状态组件通常使用和生命周期相关事件。组件模式是使用时的最佳实践，最初引入组件模式是为了将数据逻辑和表现层进行分离。这是一种可以对输入组件的进行修改增删改查然后返回全新的修改后的组件强大模式，想想和。 showImg(https://segmentfault.com/img/bVborAV?w=2560&h=1440); 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着...

Muninn 2019-08-23 15:19 评论0 收藏0