Dependency Injection in React Core
Dependency Injection
In Software Engineering Dependency Injection is a technique where one object injects or passes the dependency object to other object at run time.
According to Robert Martin Inversion of Control can be achieved by doing Dependency Injection. Where Compile or Build time dependencies are inverted and they are supplied at run time via Dependency Injection. Therefore, various separate components at build time does not depend on themselves however at run time there are dependencies.
React library is very famous library now a days. It is a client side framework that enables you to write multi-platform targeted UI Components. React is very flexible and loosely coupled with its features and low level dependent libraries by implementing Inversion of Control and Dependency Injection principles.
Inversion Of Control (IOC)
According to Inversion of Control principle, Higher level Implementations should not depend on Lower Level Implementations. They should depend on Abstractions. Similarly, Low Level Implementations should not depend on Higher Level Implementations rather it should also depend on Abstraction.
At Build time both Higher and Lower Level Implementations should depend on Abstraction however, at run time Higher Level Implementations will use Lower Level Implementations to perform a desired task. Therefore build time dependencies are inverted and it is inversion of running time dependencies.
I know, it is confusing let me explain by giving you one example!
Example of Inversion Of Control in React
React wants to update the state of the component into DOM. Here Higher Level Implementation is React and Low Level Implementation is React DOM. According to Inversion of Control, even though React needs React DOM to update the component state at Run Time React should not depend on React DOM for compiling, building or releasing React Package. Therefore, React package can be independently developed and released. Hence its creation and release life cycle is completely independent of React DOM library release and creation life cycle.
In the above diagram DOM is Platform Specific Details which is very low level implementations. For IOS updating UI Component is different than Android or DOM. Therefore, React does not care about this rather it just depends on updater. Updater is the abstraction which is implemented by Platform specific libraries such as React DOM Server, React DOM, iOS Native, Android or Test
Dependency Injection (DI) in React Framework
React DOM has implementation details of updater object. React uses updater to set the state of the Component which finally renders in UI. React DOM injects the dependency of updater implementation details to React by Property Dependency Injection.
Example of DI in REACT Framework
Suppose we want to to call setState method in React Component to change the UI State of the Component on button click. Then we will write code this.setState({clickec:true}) on button click of component. React will call enqueSetState on updater object which is implemented by React DOM. React DOM will create the instance of the component and it will assign updater to ReactDomUpdater which is property dependency injection style. Please see the code below.
https://gist.github.com/roopkt/f5e3c341727363d6806b4f06fc187245
Comments