您的位置是:网站首页>Javascript编程Javascript编程

react中什么是hoc

少儿编程网2021-01-05 13:19:03Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介HOC是react中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个ReactAPI,它是一个方法,一个接收一个组件作为参数,返回一个增强的组件的方法。相关教程推荐:React视频教程What?什么是HOCHOC(HighOrderComponent)是react中对组件逻辑复用部分进行抽离

HOC是react中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个React API,它是一个方法,一个接收一个组件作为参数,返回一个增强的组件的方法。OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相关教程推荐:React视频教程OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

What ?什么是HOC

HOC(High Order Component) 是 react 中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个 React API 。 它只是一种设计模式,类似于装饰器模式。 OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

具体而言,HOC就是一个函数,且该函数接受一个组件作为参数,并返回一个新组件。 OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

从结果论来说,HOC相当于 Vue 中的 mixins(混合) 。其实 React 之前的策略也是采用 mixins ,但是后来 facebook 意识到 mixins 产生的问题要比带来的价值大,所以移除了 mixins。 想要了解更多OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

Why ? 为什么使用HOC

来看个例子OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

import React, { Component } from 'react'class Page1 extends Component{
  componentWillMount(){
    let data = localStorage.getItem('data')    this.setState({ data })
  }

  render() {    return (
      <h2>{this.state.data}</h2>
    )
  }
} 

export default Page1

这个例子中在组件挂载前需要在 localStorage 中取出 data 的值,但当其他组件也需要从 localStorage 中取出同样的数据进行展示的话,每个组件都需要重新写一遍 componentWillMount 的代码,那就会显得非常冗余。那么在 Vue 中通常我们采用:OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

mixins: []

但是在 React 中我们需要采用HOC模式咯OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

import React, { Component } from 'react'

const withStorage = WrappedComponent => {
  return class extends Component{
    componentWillMount() {
      let data = localStorage.getItem('data')
      this.setState({ data })
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} /> 
    }
  }
}

export default withStorage

当我们构建好一个HOC之后,我们使用的时候就简单多了,还看**开始的例子,我们就不需要写 componentWillMount 了。OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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形式OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

使用场景

  • 操纵 propsOUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 通过 ref 访问组件实例OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 组件状态提升OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  • 用其他元素包装组件OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

Tips 注意事项

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

HOC和Mixin的比较

OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

更多编程相关知识,请访问:编程入门!!

以上就是react中什么是hoc的详细内容,更多请关注少儿编程网其它相关文章!OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网OUY少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

react中什么是hoc

      匿名评论
    • 评论
    人参与,条评论
    react中什么是hoc

微信公众号

免费视频教程

先知道