欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Render Props共享代碼技術(shù)

 更新時間:2023年01月29日 09:19:00   作者:綠胡子大叔  
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術(shù)。簡單來說,給一個組件傳入一個prop,這個props是一個函數(shù),函數(shù)的作用是用來告訴這個組件需要渲染什么內(nèi)容,那么這個prop就成為render prop

介紹

  • Render Props是指在React組件之間使用一個值為函數(shù)的prop共享代碼的技術(shù)
  • 具有render prop的組件接受一個返回React元素的函數(shù),并在組件內(nèi)部通過調(diào)用此函數(shù)來實現(xiàn)自己的渲染邏輯
  • 主要用于抽離邏輯,進行代碼復(fù)用

使用

以官方文檔的Mouse & Cat示例為例

  • 創(chuàng)建Mouse組件,此組件僅用于提供復(fù)用的狀態(tài)邏輯代碼(狀態(tài)、方法等)
  • 將復(fù)用的狀態(tài)作為props.render(state)方法的參數(shù),暴露到組件外部
  • 使用props.render()的返回值作為要渲染的內(nèi)容
import React from 'react'
class Mouse extends React.Component {
	// 省略操作方法
	render(){
		return this.props.render(this.state)
	}
}
//根組件
export default class App extends React.Component {
	render(){
		<Mouse render={ mouse => (
			<div>當前鼠標位置 {mouse.x} {mouse.y}<div>
		)}/>
		//此處的mouse參數(shù)實際上為Mouse組件的state,因為這個函數(shù)是在Mouse組件的render()中傳參調(diào)用的
	}
}

注意:并不是該模式名叫render props就一定要用名為renderprop。你可以使用任意名稱的prop,它只是一個接收返回React元素的函數(shù)的prop。

實際上,視圖是由父組件傳入的返回React元素的函數(shù)決定的,Mouse組件中的render()生命周期函數(shù)只是調(diào)用這個由prop傳入的函數(shù),并由該函數(shù)返回視圖

使用children prop代替render prop

也可以使用組合模式來實現(xiàn)組件間的代碼重用,該方法類似于Vue中Slot的概念

import React from 'react'
class Mouse extends React.Component {
	// 省略操作方法
	render(){
		return this.props.children(this.state)
	}
}
//根組件
export default class App extends React.Component {
	render(){
		<Mouse>
			{ mouse => (
				<div>當前鼠標位置 {mouse.x} {mouse.y}<div>
			)}
		</Mouse>
	}
}

由于這一技術(shù)需要向組件傳遞一個函數(shù),所以推薦對children進行類型檢查

import PropTypes from 'prop-types'
Mouse.propTypes = {
	children: PropTypes.func.isRequired
}

Render props 與 React.PureComponent 同時使用

注意

如果在render方法中創(chuàng)建函數(shù),那么使用render prop會抵消使用React.PureComponent帶來的優(yōu)勢

因為每次調(diào)用render()進行渲染時都會創(chuàng)建一個新的函數(shù),這將導(dǎo)致淺比較props的時候prevProps === nextProps始終為false

class Mouse extends React.PureComponent {
  // 與上面相同的代碼......
}
class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

在這個示例中,由于Mouse組件的render prop傳輸?shù)暮瘮?shù)是在render()中定義的,這將導(dǎo)致每次MouseTracker渲染時生成一個新的函數(shù)作為Mouse組件的render prop,因而抵消了繼承自React.PureComponent的效果

解決方案

為了解決這一問題,可以定義一個實例方法傳給render prop

class MouseTracker extends React.Component {
  // 定義為實例方法,`this.renderTheCat`始終
  // 當我們在渲染中使用它時,它指的是相同的函數(shù)
  renderTheCat(mouse) {
    return <Cat mouse={mouse} />;
  }
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={this.renderTheCat} />
      </div>
    );
  }
}

到此這篇關(guān)于React Render Props共享代碼技術(shù)的文章就介紹到這了,更多相關(guān)React Render Props內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React組件里this指向了undefined原理解析

    React組件里this指向了undefined原理解析

    這篇文章主要為大家介紹了React組件里this指向了undefined原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • 利用React實現(xiàn)一個有點意思的電梯小程序

    利用React實現(xiàn)一個有點意思的電梯小程序

    這篇文章主要為大家詳解介紹了如何利用React實現(xiàn)一個有點意思的電梯小程序,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解一下
    2022-08-08
  • 一文詳解ReactNative狀態(tài)管理rematch使用

    一文詳解ReactNative狀態(tài)管理rematch使用

    這篇文章主要為大家介紹了ReactNative狀態(tài)管理rematch使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • React中使用dnd-kit實現(xiàn)拖曳排序功能

    React中使用dnd-kit實現(xiàn)拖曳排序功能

    在這篇文章中,我將帶著大家一起探究React中使用dnd-kit實現(xiàn)拖曳排序功能,由于前陣子需要在開發(fā) Picals 的時候,需要實現(xiàn)一些拖動排序的功能,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
    2024-06-06
  • 在?React?項目中全量使用?Hooks的方法

    在?React?項目中全量使用?Hooks的方法

    這篇文章主要介紹了在?React?項目中全量使用?Hooks,使用 Hooks 能為開發(fā)提升不少效率,但并不代表就要拋棄 Class Component,依舊還有很多場景我們還得用到它,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • 使用React?SSR寫Demo一學(xué)就會

    使用React?SSR寫Demo一學(xué)就會

    這篇文章主要為大家介紹了使用React?SSR寫Demo實現(xiàn)教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • 如何強制刷新react hooks組件

    如何強制刷新react hooks組件

    這篇文章主要介紹了如何強制刷新react hooks組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 簡單分析React中的EffectList

    簡單分析React中的EffectList

    這篇文章主要簡單分析了React中的EffectList,幫助大家更好的理解和學(xué)習(xí)使用React進行前端開發(fā),感興趣的朋友可以了解下
    2021-04-04
  • React三大屬性之Refs的使用詳解

    React三大屬性之Refs的使用詳解

    這篇文章主要介紹了React三大屬性之Refs的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • react-router?v6新特性總結(jié)示例詳解

    react-router?v6新特性總結(jié)示例詳解

    在V6版本中,<Switch>組件被替換成<Routes>組件,同時,component屬性被element屬性替換,這篇文章主要介紹了react-router?v6新特性總結(jié),需要的朋友可以參考下
    2022-12-12

最新評論