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就一定要用名为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>
    );
  }
}

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

您可能感兴趣的文章:

关于react中的常见错误及解决
这篇文章主要介绍了关于react中的常见错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
原生+React实现懒加载(无限滚动)列表方式
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React基础-JSX的本质-虚拟DOM的创建过程实例分析
这篇文章主要介绍了React基础-JSX的本质-虚拟DOM的创建过程,结合具体实例形式分析了虚拟dom的基本原理与实现方法,需要的朋友可以参考下
2023-05-05
基于React Hooks的小型状态管理详解
本文主要介绍一种基于 React Hooks 的状态共享方案，介绍其实现，并总结一下使用感受，目的是在状态管理方面提供多一种选择方式。感兴趣的小伙伴可以了解一下
2021-12-12
React memo减少重复渲染详解
React.memo为高阶组件。它与React.PureComponent 非常相似，但它适用于函数组件，但不适用于class组件。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-10-10
React应用框架Dva数据流向原理总结分析
这篇文章主要为大家介绍了React 应用框架Dva数据流向原理总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React Native使用百度Echarts显示图表的示例代码
本篇文章主要介绍了React Native使用百度Echarts显示图表的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React中使用TS完成父组件调用子组件的操作方法
由于在项目开发过程中，我们往往时需要调用子组件中的方法，这篇文章主要介绍了React中使用TS完成父组件调用子组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
React内部实现cache方法示例详解
这篇文章主要为大家介绍了React内部实现cache方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
react-native 父函数组件调用类子组件的方法(实例详解)
这篇文章主要介绍了react-native 父函数组件调用类子组件的方法,通过详细步骤介绍了React 函数式组件之父组件调用子组件的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09