日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?Render?Props共享代碼技術_React

作者：綠胡子大叔 ? 更新時間： 2023-03-23 編程語言

介紹

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

使用

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

  • 創建Mouse組件，此組件僅用于提供復用的狀態邏輯代碼（狀態、方法等）
  • 將復用的狀態作為props.render(state)方法的參數，暴露到組件外部
  • 使用props.render()的返回值作為要渲染的內容
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參數實際上為Mouse組件的state，因為這個函數是在Mouse組件的render()中傳參調用的
	}
}

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

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

使用children prop代替render prop

也可以使用組合模式來實現組件間的代碼重用，該方法類似于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>
	}
}

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

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

Render props 與 React.PureComponent 同時使用

注意

如果在render方法中創建函數，那么使用render prop會抵消使用React.PureComponent帶來的優勢

因為每次調用render()進行渲染時都會創建一個新的函數，這將導致淺比較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傳輸的函數是在render()中定義的，這將導致每次MouseTracker渲染時生成一個新的函數作為Mouse組件的render prop，因而抵消了繼承自React.PureComponent的效果

解決方案

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

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

原文鏈接：https://blog.csdn.net/m0_52761633/article/details/123009406

欄目分類
最近更新