zoukankan      html  css  js  c++  java
  • redux 学习总结

    redux 总结

    redux 是一个新型的前端架构模式,可以和任何前端库相结合使用。

    • 简单描述redux模式的使用
      当我们在写一个共享状态的代码时,如果可以被任意修改的话,那么程序的行为将会不可预料,所以我们通过dispatch(中间人)来执行某些允许的修改操作,而且在action里面声明,让大家都知道数据被修改了。

    • 抽象createStore
      经过上面的操作后,我们吧这个模式抽象出一个createSore,他可以产生store,里面包含getState和dispatch函数,方便我们使用。

    • 加入订阅者模式
      后来我们发现每次数据都需要手动重新渲染,我们希望自动重新渲染页面,后来加入了订阅者模式,可以通过store.subscribe订阅数据修改事件,每次数据更新的时候都会自动重新渲染。

    • 性能优化
      为了解决一些性能问题,我们引入“共享结构的对象”,这样可以在每一个渲染函数的开头进行简单的判断避免没有被修改的数据被重新渲染。

    • redcer
      我们优化了 stateChanger 为 reducer,定义了 reducer 只能是纯函数,功能就是负责初始 state,和根据 state 和 action 计算具有共享结构的新的 state。

    • createStore基本代码结构

        // 定一个 reducer
        function reducer (state, action) {
          /* 初始化 state 和 switch case */
        }
        
        // 生成 store
        const store = createStore(reducer)
        
        // 监听数据变化重新渲染页面
        store.subscribe(() => renderApp(store.getState()))
        
        // 首次渲染页面
        renderApp(store.getState()) 
        
        // 后面可以随意 dispatch 了,页面自动更新
        store.dispatch(...)
      
    • 学习总结
      自己跟着教程总结了一下redux,模式的基本思想算是有一个概念了,但是使用还是不是很清楚,还很老火,所以还得继续努力。

  • 相关阅读:
    基于边缘保留滤波实现人脸磨皮的算法 | 掘金技术征文
    图像算法---表面模糊算法
    通过人脸照片更换皮肤的方法及系统
    一种数字图像自动祛除斑点的方法
    Leetcode 301.删除无效的括号
    Leetcode 300.最长上升子序列
    Leetcode 299.猜字游戏
    Leetcode 297.二叉树的序列化和反序列化
    Leetcode 295.数据流的中位数
    Leetcode 289.生命游戏
  • 原文地址:https://www.cnblogs.com/yehui-mmd/p/7712235.html
Copyright © 2011-2022 走看看