react系列(二)高阶组件-HOC
高阶组件
简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。
我在之前的博客《闭包和类》中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用。
其实高阶组件,也是为了更好地复用之前的组件。它可以理解为,基础组件通过包裹处理,生成一个适应某些场景的组件。
它可能存在于以下几种场景:
定制props
一个简单例子:
function withMoreThings(WrappedComponent) {
return class extends React.Component {
render() {
const moreThings = {
more: 'things',
};
return <WrappedComponent {...this.props} ...moreThings/>
}
}
}
这是HOC(High Order Component)最常用的一种方式,用来传递一些定制化的参数给内部组件。
提取公共方法、属性
在to B的项目中,表单是一个大头,所有流程都绕不开表单。也就会说到受控组件和非受控组件。
受控组件
由于HTML表单元素会保留一些内部状态,比如input框,它会有自己内部的状态来保存用户的输入值。
<input type="text" name="name" />
此时,为了能够处理将React的state和表单元素的内部状态统一起来,React提供了一种称为“受控组件”的技术。
class NameInput extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
console.log(this);
this.setState({value: event.target.value});
}
render() {
return (
<input type="text" value={this.state.value} onChange={this.handleChange} />
);
}
}
通过内部的state和绑定change事件,就可以将input内部的处理机制转移到React的默认处理机制上,收到React的控制。
但是,还是有一些元素,不能使用这种方法,比如
<input type="file">
这个元素是只读的,用户选择完毕后,可以获取到对应的文件。不能通过React内部的state来模拟。
这就引出了——
非受控组件
非受控组件从DOM中获取表单值,而不是通过React的state来处理。由于它不经过React的一些逻辑,所以不能对它的状态做监控。这里有一篇文章Controlled and uncontrolled form inputs in React don't have to be complicated介绍了何时可以使用非受控组件。
下面是一个非受控组件的例子:
import React, { Component } from "react";
export default class NameInput extends Component {
constructor(props) {
super(props);
}
handleChange(event) {
console.log(this);
this.setState({ value: event.target.value });
}
render() {
return (
<input
type="text"
defaultValue="test"
ref={input => (this.input = input)}
/>
);
}
}
<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked,<input type="text"><select> 和 <textarea> 支持 defaultValue,可以帮助设置表单默认值。
非受控组件通过ref来获取DOM元素,然后根据当前DOM去更新UI。
有关Ref的使用,参考这个文档Refs & DOM。
我个人建议,如果对于一些数据交互较少,展示和处理基本在组件内部完成,不会涉及到很多组件间数据交换的情景,可以使用非受控组件,更快,更直观。其他情况仍然建议使用受控组件,方便数据流的传导。
接着说回高阶组件。在使用表单时,很多情境下的输入,我们都希望统一由state,或者redux来保存,而不是被dom节点存储。
上面讲到了受控组件的使用,关键点有三:
1.对应的onChange方法
2.对应的存储点,state或者redux
3.绑定到对应组件
参考上面的描述,来实现一个高阶组件的生成函数。
这里是一个例子:https://codesandbox.io/s/7p85l213q
这样就可以很方便的生成受控组件。
在一些场景下,我们也可以用其他组件包装WrappedComponent。比如,添加一些小图标,用父组件可能不够灵活,用HOC则可以很轻松地生成一个可配置的组件,灵活许多。
在React Higher Order Components in depth还提到一种生成HOC的方法,类继承,改写更彻底。详细内容可以参考这篇文章。也可以查看知乎的这篇翻译深入理解 React 高阶组件。
以上,感谢阅读。
react系列(二)高阶组件-HOC的更多相关文章
- React中的高阶组件
高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...
- 高阶函数 HOF & 高阶组件 HOC
高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- React: 高阶组件(HOC)
一.简介 如我们所知,JavaScript有高阶函数这么一个概念,高阶函数本身是一个函数,它会接收或者返回一个函数,进而对该函数进行操作.其实,在React中同样地有高阶组件这么一个东西,称为HOC, ...
- 高阶组件 HOC
一. A higher-order component (HOC) is an advanced technique in React for reusing component logic. a h ...
- 高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)
一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入 ...
- React进阶之高阶组件
前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
随机推荐
- java设计模式之工厂模式学习
上周安排的写两篇设计模式的文章,结果一篇也没写,今天都给写了.回顾+反思.In this world he who stops ,won't get anything he wants! 工厂方法模式 ...
- javascript截取字符串长度
<html> <head> <meta charset="UTF-8"/> <title>截取字串长度</title> ...
- HTML 发表说说 制作方法
==================================================================================================== ...
- Apache服务器运维笔记(3)----容器部分
1.<IfModule>容器 <IfModule>容器作用于模块,它会首先判断模块是否载入,然后再决定是否进行处理,也就是说只有当判断结果为真时才会执行容器内的指令,相反如果为 ...
- Idea工具使用
Idea Project与module的理解 1.基础环境的搭建 1.1.IDEA使用--字体.编码和基本设置 2.插件的安装 2.1.在IDEA中配置Gauge环境 2.2.IdeaVim的安装:: ...
- js 生成md5
原理比较复杂,不过人类区别与其他动物是因为会用工具,所以,把下面代码复制保存一下就好了. <script> var hex_chr = "0123456789abcdef&quo ...
- Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)
背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...
- 记一次使用MemoryCache不能Get的问题
在.NET Core自带的Angular模板项目中,我想要做一个简单的登录认证. 所以想填写用户名密码,使用guid作为key,存储登录信息,每次页面刷新的时候check它. 思路觉得没有问题,但是一 ...
- QT控件大小的方法
http://blog.csdn.net/liang19890820/article/details/51986284
- Mysql学习---SQL测试题之表结构
创建表结果和数据准备[直接执行即可] /* Navicat MySQL Data Transfer Source Server : ftl1012 Source Server Version : 50 ...