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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

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

標(biāo)簽:
JavaScript WebApp React.JS
用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
點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

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

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

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

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

立即參與 放棄機(jī)會(huì)
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

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

舉報(bào)

0/150
提交
取消