第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

用redux重構(gòu)react畫廊應用

用redux升级的galley by react

首先很感谢Materliu老师,原项目在此(React实战--打造画廊应用(上)-慕课网 http://idcbgp.cn/learn/507)。 距离做这个练手项目已经过去了快一年。在此之间,有些学习有些成长。之前公司里用的是mobx,最近刚好有空,学习了redux,便产生了重构这个demo的想法。
项目地址:https://github.com/laihaibo/gallery-on-react

做了什么
  • 将原先的组件拆分为两个container,分别为控制条和图片展示区。让结构更加清晰,容易维护。
  • 将数据存储于store,所有组件共享一份数据。解决了组件间传值问题。一处改变,就可以响应式的更新。
  • 设计三个action,分别用于初始化/升级排布数组update、设置居中(后来发现其实可以省略)center、设置翻转inverse
    点击查看

    http://laihaibo.xyz/gallery-on-react/build/index.html

    安装
    1. npm i
    2. npm start
    优化
    1. 为每个component组件编写了shouldComponentUpdate
    2. 将原先的充满副作用的函数修改为声明式的函数
todo
  1. 控制条旋转图标
  2. css => less
  3. 编写devprod版本的配置文件
  4. localstorage数据持久化存储
  5. 其他优化
  6. pwa
总结
  • 重构完这个项目,我对view = f(data)的思想,有了一个更深的理解。组件间的数据传递使用reduxreact负责渲染数据,这样就够清晰,也更易维护。
  • 关于组件的拆分,如何合理利用props传递数据,数据结构设计,采用怎样的设计模式,都是值得不断优化的问题
  • just do it
點擊查看更多內(nèi)容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優(yōu)惠券免費領(lǐng)

立即參與 放棄機會
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

舉報

0/150
提交
取消