先看这篇理解高阶组件   https://github.com/brickspert/blog/issues/2

一、定义

  高阶函数:函数接受函数作为输入,或者输出一个函数。

  高阶组件:接受React组件作为输入,或是输出一个组件。即hocFactory:: W: React.Component => E: React.Component

  高阶组件让代码更有复用性、逻辑性、抽象性。

二、实现高阶函数的三种方法。

  1. 属性继承(将Input组件的name,onChange方法提取到高阶组件中)

const Mycontainer = (WrappedComponent) => {
class extends React.Component {
constructor(props) {
     super(props);
      this.state = {
       name: '',
     }
     this.onNameChange = this.onNameChange.bind(this);
    }
    onNameChange(event) {
     this.state({
      name: event.target.value,
     })
    }
render() {
     const newProps = { name:{
      value: this.state.name,
      onChange: this.onNameChange,
     } };
return <WrappedComponent {...this.props} {...newProps}/>;
}
}
}
class MyComponent extends React.Component {
// ...
} export default Mycontainer(MyComponent);

  2. 反向继承

  渲染劫持: 就是高阶组件可以控制组件渲染以及props,state等。

const MyContainer = WrappedComponent =>
class extends WrappedComponent {
render() {
if (this.props.loggedIn) {
return super.render();
} else {
return null;
}
}
}

3. 组件参数

调用高阶组件时需要传递一些参数

function HOCFactoryFactory(...params) {
// 可以做一些改变params的事情
return function HOCFactory(WrappedComponent) {
return class HOC extends Component {
render() {
return <WrappedComponent {...this.props} {...params}/>
}
}
}
} HOCFactoryFactory(params)(WrappedComponent);

三、使用高阶组件使组件分离,抽象逻辑。

class SelectInput extends React.Component {
static displayName = 'SelectInput'; render() {
const { selectedItem, isActive, onClickHeader, placeholder } = this.props;
const { text } = selectedItem; return (
<div>
<div onClick={onClickHeader}>
<input type="text" disabled value={text} placeholder={placeholder}/>
<Icon className={isActive} name="angle-name"/>
</div>
</div>
);
}
} const searchDecorator = WrappedComponent => {
class SearchDecorator extends React.Component {
constructor(props){
super(props); this.handleSearch = this.handleSearch.bind(this);
} handleSearch(keyword) {
this.setState({
data: this.props.data,
keyword,
});
this.props.onSearch(keyword);
} render() {
const { data, keyword } = this.state;
return (
<WrappedComponent
{...this.props}
data={data}
keyword={keyword}
onSearch={this.handleSearch}
/>
)
}
}
return SearchDecorator;
} const asyncSelectDecorator = WrappedComponent => {
class AsyncSelectDecorator extends React.Component {
componentDidMount() {
const { url, params } = this.props; fetch(url, { params }).then(data => {
this.setState({
data,
});
});
}
render() {
return (
<WrappedComponent
{...this.props}
data={this.state.data}
/>
)
}
}
return AsyncSelectDecorator;
} class App extends React.Component {
render() {
  const Input = searchDecorator(asyncSelectDecorator(SelectInput))
return {
    <Input {...this.props} />
  } 
 }
}

React HOC(高阶组件)的更多相关文章

  1. 【转】react的高阶组件

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

  2. React 之 高阶组件的理解

    1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...

  3. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  4. react之高阶组件(二)

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  5. react用高阶组件实现路由守卫

    react-router不像vue-router一样有很多钩子函数,可以做路由守卫.想实现路由守卫,可以用高阶组件来实现. @connect(state => ({ isLogin: state ...

  6. react之高阶组件(一)

    当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...

  7. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  8. React高阶组件 和 Render Props

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

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

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

  10. React-理解高阶组件

    高阶组件:定义一个函数,传入一个组件,返回另外一个组件,另外一个组件包裹了传入的组件. 分类:属性代理高阶组件,反向继承高阶组件. 作用:代码复用,渲染节时. 高阶函数例子: function hel ...

随机推荐

  1. 清晰架构(Clean Architecture)的Go微服务: 编码风格

    编码风格在编程中是一个相对乏味的主题,但是合适的编码风格对一个有效的程序员是至关重要的. 它有三个组成部分: 程序结构 ( application layout) 编码规则或风格 命名约定 我已经在清 ...

  2. go--->beego框架安装

    beego 安装 1.新建gopath 工程目录 2.在新建的工程目录中执行go get github.com/astaxie/beego 命令 3.再执行go get github.com/beeg ...

  3. 【学习笔记】Linux基础(零):预备知识

    学习笔记(连载)之Linux系列 Note:本学习笔记源自<鸟哥的Linux私房菜(基础学习篇)>一书,为此书重要内容的摘要和总结,对于一些常识性的知识不再归纳 新型冠状病毒引发的肺炎战& ...

  4. Distance dependent Chinese Restaurant Processes

    Here is a note of Distance dependent Chinese Restaurant Processes 文章链接http://pan.baidu.com/s/1dEk7ZA ...

  5. 线程安全之 synchronized 和 ReentrantLock

    线程安全之 synchronized 和 ReentrantLock + 面试题 前面我们介绍了很多关于多线程的内容,在多线程中有一个很重要的课题需要我们攻克,那就是线程安全问题.线程安全问题指的是在 ...

  6. 面试总结 | Linux后台开发不得不看的知识点(给进军bat的你!)

    目录 一 自我介绍 二 面试情况 三 相关知识点汇总 1 c/c++相关 2 计算机网络 3 数据结构相关 4 数据库相关 5 操作系统 6 Linux基础知识及应用编程(后台必备!) 7 大数问题 ...

  7. 优雅对API进行内部升级改造

    优雅对API进行内部升级改造 背景 随着业务的快速发展老的系统将逐渐的无法快速支撑现有业务迭代重构一个必然的过程;然而在底层业务系统重构的过程中,对外提供的API也同时需要进行相应的升级替换;推动外部 ...

  8. 再谈typedef(重点为函数指针)

    有种很方便的写法. typedef int *p: p pointer: 这时直接把pointer带入原式中,取代p然后去掉typedef,得到的结果就是int * pointer: 哈哈,这样直接替 ...

  9. eclipse新下载,安装和配置

    question1 java11没有jre,无法通过eclipse-inst-win64进行安装 solution Windows 7 64bit 安装jdk i586还是jdk x64?jdk x6 ...

  10. Codeforces 1117C Magic Ship (二分)

    题意: 船在一个坐标,目的地在一个坐标,每天会有一个风向将船刮一个单位,船也可以移动一个单位或不动,问最少几天可以到目的地 思路: 二分天数,对于第k天 可以分解成船先被吹了k天,到达坐标(x1+su ...