Can react implement dependency injection?

react can implement dependency injection. Implementation method: 1. Use props to implement dependency injection, such as "function welcome(props){return...}"; 2. Use context to implement dependency injection; 3. Use dependency injection libraries such as InversifyJS to implement dependency injection.

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

Can React implement dependency injection?

Can React implement dependency injection?

The following common codes actually all apply the idea of ​​dependency injection. , let’s look at a few examples:

1. Use props to allow dependency injection

function welcome(props) {
  return <h1 id="nbsp-Hello-nbsp-props-name"> Hello, {props.name}</h1>;
}

welcome component receives props and then generates html. Don’t be surprised, we are 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 <p>{ message }</p>;
}

Since context is passed down along the component tree, we can use the context inside the component hooks to extract it.

3. Dependency injection can also be achieved using only jsx

const ReviewList = props => ( 
  <List resource="/reviews" perPage={50} {...props}> 
    <Datagrid rowClick="edit"> 
      <DateField source="date" /> 
      <CustomerField source="customer_id " /> 
      <ProductField source="product_id" /> 
      <StatusField source="status" /> 
    </Datagrid> 
  </List> 
);

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

However, the component does not render data directly. On the contrary, it hands over the responsibility of rendering data to the sub-component . The rendering of the component depends on , and is the caller that sets this dependency.

However, these strategies may be helpful for smaller 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 look at a few libraries that extend React’s dependency injection support.

InversifyJS

##InversifyJS is a powerful, lightweight dependency injection library that is very simple to use , but there are still some problems using it with React components.

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

inversify-inject-decorators

This tool library mainly provides methods such as lazyInject, which can give There is a lazy injection, which means that there is no need to provide dependencies when the object is initialized. This library comes in handy when we cannot change the constructor.

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

inversify-react

inversify-react is a unique library that performs dependency injection. Just like using React Context.Provider, we can also get a Provider from this library:

react-inversify

Although the name is very similar to the previous library, But the approaches of the two libraries are different. This method is closer to the idea of ​​React, because the object is passed as a property rather than instantiated inside the component.

Recommended learning: "

react video tutorial"

The above is the detailed content of Can react implement dependency injection?. For more information, please follow other related articles on the PHP Chinese website!