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

This article mainly explains "react can achieve dependency injection", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "react can achieve dependency injection" bar!

React can implement dependency injection. Methods: 1. Dependency injection can be realized by receiving props to generate html;2 and using context to realize dependency injection. 3. Dependency injection can be realized by jsx. 4. Dependency injection libraries such as InversifyJS and "inversify-react" can be used to realize dependency injection.

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

Can react implement dependency injection?

React can implement dependency injection

The following common code actually applies the idea of dependency injection. Let's take a look at a few examples:

1. Use props to allow dependency injection

Function welcome (props) {return Hello, {props.name};}

Welcome components receive props and then generate html. Not surprisingly, our most commonly used props actually applies the idea of dependency injection.

2. Using context is another way to implement dependency injection

Function counter () {const {message} = useContext (MessageContext); return

{message}

;}

Since context is passed down the component tree, we can extract it using hooks within the component.

3. Dependency injection can also be implemented using only jsx

Const ReviewList = props = > ()

The perPage parameter is passed to the component, which then obtains the remote data through REST API.

However, the component does not render the data directly; instead, it leaves the responsibility of rendering the data to the subcomponents. The rendering of the component depends on the caller who sets this dependency.

However, these strategies may be helpful for small projects. In some large projects, we often need more flexible extensions, in addition to these basic applications, we also need to better support dependency injection.

Let's take a look at several libraries that extend React dependency injection support.

InversifyJS

InversifyJS is a powerful, lightweight dependency injection library, and it is very easy to use, but there are some problems with using it with React components.

Because InversifyJS uses constructor injection by default, React does not allow developers to extend the constructor of a component. Let's use an example to see how to solve this problem:

Inversify-inject-decorators

The toollibrary mainly provides methods such as lazyInject, which gives a lazy injection, meaning that there is no need to provide dependencies when the object is initialized, and it comes in handy when we can't change the constructor.

In addition, in addition to literal inertia, another very important feature is to allow you to integrate inversifyJs into any library or framework that you control the creation of class instances, such as React.

Inversify-react

Inversify-react is the only library that performs dependency injection. Just like using React Context.Provider, we can get a Provider from this library:

React-inversify

Although the name of the previous library is similar, the approach of the two libraries is different, which is closer to the idea of React, because objects are passed as properties rather than instantiated within the component.

Thank you for your reading, the above is the content of "can react achieve dependency injection". After the study of this article, I believe you have a deeper understanding of whether react can achieve dependency injection, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.