高阶组件

简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。

我在之前的博客《闭包和类》中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用。

其实高阶组件,也是为了更好地复用之前的组件。它可以理解为,基础组件通过包裹处理,生成一个适应某些场景的组件。

它可能存在于以下几种场景:

定制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的更多相关文章

  1. React中的高阶组件

    高阶组件(HOC, High-Order Component)是React中用于重组组件逻辑的高级技术,是一种编程模式而不是React的api. 直观来讲,高阶组件是以某一组件作为参数返回一个新组件的 ...

  2. 高阶函数 HOF & 高阶组件 HOC

    高阶函数 HOF & 高阶组件 HOC 高阶类 js HOC 高阶函数 HOF 函数作为参数 函数作为返回值 "use strict"; /** * * @author x ...

  3. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  4. React: 高阶组件(HOC)

    一.简介 如我们所知,JavaScript有高阶函数这么一个概念,高阶函数本身是一个函数,它会接收或者返回一个函数,进而对该函数进行操作.其实,在React中同样地有高阶组件这么一个东西,称为HOC, ...

  5. 高阶组件 HOC

    一. A higher-order component (HOC) is an advanced technique in React for reusing component logic. a h ...

  6. 高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)

    一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入 ...

  7. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  8. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  9. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

随机推荐

  1. java设计模式之工厂模式学习

    上周安排的写两篇设计模式的文章,结果一篇也没写,今天都给写了.回顾+反思.In this world he who stops ,won't get anything he wants! 工厂方法模式 ...

  2. javascript截取字符串长度

    <html> <head> <meta charset="UTF-8"/> <title>截取字串长度</title> ...

  3. HTML 发表说说 制作方法

    ==================================================================================================== ...

  4. Apache服务器运维笔记(3)----容器部分

    1.<IfModule>容器 <IfModule>容器作用于模块,它会首先判断模块是否载入,然后再决定是否进行处理,也就是说只有当判断结果为真时才会执行容器内的指令,相反如果为 ...

  5. Idea工具使用

    Idea Project与module的理解 1.基础环境的搭建 1.1.IDEA使用--字体.编码和基本设置 2.插件的安装 2.1.在IDEA中配置Gauge环境 2.2.IdeaVim的安装:: ...

  6. js 生成md5

    原理比较复杂,不过人类区别与其他动物是因为会用工具,所以,把下面代码复制保存一下就好了. <script> var hex_chr = "0123456789abcdef&quo ...

  7. Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)

    背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...

  8. 记一次使用MemoryCache不能Get的问题

    在.NET Core自带的Angular模板项目中,我想要做一个简单的登录认证. 所以想填写用户名密码,使用guid作为key,存储登录信息,每次页面刷新的时候check它. 思路觉得没有问题,但是一 ...

  9. QT控件大小的方法

    http://blog.csdn.net/liang19890820/article/details/51986284

  10. Mysql学习---SQL测试题之表结构

    创建表结果和数据准备[直接执行即可] /* Navicat MySQL Data Transfer Source Server : ftl1012 Source Server Version : 50 ...