1.基本概念

在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式。

2.回调渲染

回顾组件通信的几种方式

父-> 子 props

子-> 父 回调、消息通道

任意 状态提升、Context、Redux 等

而 render props 本质实际上是使用到了回调的方式来通信。只不过在传统的 js 回调是在构造函数中进行初始化(使用回调函数作为参数),而在 react 中,现在可以通过 props 传入该回调函数,就是我们所介绍的 render prop。

从结果论来说,回调的目的是渲染子组件,而渲染的外部细节需要通过父组件注入,实现了控制反转。

从目的论来说,我们的目的是组件复用。它实现 了内部细节封装,并将外部细节(通过回调函数的形式 )暴露,达到了灵活复用的目的。

3.著名应用实例:

React Router 、 Downshift 和 react-motion

4.举例说明

示例1:

依赖 props.children 渲染组件,把控制权交给上层组件,子 组件实现控制反转。

子组件

import React, { Component } from "react";

export class ScrollPos extends Component {
state = {
position: null
}; componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
} componentWillUnmount() {
window.removeEventListener("scroll", this.handleScroll);
} handleScroll = e => {
const scrollTop = e.target.scrollingElement.scrollTop;
this.setState((state, props) => {
return { position: scrollTop };
});
}; render() {
return <div className='scroll'>{this.props.children(this.state.position)}</div>;
}
} export default ScrollPos;

父组件

import React from "react";
import "./App.css";
import ScrollPos from "./component/ScrollPos"; function App() {
return (
<div className="App">
<ScrollPos>
{position => <h1>{"Awesome !".substr(0, position * 15)}</h1>}
</ScrollPos>
<div className="spacer" />
</div>
);
} export default App;

示例2:

使用 props 传回调函数,需要多少回调就需要设置多少个 prop,比如这里 Auth 子组件既需要登录成功回调又需要登录失败回调。

子组件

const Auth= (props) => {
const userName = getUserName(); if (userName) {
const allProps = {userName, ...props};
return (
<React.Fragment>
{props.login(allProps)}
</React.Fragment>
);
} else {
<React.Fragment>
{props.nologin(props)}
</React.Fragment>
}
};

父组件

<Auth
login={({userName}) => <h1>Hello {userName}</h1>}
nologin={() => <h1>Please login</h1>}
/>

5.浅比较性能优化

如果在父组件中传递 props时 使用箭头函数,每次都会生成新的函数,造成传递给子组件的 props 每次都是新的,引起子组件重新渲染(子组件继承 PureComponent 无效)。因此考虑不使用箭头函数转为使用实例属性的方式:

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>
);
}
}

*  注:这里也可以直接将 renderTheCat 这个渲染方法变成组件。类似于 下面代码中的 movies

import Movies from "./components/movies";

<Route path="/movies" component={Movies}/>

注:回调的理解

React 之 render props 的理解的更多相关文章

  1. React中render Props模式

    React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写 ...

  2. React-代码复用(mixin.hoc.render props)

    前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...

  3. React高阶组件 和 Render Props

    高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...

  4. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  5. React Render Props 模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样 ...

  6. 可复用 React 的 HOC 以及的 Render Props

    重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求 虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装 ...

  7. [React] Use Prop Collections with Render Props

    Sometimes you have common use cases that require common props to be applied to certain elements. You ...

  8. [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...

  9. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

随机推荐

  1. PHP比较两个版本的方法

    PHP比较两个版本的方法 写app接口经常要用到 PHP接口的版本和app里面的版本做比较 如果app版本低于接口版本 那么就要提示他升级 <pre><?php/** * 版本处理类 ...

  2. GATK4注意事项

    近期在测试多样品的WES的过程中发现用HC得到gvcf之后,合并多个样品的gvcf文件的过程中,使用CombineGVCFs的过程中很慢,发现官网推荐使用GenomicsDBImport 用法如下: ...

  3. Qt qml的软件架构设计

    google: qt qml application architecture 有很多资源. 1 https://www.ics.com/blog/multilayered-architecture- ...

  4. [转帖]14-使用glusterfs做持久化存储

    14-使用glusterfs做持久化存储 https://www.cnblogs.com/guigujun/p/8366558.html 使用glusterfs做持久化存储 我们复用kubernete ...

  5. 在CentOS7 安装 Redis数据库

    环境说明: 名称 版本 CentOS CentOS Linux release 7.4.1708 (Core) VMware Fusion 专业版 10.1.1 (7520154) SSH Shell ...

  6. net namespace实验

    Net namespace实验 在 Linux 中,网络名字空间可以被认为是隔离的拥有单独网络栈(网卡.路由转发表.iptables)的环境.网络名字空间经常用来隔离网络设备和服务,只有拥有同样网络名 ...

  7. SqlServer中Index Seek的匹配规则(一)

    我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...

  8. 查询慢SQL

      可以查看当前时间访问库的所有请求SQL SELECT COUNT(*) AS c,state,info  FROM `information_schema`.processlist GROUP B ...

  9. 90% 的 Python 开发者不知道的描述符应用

    经过上面的讲解,我们已经知道如何定义描述符,且明白了描述符是如何工作的. 正常人所见过的描述符的用法就是上篇文章提到的那些,我想说的是那只是描述符协议最常见的应用之一,或许你还不知道,其实有很多 Py ...

  10. BPM业务流程管理系统_K2受邀出席QAD客户日活动,赋能企业云端智造_工作流引擎

    10月17日,K2受邀参加由厦门易维主办的以“走进QAD云ERP,深耕智能制造”为主题的QAD客户日活动.本次大会是以工业4.0背景下传统制造业面临巨大压力和挑战为导向,旨在探讨如何助力企业迅速适应业 ...