React Render Props共享代码技术

目录 介绍 使用 使用children prop代替render prop Render props 与 React.PureComponent 同时使用 注意 解决方案

介绍

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

查看更多关于React Render Props共享代码技术的详细内容...