HOC
What’s HOC
High of components is react component package with another react component. so that’s just a wrapper around react component.
such as the function model , we also call Class Factory Methods, we can use haskell to describe that
HocFactory:: W: React.Compoent => E: React.ComponentW(WrapperComponent) refer to component has been wrapped.
E(EnhancedComponent) refers to a new HOC that returns a type of React.
Parcel definection have two different meanings.
- Props Proxy: HOC operates on props passed to WrapperComponent W.
- Inheritance Inversion: HOC extends WrappeerCompoent W.
HOC Factory implementation methods
In this section, we will describe the implementation for the HOC factory.
Props Proxy
The simple implementation of Props Proxy
function ppHOC(WrappedComponent) {
return class PP extends React.Component {
render() {
return <WrappedComponent {...this.props}/>
}
}
}The main thing here is that the Hoc returns a React element of type WrappedComponent in the render method, and we also pass in the props recieved by the HOC, which is where name Props Proxy comes from.
<WrappedComponent {...this.props}/>
// equal
React.createElement(WrappedComponent, this.props, null)Both create a React Element for rendering in a reconciliation process within React. If you want to learn more about React Elements vs Components, see this article by Dan Abramov, and for more information on the reconciliation process, see the documentation.
(Note: the reconciliation process can be understood as the process within React of synchronising the virtual DOM to the real DOM, including comparing the old and new virtual DOM and calculating the minimum DOM operation)
The reconciliation process
reconciliation process can be understood that unifies behaviour, and the HOC is an implementation based on this idea.
Reconciliation process in react
The reconciliation process is understood as the process within React of synchronising the virtual DOM to the real DOM, including comparison of the old and new virtual DOM and calculation of the minimum DOM operation.
What can i do with Props proxy
- Manipulate props
- Access to component instance by Refs
- Extract state
- Wrapping wrappedCompoent with other components
Manipulate props
U can delete, add or change props that are passed to WrappedComponent.
When u delete props, u must to be careful, because delete options will destroy the WrappedComponent.
function ppHOC(WrappedComponent) {
return class PP extends React.Component {
render() {
const newProps = {
user: currentLoggedInUser
}
return <WrappedComponent {...this.props} {...newProps}/>
}
}
}Access to component instance by refs
function refsHOC(WrappedComponent) {
return class RefsHOC extends React.Component {
proc(wrappedComponentInstance) {
wrappedComponentInstance.method()
}
render() {
const props = Object.assign({}, this.props, {ref: this.proc.bind(this)})
return <WrappedComponent {...props}/>
}
}
}Extract state
function ppHOC(WrappedComponent) {
return class PP extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
this.onNameChange = this.onNameChange.bind(this)
}
onNameChange(event) {
this.setState({
name: event.target.value
})
}
render() {
const newProps = {
name: {
value: this.state.name,
onChange: this.onNameChange
}
}
return <WrappedComponent {...this.props} {...newProps}/>
}
}
}uses example
@ppHOC
class Example extends React.Component {
render() {
return <input name="name" {...this.props.name}/>
}
}For more information on the regular bi-directional binding HOC please click link
Wrapping wrappedComponent with other components
function ppHOC(WrappedComponent) {
return class PP extends React.Component {
render() {
return (
<div style={{display: 'block'}}>
<WrappedComponent {...this.props}/>
</div>
)
}
}
}
