Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of what react high-level components refer to, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will have something to gain after reading this react high-level components. Let's take a look.

In react, high-level component is a function, which is an advanced technology for reusing component logic; high-level component is used to accept a component as a parameter and return a new component, this new component will use the component passed to it as a subcomponent, and high-level components can be realized by property proxy and reverse inheritance.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What does react high-level component mean?

A high-order component is a function (not a component) that takes a component as an argument and returns a new component. This new component will use the component you passed to it as a subcomponent-referenced from the React.js booklet

High-level component (Higher-Order Components) is an advanced technology used to reuse component logic in React. HOC itself is not part of React API. They are a pattern that emerges from the nature of React conception.

When using the react-redux framework in our project, there is a concept of connect, where connect is actually a high-level component. It also includes concepts similar to withRouter in react-router-dom.

Build a simple hoc

Function hello () {console.log ("hello i love react")} function hoc (fn) {return () = > {console.log ("first"); fn (); console.log ("end");}} hello = hoc (hello); hello ()

The method of realizing High-order components

There are two ways to implement high-level components:

Property proxy. High-level components operate props through the React components of the package.

Reverse inheritance. High-level components inherit from wrapped React components

Next, we will elaborate on these two methods respectively.

Attribute agent

Property proxy is a common implementation of high-level components in our react, which is illustrated by an example:

Import React, {Component} from 'react';const MyContainer = (WraooedComponent) = > class extends Component {render () {return}}

The most important part you can see here is the React component that returns the incoming WrappedComponent in the render method. In this way, we can pass props through high-level components. This method is called a property proxy.

Naturally, it is very easy for us to use the high-level component of MyContainer:

Import React, {Component} from 'react';class MyComponent extends Component {/ /...} export default MyContainer (MyComponent)

In this way, the component can be called as a parameter layer by layer, and the original component has the modification of the high-level component. It's as simple as that, maintaining the encapsulation of individual components while retaining ease of use. Of course, we can also use decorator to convert.

When using property proxies to build high-level components, the order of invocation is different from mixin. The above procedure for performing the life cycle is similar to a stack call:

Didmount-> HOC didmount-> (HOCs didmount)-> (HOCs will unmount)-> HOC will unmount-> unmount

Reverse inheritance

Another way to build high-level components is called reverse inheritance, which must literally be related to inheritance. Let's also look at a simple implementation.

Const MyContainer = (WrappedComponent) = > {class extends WrappedComponent {render () {return super.render ();}

As in the code above. Components returned by higher-level components inherit from WrappedComponent. Because you passively inherit WrappedComponent, all calls are reversed, which is the origin of the method.

This approach is quite different from property proxies. It is implemented by inheriting WrappedComponent, and methods can be called sequentially through super. Because it depends on the inheritance mechanism. The order in which HOC is called is the same as the queue.

Didmount-> HOC didmount-> (HOCs didmount)-> will unmount-> HOC will unmount-> (HOCs will unmount)

In the reverse inheritance method, higher-order components can use WrappedComponent references, which means that it can use WrappedComponent's state, props. Lifecycle and render methods. However, it does not guarantee that the complete subcomponent tree will be parsed. It has two major characteristics, let's talk about it.

Render hijacking

Rendering hijacking means that higher-level components can control the rendering process of WrappedComponent and render a variety of results. In the process, we can read, add, modify, or delete props in the output of any React element, or read or modify the React element tree, or conditional display. Or wrap the element tree with a style

Control state

Higher-level components can read, modify, or delete state in an WrappedComponent instance, or add state if necessary.

Component naming

When wrapping a high-level component, we lose the displayName of the original WrappedComponent, and the component name is an important attribute that facilitates our development and debugging.

Component parameters

Sometimes we need to pass in some parameters to call high-level components, which can be done in a very simple way.

Import React from 'react'function HOCFactoryFactory (... params) {return function HOCFactory (WrappedComponent) {return class HOC extends Component {render () {return}

When you use it, you can write:

HOCFactoryFactory (params) (WrappedComponent) / / or@HOCFactoryFactory (params) class WrappedComponent extends React.Component {}

This also takes advantage of the characteristics of functional programming. It can be seen that in the process of React abstraction, its shadow can be seen everywhere.

This is the end of the article on "what are the high-level components of react?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what react high-level components mean". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.