0%

背景

高阶组件的这种写法的诞生来自于社区的实践,目的是解决一些交叉问题(Cross-Cutting Concerns)。而最早时候 React 官方给出的解决方案是使用 mixin 。而 React 也在官网中写道:

We previously recommended mixins as a way to handle cross-cutting concerns. We’ve since realized that mixins create more trouble than they are worth.

官方明显也意识到了使用mixins技术来解决此类问题所带来的困扰远高于其本身的价值。更多资料可以查阅官方的说明。

高阶函数的定义

说到高阶组件,就不得不先简单的介绍一下高阶函数。下面展示一个最简单的高阶函数

1
const add = (x,y,f) => f(x)+f(y)

当我们调用add(-5, 6, Math.abs)时,参数 x,y 和f 分别接收 -5,6 和 Math.abs,根据函数定义,我们可以推导计算过程为:

1
2
3
4
x ==> -5
y ==> 6
f ==> abs
f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11

用代码验证一下:
1
add(-5, 6, Math.abs); //11

高阶在维基百科的定义如下

高阶函数是至少满足下列一个条件的函数:

  • 接受一个或多个函数作为输入
  • 输出一个函数

高阶组件的定义

那么,什么是高阶组件呢?类比高阶函数的定义,高阶组件就是接受一个组件作为参数并返回一个新组件的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意。
同时这里强调一点高阶组件本身并不是 React API。它只是一种模式,这种模式是由 React 自身的组合性质必然产生的。
更加通俗的讲,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced)的 React 组件,供其他组件调用。

阅读全文 »

git删除文件后恢复和永久删除文件

Git 是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

当我们在日常使用中删除了文件,如果这个文件提交过就可以进行恢复。这篇文建,将告诉你如何对删除的文件进行恢复,以及如何彻底的删除某个文件。

阅读全文 »

node express 20行代码实现反向代理服务器

遇到的问题

开发的时候经常会遇到一个问题,就是后台API和前端页面分开开发,但是开发的时候并不想在本地搭建后端环境,因为特别麻烦!特别麻烦!特别麻烦!比如说要配置运行环境、装数据库还有服务器。乱七八糟,有时候光是弄环境就要弄一天。可是如果不配置又没办法开发。最主要的是请求后端API的时候会遇到跨域问题。最简单的方法当然是后端帮忙配一个CORS。但是如果后端没办法配合的话,可能就比较麻烦了。这时候可以使用反向代理进行开发。

阅读全文 »

在我司的后台管理组件库pagurainrsuite中要求实现换肤功能,以下是我们对这一功能实践的记录及过程。

前提

为了统一各产品的视觉和操作体验,我们建立了UI规范体系,方便创建项目也方便统一管理。
以扁平化和简洁为主旨的设计风格,使用块面来进行布局,用线条来表达各个控件,使功能庞杂的系统 既直观又条理清晰,让使用者一目了然。

主色及色阶

系统共用的组件颜色和变化形式是统一的,在此基础上,各系统又有自己的主色调。

每套系统都会有一个主色,并在主色的基础上,在同一色调中扩充成一组完整的可复用的色彩体系,丰富系统配色。

如下图所示,每组色彩是按一定的规律在明度和饱和度上选取得出的。

阅读全文 »