Home > Article > Web Front-end > 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
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
. 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 HOC
Look at an example
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
for display, each component needs to be written againcomponentWillMount 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>{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>{this.props.data}</h2> } } export default Page1
How? How to use HOC
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 componentComparison of HOC and Mixin
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!