React中的依賴注入，看這一篇就夠了！
React 組件不應該包含業務邏輯，你同意嗎？ 如果是，請繼續閱讀。 如果沒有，請立即停止。 這篇文章是寫給別人的。
只需 3 個步驟即可將依賴注入添加到您的 React 項目中：
創建一個“容器”來放置您的依賴項
創建一個鉤子 useInject 來檢索依賴項
使用組件中的鉤子
長版
如果您對答案持觀望態度，我將嘗試為您提供一些關于為什么我們不應該這樣做的見解：
React 是一個用于創建用戶界面的庫； 這個定義應該阻止我們將業務邏輯放入組件中。
包含業務邏輯的組件很難閱讀、維護和測試。
從組件中提取業務邏輯是一個能夠重用它的好主意。
好的，如果我們從組件中取出業務邏輯，我們應該將其編寫在某個地方，例如外部類或函數中。 我們該怎么做呢？ 通過使用依賴注入！
什么是依賴注入，為什么要使用它
依賴注入 (DI) 是一種軟件設計模式，它將對象的創建與其使用分開。 實際上，對象的實例化不是在使用它們的代碼中創建事物，而是委托給負責創建對象并將其提供給需要它們的組件的外部實體。
依賴注入旨在使代碼更加靈活、模塊化且易于測試。 DI 不是嚴格的、緊密耦合的代碼，而是允許模塊化組件輕松替換或擴展，而無需更改使用它們的代碼。
此外，DI 有助于提高代碼的可讀性和可維護性，因為它使組件之間的依賴關系變得明確，并有利于復雜依賴關系的管理。
總之，依賴注入的作用是：
將對象的創建與其使用分開
使代碼更加靈活、模塊化且易于測試
提高代碼的可讀性和可維護性。
React 中的依賴注入
假設我們需要開發一個管理待辦事項列表的 React 應用程序（多么奇特）。
我們將有一個顯示待辦事項列表的組件。我們希望在渲染組件時從某些 API 加載列表。 由于我們不想在組件中編寫業務邏輯，因此我們將擁有一個執行 API 調用的服務，我們可以在組件中使用該服務。 如該圖所示。
在此序列圖中，組件通過調用方法或函數向服務發送數據請求。 然后，服務通過發送請求從外部 API 檢索數據。 一旦接收到數據，服務就會對其進行處理并將其返回給組件。
事件的順序由圖中的箭頭指示。 從API到Service的虛線箭頭表示從API檢索數據，而從Service到Component的實線箭頭表示將處理后的數據返回到Component。
在實現級別，代碼可能如下所示：
import React, { useState, useEffect } from 'react';
import TodoService from './TodoService';
function TodoList() {
const [todos, setTodos] = useState([]);
useEffect(() => {
async function fetchTodos() {
try {
const todos = await TodoService.getTodos(); // Call TodoService to get todos
setTodos(todos);
} catch (error) {
console.error(error);
}
}
fetchTodos();
}, []);
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
}
export default TodoList;在此代碼中，我們定義了一個 TodoList 組件，該組件從 TodoService 調用 getTodos 方法。 我們使用 useState 掛鉤來跟蹤從服務返回的待辦事項，并使用 useEffect 掛鉤在組件安裝時獲取待辦事項。
當 fetchTodos 函數被調用時，它使用await關鍵字等待getTodos方法返回todos。 一旦待辦事項返回并使用 setTodos 函數將其設置為待辦事項狀態變量。
最后，我們使用地圖函數渲染待辦事項列表并顯示每個待辦事項的標題。 請注意，這是一個簡化的示例，TodoService 的實現可能會根據所使用的 API 的不同而有所不同。
使用 props 進行依賴注入
import React, { useState, useEffect } from 'react';
function TodoList({ todoService }) {
const [todos, setTodos] = useState([]);
useEffect(() => {
async function fetchTodos() {
try {
const todos = await todoService.getTodos(); // Call injected TodoService to get todos
setTodos(todos);
} catch (error) {
console.error(error);
}
}
fetchTodos();
}, [todoService]);
return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
}
export default TodoList;在此更新的代碼中，我們將 TodoService 作為 prop 注入到 TodoList 組件中。 該組件不再直接導入 TodoService，而是使用注入的服務來獲取 todo。
當組件安裝時， fetchTodos 函數使用注入的 todoService 來檢索 todos。 這樣，我們可以通過將不同的服務實現傳遞給 TodoList 組件來輕松交換 TodoService 的實現。
要將 TodoList 組件與 TodoService 的特定實現一起使用，我們將該服務作為 prop 傳遞，如下所示：
import React from 'react';
import TodoService from './TodoService';
import TodoList from './TodoList';
function App() {
return <TodoList todoService={TodoService} />;
}
export default App;通過將 TodoService 作為 prop 傳遞給 TodoList 組件，我們實現了更加模塊化和靈活的設計，因為我們可以輕松地在 TodoService 的不同實現之間切換，而無需更改 TodoList 組件。
在為組件編寫測試時，這非常有用。
此時，我們有兩個問題：
我們仍然需要將 TodoService 導入到 App 組件中，該組件不使用依賴注入。
props 只是在應用程序中傳輸數據的有效方法之一，因為它們僅適用于嵌套層。
該圖顯示了 props 如何通過組件的層次結構傳遞。 組件縮進得越多，它在組件樹中的嵌套就越深。 我們不想要這種嵌套。
使用 React Context 進行依賴注入
下面是使用 TodoContext 從組件調用 TodoService 的 React 代碼示例：
import React, { useState, useEffect, useContext } from 'react';
import TodoContext from './TodoContext';function TodoList() {
const [todos, setTodos] = useState([]);
const todoService = useContext(TodoContext); // Retrieve TodoService from TodoContext
useEffect(() => {
async function fetchTodos() {
try {
const todos = await todoService.getTodos(); // Call TodoService from TodoContext to get todos
setTodos(todos);
} catch (error) {
console.error(error);
}
}
fetchTodos();
}, [todoService]); return (
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
);
}
export default TodoList;在此代碼中，我們使用 useContext 掛鉤從 TodoContext 檢索 TodoService。 然后我們使用檢索到的 todoService 來獲取 todos。
useEffect 鉤子用于在組件安裝時獲取待辦事項。 fetchTodos 函數使用檢索到的 todoService 來檢索 todos 并將它們設置為 todos 狀態變量。
要使用此組件，我們首先創建一個 TodoContext 并將組件包裝在其中，如下所示：
import React from 'react';
import TodoContext from './TodoContext';
import TodoService from './TodoService';
import TodoList from './TodoList';
function App() {
return (
<TodoContext.Provider value={TodoService}>
<TodoList />
</TodoContext.Provider>
);
}
export default App;在此示例中，我們創建一個 TodoContext 并將 TodoService 作為其值傳遞。 然后，我們將 TodoList 組件包裝在 TodoContext.Provider 組件內，以便 TodoList 組件可以使用 useContext 掛鉤從上下文中檢索 TodoService。
使用控制反轉容器 (IOC) 進行依賴注入
使用這個上下文概念，我們可以再采取一步，使用控制反轉容器。
等等，什么是控制反轉容器 (IoC)？
在 React 中，IoC（控制反轉）容器是一種工具，可讓您管理應用程序中不同組件和服務之間的依賴關系。 它提供了一種方法來定義和注冊服務或對象（依賴項）一次，然后將它們注入到依賴它們的其他組件中。 這有助于解耦組件，并使您的應用程序更加模塊化且更易于維護。
React 中的 IoC 容器通常通過提供一個中央注冊表來工作，該注冊表引用可用作依賴項的所有對象。 組件可以從容器請求這些依賴項，而不是直接創建它們。 這種方法還可以輕松地用替代實現替換依賴項或模擬它們進行測試。
React 有幾種流行的 IoC 容器，例如 InversifyJS、Awilix 和 BottleJS，它們提供了構造函數注入、屬性注入和自動依賴解析等各種功能。 一些 IoC 容器比其他容器更復雜，因此選擇適合您的項目需求和復雜程度的容器非常重要。
在我們的例子中，我們將從頭開始編寫一個示例，如下所示：
import React, { createContext, useContext } from 'react';
// Create a new context for the container
const ContainerContext = createContext();
// Define a component that provides the container to its children
const ContainerProvider = ({ container, children }) => {
return <ContainerContext.Provider value={container}>{children}</ContainerContext.Provider>;
};
// Define a hook to access the container from within a component
const useContainer = () => {
const container = useContext(ContainerContext);
if (!container) {
throw new Error('Container not found. Make sure to wrap your components with a ContainerProvider.');
}
return container;
};
// Define a hook to inject dependencies from the container
const useInject = (identifier) => {
const container = useContainer();
return container.resolve(identifier);
};
// Example usage:
const MyService = () => {
return { foo: 'bar' };
};
const MyComponent = () => {
const myService = useInject('myService');
return <div>{myService.foo}</div>; // Output: 'bar'
};
const container = {
registry: {
myService: MyService()
},
resolve(identifier) {
if (!this.registry.hasOwnProperty(identifier)) {
throw new Error(`Object with identifier ${identifier} not found in container`);
}
return this.registry[identifier];
}
};
const App = () => {
return (
<ContainerProvider container={container}>
<MyComponent />
</ContainerProvider>
);
};在此示例中，我們創建一個 ContainerProvider 組件，該組件將容器對象作為 prop，并使用 ContainerContext 上下文將其提供給其子組件。 我們還定義了一個 useContainer 鉤子，可用于從組件內檢索容器。
然后，我們定義一個 MyService 對象并將其添加到容器對象的注冊表屬性中。 我們還在容器對象上定義了一個解析方法，該方法采用標識符并從注冊表中檢索相應的對象。 在本例中，resolve 方法返回 MyService 對象。
我們用 ContainerProvider 包裝 MyComponent，并將容器對象作為 prop 傳入，然后渲染 App 組件，該組件渲染用 ContainerProvider 包裝的 MyComponent。 當呈現 MyComponent 時，它會從容器中檢索 myService 依賴項，并將其 foo 屬性呈現到屏幕上。
在此代碼中，我們添加了一個 useInject 掛鉤，該掛鉤將標識符作為參數并從容器中檢索相應的對象。 useInject 鉤子在內部調用 useContainer 來檢索容器，然后調用容器上的resolve 方法來檢索對象。
接下來，我們創建一個 MyComponent，它使用 useInject 掛鉤從容器中檢索 myService 依賴項，并將其 foo 屬性呈現到屏幕上。
最后，我們渲染 App 組件，它渲染用 ContainerProvider 包裝的 MyComponent。 當呈現 MyComponent 時，它使用 useInject 掛鉤從容器中檢索 myService 依賴項，并將其 foo 屬性呈現到屏幕上。
總之，依賴注入是一種設計模式，它允許更靈活、模塊化且易于測試的代碼。 它將對象的創建與其使用分開，使組件之間的依賴關系變得明確并促進復雜依賴關系的管理。
在 React 中，依賴注入可以通過將服務作為 props 注入或使用容器通過鉤子為組件提供依賴關系來實現。 這種做法可以使代碼更清晰、更易于維護，從而更容易重用業務邏輯和管理依賴項。
遵循此模式可以提高 React 代碼的可讀性、可維護性和可測試性。
