Getting started with React advanced components

Getting started with React advanced components

Definition of high-level Components

HoC is not a React API. It is an implementation mode. It is essentially a function that accepts one or more React components as parameters and returns a brand new React component, instead of transforming existing components, such components are called high-order components. During development, some functions need to be reused by multiple component classes. In this case, you can create a Hoc.

Basic usage

Package Method

const HoC = (WrappendComponent) => { const WrappingComponent = (props) => (  <div className="container">   <WrappendComponent {...props} />  </div> ); return WrappingComponent;};

In the above Code, WrappendComponent is accepted as the parameter. this parameter is a common component to be packaged by HoC. In render, a div is wrapped and Its className attribute is assigned, the resulting WrappingComponent and the passed WrappendComponent are two completely different components.

In WrappingComponent, you can read, add, edit, and delete the props passed to WrappendComponent, or wrap WrappendComponent with other elements to implement encapsulation style, layout addition, or other operations.

Combination Method

const HoC = (WrappedComponent, LoginView) => { const WrappingComponent = () => {  const {user} = this.props;   if (user) {   return <WrappedComponent {...this.props} />  } else {   return <LoginView {...this.props} />  } }; return WrappingComponent;};

The preceding Code contains two components: WrappedComponent and LoginView. If the input props contains a user, the WrappedComponent component is displayed normally. Otherwise, the LoginView component is displayed, allowing the user to log on. The parameters passed by the HoC service can be multiple. When multiple components are passed, the new component behavior can be customized. For example, when a user logs on to the console, the homepage is displayed, and the logon interface is not displayed. when the list is rendered, input the List and Loading components to add the Loading behavior for the new component.

Inheritance Method

const HoC = (WrappendComponent) => { class WrappingComponent extends WrappendComponent {  render() (   const {user, ...otherProps} = this.props;   this.props = otherProps;   return super.render();  } } return WrappingComponent;};

WrappingComponent is a new component that inherits from WrappendComponent and shares its parent-level functions and attributes. You can use super. render () or super. componentWillUpdate () to call the lifecycle function of the parent class. However, this coupling of the two components reduces the reusability of the components.

The encapsulation of Components in React is based on the concept of the smallest available unit. Ideally, one component only does one thing and conforms to the single responsibility principle in OOP. If you need to enhance the functions of components, enhance the components by combining or adding code, rather than modifying the original code.

Notes

Do not use high-level components in render Functions

Render () {// each render function call creates a new EnhancedComponent instance // EnhancedComponent1! = EnhancedComponent2 const EnhancedComponent = enhance (MyComponent); // every time the sub-tree is completely detached or removed, return <EnhancedComponent/> ;}

The diff Algorithm in React compares the old and new sub-object trees to determine whether to update the existing sub-object tree or discard the existing sub-tree and re-mount it.

The static method must be copied.

// Define the static method WrappedComponent. staticMethod = function (){/*... * // use the advanced component const EnhancedComponent = enhance (WrappedComponent); // The enhanced component does not have the static method typeof EnhancedComponent. staticMethod = 'undefined' // true

Refs attributes cannot be passed

The ref specified in HoC is not passed to the child component and must be passed through the callback function using props.

Reference

Advanced Components

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.