what is hoc in react

HOC is an advanced technology in react that extracts the logical reuse part of components, but HOC is not a React API. It is a method that receives a component as a parameter and returns an enhanced component. .

Related tutorial recommendations: React video tutorial

What? What is HOC? . It's just a design pattern, similar to the decorator pattern.

Specifically, HOC is a function, and the function accepts a component as a parameter and returns a new component. From a consequentialist perspective, HOC is equivalent to mixins(mix) in

Vue

. In fact,

React

’s previous strategy also used mixins, but later facebook realized that the problems caused by mixins were greater than the value it brought. So mixins was removed. Want to know moreWhy? Why use HOCLook at an example

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

  render() {    return (
      <h2 id="this-state-data">{this.state.data}</h2>
    )
  }
} 

export default Page1

In this example, you need to # before mounting the component Get the value of data from ##localStorage

, but when other components also need to get the same data from

localStorage

for display, each component needs to be written again

componentWillMount code, it will appear very redundant. So in Vue we usually use:

mixins: []

But in React we need to use the HOC mode

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

When we build a HOC After that, it will be much simpler when we use it. Looking at the initial example, we don't need to write componentWillMount

.

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

class Page1 extends Component{
  render() {
    return <h2 id="this-props-data">{this.props.data}</h2>
  }
}

export default withStorage(Page1)

Obviously, this is a decorator pattern, then you can use the ES7 form

import React, { Component } from 'react'
import withStorage from '@/utils/withStorage'

@withStorage
class Page1 extends Component{
  render() {
    return <h2 id="this-props-data">{this.props.data}</h2>
  }
}

export default Page1

How? How to use HOC

Usage scenarios

Manipulate props

Access component instances through ref

• Component status improvement

• Wrap components with other elements
Tips Notes

• 1, Name
Put the wrapped component The name is also wrapped into the HOC's display name.

2. Timing

Do not use HOC in the render method of the component, and try not to use HOC in other life cycles of the component. Because a new component will be returned every time when calling HOC, so every time you render, the component created by the previous high-order component will be unmounted (unmount), and then the new component created this time will be remounted (mounted), which will affect Efficiency again loses the state of the component and its subcomponents.

3. Static methods

If you need to use the static methods of the packaged component, you need to manually copy these static methods, because the new component returned by HOC does not contain the static methods of the packaged component.
4, ref
will not be passed to the wrapped component
Comparison of HOC and Mixin

High-order components belong to the idea of ​​functional programming. The existence of high-order components will not be perceived for the wrapped components, and the components returned by high-order components will have enhanced functions on top of the original components. . The mixing mode of Mixin will continuously add new methods and attributes to the component. The component itself can not only sense it, but even need to do related processing (such as naming conflicts, state maintenance). Once the number of mixed modules increases, the entire component will It becomes difficult to maintain, which is why so many React libraries are developed using high-order components.

For more programming-related knowledge, please visit: Introduction to Programming

! !

The above is the detailed content of what is hoc in react. For more information, please follow other related articles on the PHP Chinese website!