react能不能實現依賴注入

這篇文章主要講解了“react能不能實現依賴注入”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react能不能實現依賴注入”吧！

react能實現依賴注入。方法：1、用props實現依賴注入，可通過接收props生成html；2、用context實現依賴注入；3、用jsx實現依賴注入；4、用InversifyJS、“inversify-react”等依賴注入庫實現。

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

react能實現依賴注入嗎

React能實現依賴注入

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

1、使用 props 允許依賴注入

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

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 參數被傳遞給 <List>組件，然后組件通過 REST API 獲取遠程數據。

但是，<List> 組件并不會直接渲染數據，相反，它把渲染數據的重任交給了子組件 <Datagrid>。<Datagrid> 組件的渲染依賴于 <List>，<List> 是設置這種依賴關系的調用者。

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

我們來看幾個擴展 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能不能實現依賴注入這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！