📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. 什么是高阶组件
  • 2. 高阶组件的用途
  • 3. 高阶组件的实现方式
  • 4. 属性代理 ( Props Proxy )
  • 5. 反向继承 ( Inheritance Inversion )
  • 6. 柯里化和高阶组件参数
  • 6.1 柯里化
  • 6.2 高阶组件参数
  • 7. 链接

Was this helpful?

  1. React 核心知识点整理

高阶组件

1. 什么是高阶组件

高阶组件是一个函数。传递给它一个组件,返回一个新的组件。

const EnhancedComponent = enhance( MyComponent )

enhance就是我们的高阶组件,在其中可以加入各种逻辑来增强我们的 MyComponent

2. 高阶组件的用途

  • 代码复用

  • 渲染劫持

  • 抽象及操作state

  • 操作props

3. 高阶组件的实现方式

  • 属性代理 ( Props Proxy )

  • 反向继承 ( Inheritance Inversion )

4. 属性代理 ( Props Proxy )

  • 操作 props

const enhance = (WrapperComponent, key) => {
  return class extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
        let data = localStorage.getItem(key)
        this.setState({ data })
    }

    render() {
      return <WrapperComponent {...this.props} data:{ this.state.data } />
    }
  }
}

class MyComponent extends Component {
  render() {
    return <div>
      1. 操作props
      <input value={this.props.data} />
    </div>
  }
}

export default enhance(MyComponent, 'locale')

高阶组件为被包裹组件添加了data属性,该属性的值为 localStorgae中key为locale的值,通过传入不同的参数key, 可以起到为组件初始化属性的作用。

  • 获取 Refs 引用

const enhance = (WrapperComponent) => {
  return class extends Component {
    getIns(ins) {
      this.childIns = ins

      // this.childIns.method()
    }
    render() {
      return <WrapperComponent ref={(ins)=>{this.getIns(ins)}} />
    }
  }
}
class MyComponent extends Component {
  render() {
    return <div>
      2. 获取 Refs 引用
    </div>
  }
}

export default enhance(MyComponent)

通过属性代理拿到被包裹组件的实例引用this.childIns,从而可以调用被包裹组件实例上的方法。

  • 抽象state

const enhance = (WrapperComponent) => {
  return class extends Component {
    constructor(props){
      super(props)
      this.state = { 
        fields: {} 
      }
    }

    getField(fieldName) {
      if (!this.state.fields[fieldName]) {
        this.state.fields[fieldName] = {
          value: '',
          onChange: event => {
            this.state.fields[fieldName].value = event.target.value
            this.forceUpdate()
          }
        }
      }

      return {
        value: this.state.fields[fieldName].value,
        onChange: this.state.fields[fieldName].onChange
      }
    }

    render() {
      const props = Object.assign({}, this.props, {
        fields: this.getField.bind(this),
      })
      return (
        <WrapperComponent {...props}/>
      )
    }
  }
}

class MyComponent extends Component {
  render() {
    return <form>
          3. 抽象state, 受控组件
          <input type="name" {...this.props.fields('name')}/>
    </form>
  }
}

export default enhance(MyComponent)

将被包裹组件的state抽象为自身的props,并从高阶组件中获得。常见的例子就是实现不受控组件到受控组件的转变。 参考 antd form 组件的实现.

  • 用其它元素包裹被包裹组件

const withStyle = (WrapperComponent) => {
  return class extends Component {
    render() {
      return <div style={{background:"blue", padding:'4px',borderRadius:'4px',color:'white'}}>
        <WrapperComponent {...this.props} />
      </div>
    }
  }
}

class MyComponent extends Component {
  render() {
    return <div>
      4. 元素包裹, 进行布局或者统一样式
    </div>
  }
}

export default withStyle(MyComponent)

通过在外面包裹一个带有样式的组件作为父组件,从而达到布局或者设置样式的目的。

5. 反向继承 ( Inheritance Inversion )

  • 渲染劫持

const enhance = (WrapperComponent) => {
  // 返回的组件继承传入的 WrapperComponent组件
  return class extends WrapperComponent {
    render() {
      // 获取渲染的react元素树
      let elementsTree = super.render();
      const enhanceProps = {};
      if(elementsTree &&  elementsTree.type === 'div') {
        enhanceProps.style = { backgroundColor:'green' }
      }

      const props = Object.assign({}, elementsTree.props, enhanceProps)
      elementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children)

      return elementsTree;
    }
  }
}

class MyComponent extends Component {
  render() {
    return <div>
      5. 渲染劫持
    </div>
  }
}

export default enhance(MyComponent)

渲染劫持即通过反向继承,在返回elementsTree之前,执行一些逻辑代码对elementsTree进行修改。来改变最终渲染在页面的内容。

  • 操作state

const enhance = (WrapperComponent) => {
  return class extends WrapperComponent {
    render() {
      return (
        <div>
          <p>{this.state.text}</p>
          {super.render()}
        </div>
      )
    }
  }
}

class MyComponent extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: 'hi, i am wrapperComponent'
    }
  }
  render() {
    return <div>
      7. 操作state  {this.state.text}
    </div>
  }
}

export default enhance(MyComponent)

在enhance内部,可以访问修改删除被包裹组件的 state。

6. 柯里化和高阶组件参数

6.1 柯里化

const funcA = (a) => {
    return (b) => {
        return a + b;
    }
}

const addWith5 = funcA(5)
console.log(addWith5(1))
console.log(addWith5(2))

利用闭包,返回的函数addWith5始终能访问到5这个变量,通过这种方式分解函数的参数。

6.2 高阶组件参数

const enhance = (...params) => {
    // 对参数params, 执行一些操作
    return (WrapperComponent) => {
        return class HOC extends Component {
            render() {
                return <WrapperComponent {...this.props} />;
            }
        }
    }
}

例如 react-redux中 connect的用法 connect(mapStateToProps,...)(WrapperComponent)

7. 链接

Previous实现简易的 expressNextReact 事件处理

Last updated 4 years ago

Was this helpful?

react高阶组件官方文档
React Higher Order Components in depth
张鑫旭 - JS中的柯里化
react.js 小书
高阶组件(HOC)-中文