資訊專欄INFORMATION COLUMN
摘要：實際上是讓組件的接收函數(shù)，由函數(shù)來渲染內(nèi)容。將通用的邏輯抽象在該組件的內(nèi)部，然后依據(jù)業(yè)務(wù)邏輯來調(diào)用函數(shù)內(nèi)渲染內(nèi)容的函數(shù)，從而達(dá)到重用邏輯的目的。當(dāng)然，上邊通過傳入了這屬于組件的增強功能。還有也提供了一種新模式來解決這個問題。
寫業(yè)務(wù)時，我們經(jīng)常需要抽象一些使用頻率較高的邏輯，但是除了高階組件可以抽象邏輯，RenderProps也是一種比較好的方法。
RenderProps，顧名思義就是將組件的props渲染出來。實際上是讓組件的props接收函數(shù)，由函數(shù)來渲染內(nèi)容。將通用的邏輯
抽象在該組件的內(nèi)部，然后依據(jù)業(yè)務(wù)邏輯來調(diào)用函數(shù)（props內(nèi)渲染內(nèi)容的函數(shù)），從而達(dá)到重用邏輯的目的。
我們先看一個最簡單的RenderProps模式的實現(xiàn)：
const RenderProps = props => <>
{props.children(props)}
在這里，RenderProps組件的子組件是一個函數(shù)props.children(props)，而props.children返回的是UI元素。
使用時的代碼如下：
{() => <>Hello RenderProps}
以上未作任何的業(yè)務(wù)邏輯處理，有什么用處呢？我們可以想到，可以在 RenderProps 組件中去用代碼操控返回的結(jié)果。
以最常見的用戶登錄邏輯為例，希望在登陸之后才可以看到內(nèi)容，否則展示請登錄：
const Auth = props => {
const userName = getUserName()
if (userName) {
const allProps = {userName, ...props}
return <>
{props.children(allProps)}
} else {
return <>請登錄
}
}
{({userName}) => <>Hello！{userName}}
props.children(allProps) 就相當(dāng)于Auth組件嵌套的({userName}) => <>Hello！{userName}
上邊的例子中，用戶若已經(jīng)登陸，getUserName返回用戶名，否則返回空。這樣我們就可以判斷返回哪些內(nèi)容了。
當(dāng)然，上邊通過renderProps傳入了userName,這屬于Auth組件的增強功能。
平時一般使用的時候，props.children都是具體的組件實例，但上邊的實現(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接收兩個函數(shù)：login(表示已經(jīng)登錄)，noLogin(表未登錄)，
Auth組件內(nèi)部，通過判斷是否登陸來決定顯示哪個組件。
render-props作為一種抽象通用邏輯的方法，其本身也會遇到像高階組件那樣層層嵌套的問題。
{Props => { {props => { ; }}; }}
但和高階組件不同的是，由于渲染的是函數(shù)(高階組件渲染的是組件)，就為利用compose提供了機會。例如react-powerplugin。
import { compose } from "react-powerplug"
const ComposeComponent = compose(
{props => {
還有Epitath也提供了一種新模式來解決這個問題。這部分展開來說的話是另一個話題了，我也在摸索中。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104501.html
摘要：一前言在導(dǎo)讀三中介紹了項目的背景功能需求項目結(jié)構(gòu)以及組件的劃分層次，接下來我們就來看下實際的代碼，這一篇文章會主要分享用到的基礎(chǔ)組件的封裝。 一、前言 在 React 導(dǎo)讀（三） 中介紹了項目的背景、功能需求、項目結(jié)構(gòu)以及組件的劃分層次，接下來我們就來看下實際的代碼，這一篇文章會主要分享用到的基礎(chǔ)組件的封裝。 二、基礎(chǔ)組件設(shè)計 我們在設(shè)計組件之前本來是有一個流程和過程的，這里我寫的組件...
摘要：最近官方在大會上宣布內(nèi)測將引入。所以我們有必要了解，以及由此引發(fā)的疑問。在進(jìn)一步了解之前，我們需要先快速的了解一些基本的的用法。如何解決狀態(tài)有關(guān)的邏輯的重用和共享問題。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好，我是谷阿莫，今天要將的是一個...，哈哈哈，看到這個題我就...
摘要：更容易將組件的與狀態(tài)分離。也就是只提供狀態(tài)處理方法，不會持久化狀態(tài)。大體思路是利用共享一份數(shù)據(jù)，作為的數(shù)據(jù)源。精讀帶來的約定函數(shù)必須以命名開頭，因為這樣才方便做檢查，防止用判斷包裹語句。前端精讀幫你篩選靠譜的內(nèi)容。 1 引言 React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想嘗試的同學(xué)安裝此版本即可。 React Hooks 要解決的問題是狀態(tài)共享，...
摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都壓縮成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實現(xiàn)等價于的回調(diào)僅執(zhí)行一次時，因此直接把回調(diào)函數(shù)拋出來即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實現(xiàn)了對 React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實現(xiàn)剖析（就是數(shù)組），但理解實現(xiàn)原理就可以用好了嗎？學(xué)的是...
摘要：本篇是深入系列的最后一篇，將介紹開發(fā)應(yīng)用時，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 本篇是React深入系列的最后一篇，將介紹開發(fā)React應(yīng)用時，經(jīng)常用到的模式，這些模式并非都有...
閱讀 2014·2021-10-12 10:12
閱讀 3137·2019-08-30 15:44
閱讀 896·2019-08-30 15:43
閱讀 3060·2019-08-30 14:02
閱讀 2158·2019-08-30 12:54
閱讀 3566·2019-08-26 17:05
閱讀 2055·2019-08-26 13:34
閱讀 1108·2019-08-26 11:54
