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> 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

inversify-inject-decorators

inversify-react

react-inversify

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!