React組件設計模式-Render-props

or0fun 發布于2019-08-23 18:00 / 3349人閱讀

摘要：實際上是讓組件的接收函數，由函數來渲染內容。將通用的邏輯抽象在該組件的內部，然后依據業務邏輯來調用函數內渲染內容的函數，從而達到重用邏輯的目的。當然，上邊通過傳入了這屬于組件的增強功能。還有也提供了一種新模式來解決這個問題。

寫業務時，我們經常需要抽象一些使用頻率較高的邏輯，但是除了高階組件可以抽象邏輯，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也提供了一種新模式來解決這個問題。這部分展開來說的話是另一個話題了，我也在摸索中。

云服務器 GPU云服務器組件設計 react _React React 源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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