react能不能實(shí)現(xiàn)依賴注入

這篇文章主要講解了“react能不能實(shí)現(xiàn)依賴注入”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“react能不能實(shí)現(xiàn)依賴注入”吧！

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

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react能實(shí)現(xiàn)依賴注入嗎

React能實(shí)現(xiàn)依賴注入

下面幾個(gè)常見的代碼，其實(shí)都應(yīng)用了依賴注入的思想，我們來看幾個(gè)例子：

1、使用 props 允許依賴注入

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

welcome 組件通過接收 props 然后生成 html，別驚訝，我們最常用的 props 其實(shí)就是應(yīng)用了依賴注入的思想。

2、使用 context 是實(shí)現(xiàn)依賴注入的另一種方法

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

由于 context 是沿著組件樹向下傳遞的，我們可以使用組件內(nèi)部的 hooks 來提取到它。

3、只使用 jsx 也能實(shí)現(xiàn)依賴注入

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 參數(shù)被傳遞給 <List>組件，然后組件通過 REST API 獲取遠(yuǎn)程數(shù)據(jù)。

但是，<List> 組件并不會(huì)直接渲染數(shù)據(jù)，相反，它把渲染數(shù)據(jù)的重任交給了子組件 <Datagrid>。<Datagrid> 組件的渲染依賴于 <List>，<List> 是設(shè)置這種依賴關(guān)系的調(diào)用者。

但是，這些策略可能對(duì)小型項(xiàng)目有所幫助。在一些大型項(xiàng)目中往往我們需要更靈活的擴(kuò)展，除了這些基礎(chǔ)的應(yīng)用之外，我們還需要更好地支持依賴注入。

我們來看幾個(gè)擴(kuò)展 React 依賴注入支持的庫(kù)。

InversifyJS

InversifyJS 是一個(gè)強(qiáng)大、輕量的依賴注入庫(kù)，并且使用非常簡(jiǎn)單，但是把它和 React 組件結(jié)合使用還是有些問題。

因?yàn)?InversifyJS 默認(rèn)使用構(gòu)造函數(shù)注入，但是 React 不允許開發(fā)者擴(kuò)展組件的構(gòu)造函數(shù)。我們通過一個(gè)例子來看看如何解決這個(gè)問題：

inversify-inject-decorators

該工具庫(kù)主要提供了 lazyInject 之類的方法，它可以給出了一個(gè)惰性的注入，意思是在對(duì)象初始化時(shí)不需要提供依賴，當(dāng)我們沒辦法改構(gòu)造函數(shù)時(shí)，這個(gè)庫(kù)就派上用場(chǎng)啦。

另外，除了字面上所說的惰性，另外一個(gè)非常重要的功能就是允許你將 inversifyJs 集成到任何自己控制類實(shí)例創(chuàng)建的庫(kù)或者框架，比如 React 。

inversify-react

inversify-react 是一個(gè)唯一執(zhí)行依賴注入的庫(kù)。就像使用 React Context.Provider一樣，我們從這個(gè)庫(kù)也能拿到一個(gè) Provider：

react-inversify

雖然和上一個(gè)庫(kù)名字很像，但是兩個(gè)庫(kù)的做法是不一樣的，這種方法更接近于 React 的思想，因?yàn)閷?duì)象是作為屬性傳遞的，而不是在組件內(nèi)部實(shí)例化。

感謝各位的閱讀，以上就是“react能不能實(shí)現(xiàn)依賴注入”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)react能不能實(shí)現(xiàn)依賴注入這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！