react 高阶组件的 理解和应用
高阶组件是什么东西
简单的理解是:一个包装了另一个基础组件的组件。(相对高阶组件来说,我习惯把被包装的组件称为基础组件)
注意:这里说的是包装,可以理解成包裹和组装;
具体的是高阶组件的两种形式吧:
a、属性代理(Props Proxy)
可以说是对组件的包裹,在包裹的过程中对被包裹的组件做了点什么(props的处理,把基础组件和其他元素组合),然后返回,这就成了一个高阶组件;
b、反向继承 (Inheritance Inversion)
可以理解成是组装,和属性代理不同的是,反向继承是继承自基础组件,所有很自然,它可以直接获取基础组件的props,操作基础组件的state。可以通过 反向继承的形式,配合compose将携带不同功能模块的高阶组件组装到基础组件上,加强基础组件。
本文栗子:https://github.com/wayaha/react-demos-HOC
compose栗子:https://github.com/wayaha/react-dom-compose
(如果对您有帮助,请帮我点颗star)
下边一个一个的说。
属性代理(Props Proxy)
我们可以先建一个基础组件,如下:
class BaseComponent extends Component {
constructor (props) {
super(props);
this.state = {
baseName: 'base component'
};
}; render () {
const { name} = this.props;
const { baseName } = this.state;
return <div>{`${name} + ${baseName}`}</div>
};
};
为了便于说明问题,写一个很简答的基础组件,它的作用仅仅是返回一个div,显示他自己的名字;
a、对props的操作
这个高阶组件是一个相对简单的无状态组件,只是这个高阶组件返回了一个新的组件,而这个新的组件是对基础组件的一个包装。仅仅对基础组件的props进行了增加,当然也可以进行改变,删除和读取(具体的可以下载代码上手试试)。
注意:(1)、此时render方法内的this.props,它是InnerComponent组建的props,而BaseComponent组件实际也就是InnerComponent组件。
(2)、高阶组件中的InnerComponent组件是一个完整的组件,可以根据需要添加一下state状态,作为props传到BaseComponent组件。可以将基础组件作为一个公共的组件,然后根据需要,使用的不同的高阶组件包装出具有不一样功能的组件。
import React, { Component } from 'react'; const PropsComponent = (BaseComponent) => { class InnerComponent extends Component {
render () {
const props = {
...this.props,
name: 'HOC Component'
};
return <BaseComponent {...props} />
};
}; return InnerComponent;
}
export default PropsComponent;
b、把基础组件和其他元素组合
出于操作样式、布局或其它的考虑,可以将 基础组件与其它组件包裹在一起。一些相对简单的用法也可以使用正常的父组件来实现,只是使用高阶组件可以获得更多的灵活性。也利于组件的抽象和复用。
const WrapperComponent = (BaseComponent) => {
class InnerComponent extends Component {
render () {
const props = {
...this.props,
name: 'HOC Component'
};
return <div style={{backgroundColor: 'orange'}}>
<BaseComponent {...props} />
</div>
};
};
return InnerComponent;
}
反向继承(Inheritance Inversion)
反向继承是继承自基础组件,并不是高阶组件继承传入的基础组件,所以成为反向继承。由于高阶组件继承了基础组件,那么高阶组件通过this可以操作基础组件的state,props以及基础组件的方法,甚至可以通过super来操作基础组件的生命周期。
a、渲染劫持
所谓渲染劫持就是,高阶组件控制了基础组件渲染生成的结果,因为基础组件的渲染被控制,高阶组件就可以对它做点什么。。。比如:
(1)、看心情(根据条件),控制渲染的结果;
(2)、改变dom树的样式;
(3)、改变基础组件中一下被渲染元素的props;
(4)、操作dom树中的元素。
这个就是根据props传入的条件来决定要不要渲染。
const HOCComponent = (BaseComponent) => {
return class Enhancer extends BaseComponent{
render() {
if (this.props.loggedIn) {
return super.render()
} else {
return null
}
}
}
}
通过super.render()获取基础组件的dom树,然后就可以进行一些操作,改变dom树的样式,改变基础组件中一下被渲染元素的props,操作dom树中的元素等等。
HOCComponent = (BaseComponent) => {
return class Enhancer extends BaseComponent {
render() {
const domsTree = super.render()
let newProps = {};
if (domsTree && domsTree.type === 'input') {
newProps = {value: 'this is new value'}
}
const props = Object.assign({}, domsTree.props, newProps)
const newDomsTree = React.cloneElement(domsTree, props, domsTree.props.children)
return newDomsTree
}
}
}
b、操作state
高阶组件可以读取、编辑和删除 基础组件 实例的 state,如果你需要,你也可以给它添加更多的 state。需要注意的是,这会搞乱基础组件 的 state,导致你可能会破坏某些东西。所以,要限制高阶组件读取或添加 state,添加 state 时应该放在单独的命名空间里,而不是和基础组件的 state 混在一起。
另外,高阶组件配合compose实现功能模块化,和个功能模块的随意组合使用。(见上文github例子)
每一个高阶组件封装一种功能,例如例子中的AddStaff,ChangeStaffData,DeleteStaff,ShowStaffMsg,可以根据需要将高阶组件组合到任意的基础组件中,实现功能模块化,也方便代码的抽离和复用。
react 高阶组件的 理解和应用的更多相关文章
- react高阶组件的理解
[高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- React高阶组件学习笔记
高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- react高阶组件的一些运用
今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...
- React 之 高阶组件的理解
1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
- React高阶组件 和 Render Props
高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...
随机推荐
- ECMAScript中所有的函数的参数都是按值传递的
看下面一段代码 function setName(obj){ obj.name='Nicholas'; obj=new Object(); obj.name="Greg"; } v ...
- Android官方技术文档翻译——清单合并
本文译自Android官方技术文档<Manifest Merger>,原文地址:http://tools.android.com/tech-docs/new-build-system/us ...
- 【Qt编程】Qt学习笔记<三>
1. 如果程序中使用了png以外格式的图片,在发布程序时就要将Qt安装目录下plugins中的imagineformats文件复制到发布文件中. 2. 在函数声明处快速添加函数定义 ...
- LeetCode之“树”:Path Sum && Path Sum II
Path Sum 题目链接 题目要求: Given a binary tree and a sum, determine if the tree has a root-to-leaf path suc ...
- ASCII码表(常用)
- win32 线程通信初步
// 线程通信机制.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #define NUM_THREADS 10 #include < ...
- 使用Gradle发布SNAPSHOT版本到JCenter(oss.jfrog.org)
回顾历史 发布SNAPSHOT版本的问题 解决问题 完整脚本 使用方法 本文原创. 转载请注明CSDN博客出处: http://blog.csdn.net/maosidiaoxian/article/ ...
- unity连接数据库工具
这里用的是一个集成工具UPUPW(Nginx+mysql+php版本) 网址:http://php.upupw.net/ 数据库登录: 本地: http://127.0.0.1/pmd 外网: htt ...
- gtk+修改控件文本字体一例
因为家里电脑是Mac系统,所以就拿Mac系统来示范. 要注意的是gtk+2.0和3.0对字体的处理是有一些区别的: 1.后者使用的是pango的机制,我们这里以gtk+3.0为基础. 2.两者调用Fo ...
- Ajax 模糊查询的简单实现
类似于百度的搜索引擎模糊查询功能,不过百度的模糊查询功能更强大,这里简单实现下. 要实现模糊查询,首先要做的就是把SQL写好.话不多少,直接贴代码了! JSP页面: <%@ page langu ...