React组件设想形式-Render-props

2024年5月28日 216次阅读 来源: nero

写营业时，我们常常须要笼统一些运用频次较高的逻辑，然则除了高阶组件能够笼统逻辑，RenderProps也是一种比较好的要领。

RenderProps，望文生义就是将组件的props衬着出来。实际上是让组件的props吸收函数，由函数来衬着内容。将通用的逻辑
笼统在该组件的内部，然后根据营业逻辑来挪用函数（props内衬着内容的函数），从而到达重用逻辑的目标。

简朴完成

我们先看一个最简朴的RenderProps形式的完成：

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

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

运用时的代码以下：

<RenderProps>
    {() => <>Hello RenderProps</>}
</RenderProps>

以上未作任何的营业逻辑处置惩罚，有什么用途呢？我们能够想到，能够在 RenderProps 组件中去用代码操控返回的效果。
以最常见的用户登录逻辑为例，愿望在上岸以后才能够看到内容，不然展现请登录：

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


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

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)}
    </>
  }
}

运用要领以下：

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

这里，Auth组件的props吸收两个函数：login(示意已登录)，noLogin(表未登录)，
Auth组件内部，经由过程推断是不是上岸来决议显现哪一个组件。

总结

render-props作为一种笼统通用逻辑的要领，其自身也会碰到像高阶组件那样层层嵌套的题目。

<GrandFather>
  {Props => {
    <Father>
      {props => {
        <Son {...props} />;
      }}
    </Father>;
  }}
</GrandFather>

但和高阶组件差别的是，因为衬着的是函数(高阶组件衬着的是组件)，就为应用compose供应了时机。比方react-powerplugin。

import { compose } from 'react-powerplug'

const ComposeComponent = compose(
  <GrandFather />,
  <Father />
)
<ComposeComponent>
  {props => {
    <Son {...props} />;
  }}
<ComposeComponent/>

另有Epitath也供应了一种新形式来处理这个题目。这部份睁开来讲的话是另一个话题了，我也在探索中。

    原文作者：nero
    原文地址: https://segmentfault.com/a/1190000019411550
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞