快捷導(dǎo)航

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

更新時(shí)間：2023年01月29日 09:19:00 作者：綠胡子大叔

render props是指一種在 React 組件之間使用一個(gè)值為函數(shù)的 prop 共享代碼的技術(shù)。簡(jiǎn)單來(lái)說(shuō)，給一個(gè)組件傳入一個(gè)prop，這個(gè)props是一個(gè)函數(shù)，函數(shù)的作用是用來(lái)告訴這個(gè)組件需要渲染什么內(nèi)容，那么這個(gè)prop就成為render prop

介紹

Render Props是指在React組件之間使用一個(gè)值為函數(shù)的prop共享代碼的技術(shù)
具有render prop的組件接受一個(gè)返回React元素的函數(shù)，并在組件內(nèi)部通過(guò)調(diào)用此函數(shù)來(lái)實(shí)現(xiàn)自己的渲染邏輯
主要用于抽離邏輯，進(jì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>當(dāng)前鼠標(biāo)位置 {mouse.x} {mouse.y}<div>
		)}/>
		//此處的mouse參數(shù)實(shí)際上為Mouse組件的state，因?yàn)檫@個(gè)函數(shù)是在Mouse組件的render()中傳參調(diào)用的
	}
}

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

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

使用children prop代替render prop

也可以使用組合模式來(lái)實(shí)現(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>當(dāng)前鼠標(biāo)位置 {mouse.x} {mouse.y}<div>
			)}
		</Mouse>
	}
}

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

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

Render props 與 React.PureComponent 同時(shí)使用

注意

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

因?yàn)槊看握{(diào)用render()進(jìn)行渲染時(shí)都會(huì)創(chuàng)建一個(gè)新的函數(shù)，這將導(dǎo)致淺比較props的時(shí)候prevProps === nextProps始終為false

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

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

解決方案

為了解決這一問(wèn)題，可以定義一個(gè)實(shí)例方法傳給render prop

class MouseTracker extends React.Component {
  // 定義為實(shí)例方法，`this.renderTheCat`始終
  // 當(dāng)我們?cè)阡秩局惺褂盟鼤r(shí)，它指的是相同的函數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: