React Render Props共享代码技术

 更新时间:2023年01月29日 09:19:00   作者:绿胡子大叔  
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说,给一个组件传入一个prop,这个props是一个函数,函数的作用是用来告诉这个组件需要渲染什么内容,那么这个prop就成为render prop

介绍

  • 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就一定要用名为renderprop。你可以使用任意名称的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>
    );
  }
}

到此这篇关于React Render Props共享代码技术的文章就介绍到这了,更多相关React Render Props内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

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

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

    这篇文章主要为大家介绍了React组件里this指向了undefined原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 利用React实现一个有点意思的电梯小程序

    利用React实现一个有点意思的电梯小程序

    这篇文章主要为大家详解介绍了如何利用React实现一个有点意思的电梯小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-08-08
  • 一文详解ReactNative状态管理rematch使用

    一文详解ReactNative状态管理rematch使用

    这篇文章主要为大家介绍了ReactNative状态管理rematch使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • React中使用dnd-kit实现拖曳排序功能

    React中使用dnd-kit实现拖曳排序功能

    在这篇文章中,我将带着大家一起探究React中使用dnd-kit实现拖曳排序功能,由于前阵子需要在开发 Picals 的时候,需要实现一些拖动排序的功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 在 React 项目中全量使用 Hooks的方法

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

    这篇文章主要介绍了在 React 项目中全量使用 Hooks,使用 Hooks 能为开发提升不少效率,但并不代表就要抛弃 Class Component,依旧还有很多场景我们还得用到它,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 使用React SSR写Demo一学就会

    使用React SSR写Demo一学就会

    这篇文章主要为大家介绍了使用React SSR写Demo实现教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 如何强制刷新react hooks组件

    如何强制刷新react hooks组件

    这篇文章主要介绍了如何强制刷新react hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 简单分析React中的EffectList

    简单分析React中的EffectList

    这篇文章主要简单分析了React中的EffectList,帮助大家更好的理解和学习使用React进行前端开发,感兴趣的朋友可以了解下
    2021-04-04
  • React三大属性之Refs的使用详解

    React三大属性之Refs的使用详解

    这篇文章主要介绍了React三大属性之Refs的使用详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-04-04
  • react-router v6新特性总结示例详解

    react-router v6新特性总结示例详解

    在V6版本中,<Switch>组件被替换成<Routes>组件,同时,component属性被element属性替换,这篇文章主要介绍了react-router v6新特性总结,需要的朋友可以参考下
    2022-12-12

最新评论