react中什么是hoc(2)-木庄网络博客

当前第2页返回上一页

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'
 
class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}
 
export default withStorage(Page1)

很明显，这是一个装饰器模式，那么就可以使用ES7形式

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'
 
@withStorage
class Page1 extends Component{
  render() {
    return <h2>{this.props.data}</h2>
  }
}
 
export default Page1

How ? 怎么使用HOC

使用场景

操纵 props
通过 ref 访问组件实例
组件状态提升
用其他元素包装组件

Tips 注意事项

1，命名
把被包装的组件名称也包到HOC的显示名称中。
2，时机
不要在组件的 render 方法中使用HOC，尽量也不要在组件的其他生命周期中使用HOC。因为调用HOC的时候每次都会返回一个新的组件，于是每次render，前一次高阶组件创建的组件都会被卸载(unmount)，然后重新挂载(mount)本次创建的新组件，既影响效率又丢失了组件及其子组件的状态。
3，静态方法
如果需要使用被包装组件的静态方法，那么就需要手动复制这些静态方法，因为HOC返回的新组建不包含被包装组件的静态方法。
4，ref
不会被传递给被包装组件

HOC和Mixin的比较

这里写图片描述

高阶组件属于函数式编程(functional programming)思想，对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。而Mixin这种混入的模式，会给组件不断增加新的方法和属性，组件本身不仅可以感知，甚至需要做相关的处理(例如命名冲突、状态维护)，一旦混入的模块变多时，整个组件就变的难以维护，也就是为什么如此多的React库都采用高阶组件的方式进行开发。

更多编程相关知识，请访问：编程入门！！

以上就是react中什么是hoc的详细内容，更多文章请关注木庄网络博客！

返回前面的内容