成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React組件設(shè)計(jì)模式-Render-props

or0fun / 3357人閱讀

摘要：實(shí)際上是讓組件的接收函數(shù)，由函數(shù)來(lái)渲染內(nèi)容。將通用的邏輯抽象在該組件的內(nèi)部，然后依據(jù)業(yè)務(wù)邏輯來(lái)調(diào)用函數(shù)內(nèi)渲染內(nèi)容的函數(shù)，從而達(dá)到重用邏輯的目的。當(dāng)然，上邊通過(guò)傳入了這屬于組件的增強(qiáng)功能。還有也提供了一種新模式來(lái)解決這個(gè)問(wèn)題。

寫業(yè)務(wù)時(shí)，我們經(jīng)常需要抽象一些使用頻率較高的邏輯，但是除了高階組件可以抽象邏輯，RenderProps也是一種比較好的方法。

RenderProps，顧名思義就是將組件的props渲染出來(lái)。實(shí)際上是讓組件的props接收函數(shù)，由函數(shù)來(lái)渲染內(nèi)容。將通用的邏輯
抽象在該組件的內(nèi)部，然后依據(jù)業(yè)務(wù)邏輯來(lái)調(diào)用函數(shù)（props內(nèi)渲染內(nèi)容的函數(shù)），從而達(dá)到重用邏輯的目的。

簡(jiǎn)單實(shí)現(xiàn)

我們先看一個(gè)最簡(jiǎn)單的RenderProps模式的實(shí)現(xiàn)：

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

在這里，RenderProps組件的子組件是一個(gè)函數(shù)props.children(props)，而props.children返回的是UI元素。

使用時(shí)的代碼如下：


    {() => <>Hello RenderProps}

以上未作任何的業(yè)務(wù)邏輯處理，有什么用處呢？我們可以想到，可以在 RenderProps 組件中去用代碼操控返回的結(jié)果。
以最常見(jiàn)的用戶登錄邏輯為例，希望在登陸之后才可以看到內(nèi)容，否則展示請(qǐng)登錄：

const Auth = props => {
    const userName = getUserName()
    if (userName) {
        const allProps = {userName, ...props}
        return <>
            {props.children(allProps)}
        
    } else {
        return <>請(qǐng)登錄
    }
}



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

props.children(allProps) 就相當(dāng)于Auth組件嵌套的({userName}) => <>Hello！{userName}

上邊的例子中，用戶若已經(jīng)登陸，getUserName返回用戶名，否則返回空。這樣我們就可以判斷返回哪些內(nèi)容了。
當(dāng)然，上邊通過(guò)renderProps傳入了userName,這屬于Auth組件的增強(qiáng)功能。

函數(shù)名不僅可以是children

平時(shí)一般使用的時(shí)候，props.children都是具體的組件實(shí)例，但上邊的實(shí)現(xiàn)是基于以函數(shù)為子組件（children(props)），被調(diào)用返回UI。
同樣，可以調(diào)用props中的任何函數(shù)。還是以上邊的邏輯為例：

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接收兩個(gè)函數(shù)：login(表示已經(jīng)登錄)，noLogin(表未登錄)，
Auth組件內(nèi)部，通過(guò)判斷是否登陸來(lái)決定顯示哪個(gè)組件。

總結(jié)

render-props作為一種抽象通用邏輯的方法，其本身也會(huì)遇到像高階組件那樣層層嵌套的問(wèn)題。


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

但和高階組件不同的是，由于渲染的是函數(shù)(高階組件渲染的是組件)，就為利用compose提供了機(jī)會(huì)。例如react-powerplugin。

import { compose } from "react-powerplug"

const ComposeComponent = compose(
  ,
  
)

  {props => {
    ;
  }}

還有Epitath也提供了一種新模式來(lái)解決這個(gè)問(wèn)題。這部分展開(kāi)來(lái)說(shuō)的話是另一個(gè)話題了，我也在摸索中。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104501.html

相關(guān)文章

  • React 導(dǎo)讀（四）

    摘要：一前言在導(dǎo)讀三中介紹了項(xiàng)目的背景功能需求項(xiàng)目結(jié)構(gòu)以及組件的劃分層次，接下來(lái)我們就來(lái)看下實(shí)際的代碼，這一篇文章會(huì)主要分享用到的基礎(chǔ)組件的封裝。 一、前言 在 React 導(dǎo)讀（三） 中介紹了項(xiàng)目的背景、功能需求、項(xiàng)目結(jié)構(gòu)以及組件的劃分層次，接下來(lái)我們就來(lái)看下實(shí)際的代碼，這一篇文章會(huì)主要分享用到的基礎(chǔ)組件的封裝。 二、基礎(chǔ)組件設(shè)計(jì) 我們?cè)谠O(shè)計(jì)組件之前本來(lái)是有一個(gè)流程和過(guò)程的，這里我寫的組件...

    cooxer 評(píng)論0 收藏0

  • 10分鐘了解 react 引入的 Hooks

    摘要：最近官方在大會(huì)上宣布內(nèi)測(cè)將引入。所以我們有必要了解，以及由此引發(fā)的疑問(wèn)。在進(jìn)一步了解之前，我們需要先快速的了解一些基本的的用法。如何解決狀態(tài)有關(guān)的邏輯的重用和共享問(wèn)題。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好，我是谷阿莫，今天要將的是一個(gè)...，哈哈哈，看到這個(gè)題我就...

    Lucky_Boy 評(píng)論0 收藏0

  • 精讀《React Hooks》

    摘要：更容易將組件的與狀態(tài)分離。也就是只提供狀態(tài)處理方法，不會(huì)持久化狀態(tài)。大體思路是利用共享一份數(shù)據(jù)，作為的數(shù)據(jù)源。精讀帶來(lái)的約定函數(shù)必須以命名開(kāi)頭，因?yàn)檫@樣才方便做檢查，防止用判斷包裹語(yǔ)句。前端精讀幫你篩選靠譜的內(nèi)容。 1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想嘗試的同學(xué)安裝此版本即可。 React Hooks 要解決的問(wèn)題是狀態(tài)共享，...

    kohoh_ 評(píng)論0 收藏0

  • 精讀《怎么用 React Hooks 造輪子》

    摘要：可以看到，這樣不僅沒(méi)有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過(guò)拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來(lái)即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...

    Shihira 評(píng)論0 收藏0

  • React 深入系列7：React 常用模式

    摘要：本篇是深入系列的最后一篇，將介紹開(kāi)發(fā)應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請(qǐng)讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 本篇是React深入系列的最后一篇，將介紹開(kāi)發(fā)React應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有...

    Chao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

or0fun

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<