React Advanced components

  • Origin:

The React high-order component is a function that receives and returns components. It is more of a mechanism than a component. Learn React. You shouldn’t just spend a lot of time writing business code. You need to learn advanced usage that you don’t need to use in an interview.

So I’ll start with the react advanced components;

Starting from the top design, advanced components can be divided into the following categories according to the relationship between incoming and return components:

- Proxy mode - Inheritance modeCopy the code

The agency form is:

function removeUserProp(WrappedComponent) { return function newRender(props) { const {user , ... otherProps} = props; return <WrappedComponent {... otherProps} /> } }Copy the code

WrappedComponent returns a newRender that encapsulates the functionality of the incoming WrappedComponent. This is what the proxy pattern means;

In general, higher-order components can be used in the following ways;

1. The prop operation

2. Access to the ref

3. Extract state

4. Pack components

So for manipulating prop, I wrote the following code:

const addNewProps = (wrappedComponent , newProps) => { return class myComponent extends wrappedComponent { render(){ return ( <wrappedComponent {... this.props}{... newProps}/> ) } } }Copy the code

Add newProps data to myComponent;

Accessing ref is not recommended because it is too flexible;

The react-redux connect function is used to extract state. The react-redux connect function is used to extract state.

In the relationship between the fool component and the container component, the fool component does not manage its own state, but relies on the container component to manage, which is the meaning of the extraction mode.Copy the code

You need to implement the connect function and a Provider yourself;

The way to wrap the component implementation is to pass in a style parameter as the render style. The code is as follows:

function styleHOC(wrappedComponent , style) {
    return class mycomponent extends React.component {
    render(){
        return (<wrappedComponent style = {style} />)
    }
    }
}
Copy the code

The top is the high-level component in the form of proxy, which is implemented by inheritance. The component that returns inherits the component that is passed in. The code is as follows:

function removeUserProps (wrappedComponent) { return class myComponent extends wrappedComponent{ render(){ return super.render(); }}}Copy the code

Inheritance of higher-order components can be used in the following scenarios:

Manipulation of the prop; Manipulating life cycle functions;

The code for manipulating the declared periodic function is as follows:

const componentHOC = (wrappedComponent) => { return class component extends wrappedComponent{ shouldComponentUpdate(nextProps , nextState){ if(! nextProps.isLogined) { return; } } render(){ return( <wrappedComponent props = {this.props} /> ); }}}Copy the code

This is the implementation of a higher-order component that manipulates lifecycle functions. The hypothetical business scenario is that the component is refreshed only after the user logs in successfully.

Summary: React high-order components generally have the inheritance and proxy modes. The proxy mode (combination) is generally recommended by predecessors. React Advanced components

About me: One and a half years after graduation, ENGAGED in web front-end development, and is currently building a complete basic front-end system; Wechat id: Yingbin192; Welcome to exchange;

Welcome to follow my official account: