react能實現依賴注入嗎

react能實現依賴注入。實作方法：1、利用props實作依賴注入，例如「function welcome(props){return...}」；2、利用context實作依賴注入；3、利用InversifyJS等依賴注入庫實作依賴注入。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react能實現依賴注入嗎

React能實現依賴注入

下面幾個常見的程式碼，其實都應用了依賴注入的思想，我們來看幾個例子：

1、使用props 允許依賴注入

function welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

welcome 元件透過接收props 然後產生html，別驚訝，我們最常用的props 其實就是應用了依賴注入的想法。

2、使用context 是實作依賴注入的另一種方法

function counter() {
  const { message } = useContext(MessageContext);
  return <p>{ message }</p>;
}

由於context 是沿著元件樹向下傳遞的，我們可以使用元件內部的hooks 來提取到它。

3、只使用 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 參數傳遞給 元件，然後元件透過 REST API 取得遠端資料。

但是， 元件並不會直接渲染數據，相反，它把渲染資料的重任交給了子元件 。 元件的渲染依賴 ， 是設定這種依賴關係的呼叫者。

但是，這些策略可能對小型專案有所幫助。在一些大型專案中往往我們需要更靈活的擴展，除了這些基礎的應用之外，我們還需要更好地支援依賴注入。

我們來看幾個擴充 React 依賴注入支援的函式庫。

InversifyJS

#InversifyJS 是強大、輕量的依賴注入函式庫，並且使用非常簡單，但是把它和React 元件結合使用還是有些問題。

因為 InversifyJS 預設使用建構函式註入，但 React 不允許開發者擴充元件的建構函式。我們透過一個例子來看看如何解決這個問題：

inversify-inject-decorators

該工具庫主要提供了lazyInject 之類的方法，它可以給出了一個惰性的注入，意思是在物件初始化時不需要提供依賴，當我們沒辦法改建構函式時，這個函式庫就派上用場啦。

另外，除了字面上所說的惰性，另外一個非常重要的功能就是允許你將 inversifyJs 整合到任何自己控制類別實例建立的函式庫或框架，例如 React 。

inversify-react

inversify-react 是唯一執行依賴注入的函式庫。就像使用React Context.Provider一樣，我們從這個函式庫也能拿到一個Provider：

#react-inversify

雖然和上一個函式庫名字很像，但是兩個函式庫的做法是不一樣的，這種方法更接近React 的思想，因為物件是作為屬性傳遞的，而不是在元件內部實例化。

推薦學習：《react影片教學》

以上是react能實現依賴注入嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！