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

react能不能实现依赖注入  react 第1张

InversifyJS 是一个强大、轻量的依赖注入库,并且使用非常简单,但是把它和 React 组件结合使用还是有些问题。

因为 InversifyJS 默认使用构造函数注入,但是 React 不允许开发者扩展组件的构造函数。我们通过一个例子来看看如何解决这个问题:

inversify-inject-decorators

该工具库主要提供了 lazyInject 之类的方法,它可以给出了一个惰性的注入,意思是在对象初始化时不需要提供依赖,当我们没办法改构造函数时,这个库就派上用场啦。

另外,除了字面上所说的惰性,另外一个非常重要的功能就是允许你将 inversifyJs 集成到任何自己控制类实例创建的库或者框架,比如 React 。

inversify-react

inversify-react 是一个唯一执行依赖注入的库。就像使用 React Context.Provider一样,我们从这个库也能拿到一个 Provider:

react-inversify

虽然和上一个库名字很像,但是两个库的做法是不一样的,这种方法更接近于 React 的思想,因为对象是作为属性传递的,而不是在组件内部实例化。

感谢各位的阅读,以上就是“react能不能实现依赖注入”的内容了,经过本文的学习后,相信大家对react能不能实现依赖注入这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是蜗牛博客,小编将为大家推送更多相关知识点的文章,欢迎关注!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论电报频道链接