作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
ajax请求时post和get的区别是什么865
ajax默认是异步请求吗346
cors和ajax的区别是什么620
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    react能实现依赖注入吗

    原创2022-04-27 11:24:011124 关注公众号:每天精选资源文章推送

    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 参数被传递给 <List>组件,然后组件通过 REST API 获取远程数据。

    但是,<List> 组件并不会直接渲染数据,相反,它把渲染数据的重任交给了子组件 <Datagrid>。<Datagrid> 组件的渲染依赖于 <List>,<List> 是设置这种依赖关系的调用者。

    但是,这些策略可能对小型项目有所帮助。在一些大型项目中往往我们需要更灵活的扩展,除了这些基础的应用之外,我们还需要更好地支持依赖注入。

    我们来看几个扩展 React 依赖注入支持的库。

    InversifyJS

    02.png

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

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

    inversify-inject-decorators

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

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

    inversify-react

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

    react-inversify

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

    推荐学习:《react视频教程

    以上就是react能实现依赖注入吗的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:React
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐