zoukankan      html  css  js  c++  java
  • (六)Redux进阶

    1 UI组件与容器组件的拆分

    UI组件(傻瓜组件):只负责页面显示,没有任何逻辑

    容器组件(聪明组件):并不去管UI到底长成什么样,关注的是整个业务逻辑

    2 无状态组件

    一个普通的函数就是无状态组件 开销比较低

    而class..extends..要执行一些生命周期函数

    结论:当定义一个UI组件 没有逻辑操作的时候一般使用无状态组件。

    3 Redux中 发送异步请求获取数据

    4 使用Redux-thunk中间件进行ajax请求发送

    Redux-thunk可以把复杂的异步请求逻辑放到action里处理 而不是都写到组件里。

    这时action已经不是一个对象了,可以是一个函数

    而且函数返回的第一参数是dispatch

    5 到底什么是redux的中间件

    redux中间件的中间指的是action和store之间

    以前action只能是一个对象,派发给store

    现在使用了redux-thunk后 action可以是一个函数

    实际上的中间件就是对dispatch的一个升级和封装

    最原始的就是把对象传递给store,现在使用redux-thunk后

    调用dispatch方法,如果传入的是一个对象,那和之前一样,

    假设传入的是一个函数, 会让你函数先执行,执行完的时候,需要调用store时候再去调用

    市场上的两种中间件:

    redux-thunk是把异步请求放到action里面

    redux-sage是把异步请求放到单独的文件里面去处理

    6 Redux-saga中间件的使用

    把异步逻辑拆分到saga里面去。

    8 react-redux的使用

    这个包帮助我们在react中更加方便的使用redux

    1.Provider

    这个组件之下所有的组件都有store了

    在子组件中,之前:

    之后:

    (让组件和store做连接)

    再进一步:

    口诀:

    connect是连接 TodoList和store做连接,通过mapStateToProps这个映射关系

    再进异步:

    Provider 提供器

    然后通过connect方法做连接

    10 使用React-redux完成TodoList功能

    todolist是一个UI组件

    但是connect把他包装后使其变成了一个容器组件

  • 相关阅读:
    初识Java内存结构
    eclipse的安装与配置
    关于android客户端使用ksoap2调用wcf(.svc)的总结
    ie下jpg不显示问题
    Android学习笔记(1)
    HTML标签语义化
    【转】android模拟机不能上网
    WCF IIS 寄宿问题
    C# 参数传递
    Wcf IIS 寄宿
  • 原文地址:https://www.cnblogs.com/eret9616/p/9943302.html
Copyright © 2011-2022 走看看