重复是不可能的,这辈子都不可能写重复的代码

当然,这句话分分钟都要被产品(领导)打脸,真的最后一次改需求,我们烦恼于频繁修改的需求

虽然我们不能改变别人,但我们却可以尝试去做的更好,我们需要抽象,封装重复的功能或者逻辑,而不是老旧的重复着机械的复制粘贴修改

那么我们如何去封装 React 中的组件以及逻辑呢?

这次我们来讲讲 React 里的高级组件

React 高级组件有两种方式:

  1. 使用高阶组件( Higher Order Component ==> HOC )
  2. 子组件作为函数的模式( Render Props )

高阶组件

首先来说说高阶组件,它不是 React 的提供的 API,它是模式,一种增强组件的模式,简单来说其实就是高阶函数,高阶函数大家应该不陌生

高阶函数 : 把函数作为参数传入,返回一个新的函数,这样的函数称为高阶函数

而所谓的高阶组件也就是传入一个现有组件作为参数,返回一个新的组件,高阶租价也分为代理方式和继承方式

我们先来看看一个简单的 HOC :

import React from 'react';

function addNameProp(WrapperComponent) {
return class extends React.Component {
render() {
const { name, ...props } = this.props;
return <WrapperComponent {...props} name={name || 'cnyballk'} />;
}
};
} export default addNameProp;

在上面的代码里我们定义了一个 addNameProp。 函数,它的作用就是为没有传入 name 的 prop 传入的组件添加一个 name 的 prop ,然后渲染出来

这个高阶组件就完成了对传入组件的增强,这也是一个代理方式的高阶组件

那么继承方式是怎么样的呢

import React from 'react';

function addNameProp(WrapperComponent) {
return class extends WrapperComponent {
render() {
this.props = {
...this.props,
name: this.props.name || 'cnyballk',
};
return super.render();
}
};
} export default addNameProp;

和上面的高阶组件 一样的效果,而继承模式和代理模式最大的区别就是一个是返回传入的组件,一个是调用继承的父组件的 render 方法

⚠️ 在代理模式下 WrapperComponent 经历了完整的生命周期,返回的组件也有一次完整的生命周期,而继承模式 则是调用了 WrapperComponent 的 render ,只有返回的组件的一个生命周期

如果我们用过 react-redux 的 connect 也就知道 connect 也是一个代理模式的高阶组件

⚠️ 高阶组件可以这么使用

@Wrapper
class Index extends Component {
...略
}

emmmm...这个涉及到 js 的装饰器,各位自己去搜来学习哈

Render Props

那么我们已经认识了高阶组件的重用方法,也认识到了高阶组件的优点。

但是高阶组件的缺点是什么呢?

相信你们也能看到了,我们传递一个 name 的 Prop ,那是不是得传入的组件能够处理才可以,而且还有命名的冲突危险,毕竟有些组件的 props 命名各有不同,或者说子组件需要同一份数据处理方式却不一样,所以说这个时候就不适用 HOC 了

HOC 对于使用者来说是一个黑盒,还需要去看他们的实现

而 Render Props 则是 数据给你,其他的你自己来

我们来看一个简单的例子

import React from 'react';

class AddNameProp extends React.Component {
render() {
const name = 'cnyballk';
return this.props.children(name);
}
} export default AddNameProp;

简单的使用

<AddNameProp>{name => <div>我叫 {name}</div>}</AddNameProp>

想传递给组件

<AddNameProp>
{name =>
<Hello name={name}/>;
}
</AddNameProp>

或者是其他的 prop 名

<AddNameProp>
{name =>
<Hello myName={name}/>;
}
</AddNameProp>

我们可以看到,这个方式很灵活,因为子组件是一个函数,一切皆有可能,但是 Render Props 也有缺点就是难以做性能优化,高阶组件可以利用 SCU 来避免重复渲染。虽然这样,,Render Props 却是一个非常好(牛逼)的一个模式,我很喜欢

Render Props VS HOC

我们能够清楚的明白,HOC是一种粗粒度的代码复用,而Render Props是一种细粒度的复用,他们可以互换,我们什么时候用HOC,什么时候用Render Props相信大家也差不多清楚了

小结

本文介绍了 React 的高级组件的两个方式,各有优缺点,但它们都是为了重用代码,我们可以自己选择喜欢的模式去做,但是不要复制粘贴了,感受封装复用的力量

高阶组件代理模式可以更好的控制和实现,继承模式则可以控制特定组件的生命周期,与高阶组件相比, Render Props 模式更加灵活,有函数,我们可以更自由

可复用 React 的 HOC 以及的 Render Props的更多相关文章

  1. React高阶组件 和 Render Props

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

  2. [React] Use Prop Collections with Render Props

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

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

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

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

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

  5. React中render Props模式

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

  6. React Render Props 模式

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

  7. React 之 render props 的理解

    1.基本概念 在调用组件时,引入一个函数类型的 prop,这个 prop定义了组件的渲染方式. 2.回调渲染 回顾组件通信的几种方式 父-> 子 props 子-> 父 回调.消息通道 任 ...

  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. render props的运用

    2020-04-03 render props的运用 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 通常的 这个值为函数的prop ...

随机推荐

  1. Linux的page cache使用情况/命中率查看和操控

    转载自宋宝华:https://blog.csdn.net/21cnbao/article/details/80458173 这里总结几个Linux文件缓存(page cache)使用情况.命中率查看的 ...

  2. Oracle SQL Tuning Advisor 测试

    如果面对一个需要优化的SQL语句,没有很好的想法,可以先试试Oracle的SQL Tuning Advisor. SQL> select * from v$version; BANNER --- ...

  3. (转)blkid命令 获取文件系统类型、UUID

    blkid命令 获取文件系统类型.UUID  原文:http://www.cnblogs.com/dkblog/archive/2011/08/30/2159630.html 在Linux下可以使用b ...

  4. vlh 标签详解

    1.vlh:root  root标签做为所有vlh标签的根标签.  1)value  在给定的范围内,包含在ValueList或list的变量名. List的实例自动被DefaultListBacke ...

  5. sass命令

    tip:sass报错解决 通过ruby编译scss时,发现编译报错,内容如下:   Conversion error: Jekyll::Converters::Scss encountered an ...

  6. <Android 基础(十六)> Toast

    介绍 A toast provides simple feedback about an operation in a small popup. It only fills the amount of ...

  7. 在 eclipse 中调出其内置的浏览器

    两种方法: 1.点击工具栏中的浏览器图标,就会在主面板中出现浏览器: 跳出一个blank页面,如下: 第二种方法:点击Window——Show view——Other 输入 "browser ...

  8. Java -GUI开发九九乘法表

    Java GUI开发九九乘法表 (1)实现目标: 利用java自带的awt包,基础控件开发一个九九乘法表,点击可以显示对应的乘法口诀. (2)控件选择: 点击——Button 显示——TextFiel ...

  9. Python基础学习之字符串(2)

    字符串常用方法 1.s.capitalize() 描述:返回字符串s的副本,并将首字符变为大写. 示例: >>> s='yesterday when I was Young!' &g ...

  10. JSON:json_encode函数不能获取属性原因及解决方案

    json_encode()是个解析json数据的函数,但是这个函数可以有两个参数 形式: json_decode ( string  $json,  ture || false )   第一个参数传字 ...