React组件设计模式-Render-props

or0fun 发布于2019-08-23 18:00 / 3239人阅读

摘要：实际上是让组件的接收函数，由函数来渲染内容。将通用的逻辑抽象在该组件的内部，然后依据业务逻辑来调用函数内渲染内容的函数，从而达到重用逻辑的目的。当然，上边通过传入了这属于组件的增强功能。还有也提供了一种新模式来解决这个问题。

写业务时，我们经常需要抽象一些使用频率较高的逻辑，但是除了高阶组件可以抽象逻辑，RenderProps也是一种比较好的方法。

RenderProps，顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数，由函数来渲染内容。将通用的逻辑
抽象在该组件的内部，然后依据业务逻辑来调用函数（props内渲染内容的函数），从而达到重用逻辑的目的。

简单实现

我们先看一个最简单的RenderProps模式的实现：

const RenderProps = props => <>
    {props.children(props)}

在这里，RenderProps组件的子组件是一个函数props.children(props)，而props.children返回的是UI元素。

使用时的代码如下：


    {() => <>Hello RenderProps}

以上未作任何的业务逻辑处理，有什么用处呢？我们可以想到，可以在 RenderProps 组件中去用代码操控返回的结果。
以最常见的用户登录逻辑为例，希望在登陆之后才可以看到内容，否则展示请登录：

const Auth = props => {
    const userName = getUserName()
    if (userName) {
        const allProps = {userName, ...props}
        return <>
            {props.children(allProps)}
        
    } else {
        return <>请登录
    }
}



    {({userName}) => <>Hello！{userName}}

props.children(allProps) 就相当于Auth组件嵌套的({userName}) => <>Hello！{userName}

上边的例子中，用户若已经登陆，getUserName返回用户名，否则返回空。这样我们就可以判断返回哪些内容了。
当然，上边通过renderProps传入了userName,这属于Auth组件的增强功能。

函数名不仅可以是children

平时一般使用的时候，props.children都是具体的组件实例，但上边的实现是基于以函数为子组件（children(props)），被调用返回UI。
同样，可以调用props中的任何函数。还是以上边的逻辑为例：

const Auth = props => {
  const userName = "Mike"
  if (userName) {
    const allProps = { userName, ...props }
    return <>{props.login(allProps)}
  } else {
    return <>
      {props.noLogin(props)}
    
  }
}

使用方法如下：

 Hello {userName}}
    noLogin={() => please login}
  />

这里，Auth组件的props接收两个函数：login(表示已经登录)，noLogin(表未登录)，
Auth组件内部，通过判断是否登陆来决定显示哪个组件。

总结

render-props作为一种抽象通用逻辑的方法，其本身也会遇到像高阶组件那样层层嵌套的问题。


  {Props => {
    
      {props => {
        ;
      }}
    ;
  }}

但和高阶组件不同的是，由于渲染的是函数(高阶组件渲染的是组件)，就为利用compose提供了机会。例如react-powerplugin。

import { compose } from "react-powerplug"

const ComposeComponent = compose(
  ,
  
)

  {props => {
    ;
  }}

还有Epitath也提供了一种新模式来解决这个问题。这部分展开来说的话是另一个话题了，我也在摸索中。

混合云私有云组件设计 react _React React 源码

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

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

React 导读（四）

摘要：一前言在导读三中介绍了项目的背景功能需求项目结构以及组件的划分层次，接下来我们就来看下实际的代码，这一篇文章会主要分享用到的基础组件的封装。一、前言在 React 导读（三）中介绍了项目的背景、功能需求、项目结构以及组件的划分层次，接下来我们就来看下实际的代码，这一篇文章会主要分享用到的基础组件的封装。二、基础组件设计我们在设计组件之前本来是有一个流程和过程的，这里我写的组件...

cooxer 2019-08-22 15:35 评论0 收藏0
10分钟了解 react 引入的 Hooks

摘要：最近官方在大会上宣布内测将引入。所以我们有必要了解，以及由此引发的疑问。在进一步了解之前，我们需要先快速的了解一些基本的的用法。如何解决状态有关的逻辑的重用和共享问题。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好，我是谷阿莫，今天要将的是一个...，哈哈哈，看到这个题我就...

Lucky_Boy 2019-08-23 12:40 评论0 收藏0
精读《React Hooks》

摘要：更容易将组件的与状态分离。也就是只提供状态处理方法，不会持久化状态。大体思路是利用共享一份数据，作为的数据源。精读带来的约定函数必须以命名开头，因为这样才方便做检查，防止用判断包裹语句。前端精读帮你筛选靠谱的内容。 1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享，...

kohoh_ 2019-08-23 13:03 评论0 收藏0
精读《怎么用 React Hooks 造轮子》

摘要：可以看到，这样不仅没有占用组件自己的，也不需要手写回调函数进行处理，这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时，因此直接把回调函数抛出来即可。 1 引言上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是...

Shihira 2019-08-26 13:22 评论0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，将介绍开发应用时，经常用到的模式，这些模式并非都有官方名称，所以有些模式的命名并不一定准确，请读者主要关注模式的内容。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。本篇是React深入系列的最后一篇，将介绍开发React应用时，经常用到的模式，这些模式并非都有...

Chao 2019-08-22 17:28 评论0 收藏0