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

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

React全家桶實(shí)戰(zhàn)構(gòu)建webapp

標(biāo)簽:
JavaScript WebApp React.JS
背景

前一阵子,我刚写了篇React全家桶实战,介绍了下我用react全家桶构建一个react webapp的中遇到的一些问题。后来,我发现了mobx。然后静下心去看一看它的文档。发现很有趣,所以我把这个项目用mobx重构了一次。旧的版本是用react全家桶,就是react+redux构建的, 在github的old-verson的分支上。大家有兴趣也可以看看。

源码地址

传送门,如果可以,希望大家star一下,给我点鼓励。感谢~

开发体会
  • 首先redux很强大,单项数据流的思想,可以让我们很好地去将数据和UI解耦。我们要修改UI,只能通过发起一个action给reducer,然后reducer经过一系列操作,得出一些新的state,然后这个state便会让UI更新。但是有个比较蛋疼的地方就是,我们要写得太多了,我们最起码要写一个actionType, 一个actionCreator, 一个reducer,当然还得创建一个store。如果有异步操作,那还得写更多一点,这会让我开发起来的时候比较枯燥。不知道你们有没有,反正,我是有时候想到要写那么多东西,我就有点动力不足了。
  • 其次就是性能优化的问题。就react中每个组件都有一个shouldComponentUpdate的函数,不过它默认总是返回true的。就是无论如何,只要state和props发生了变化,就要发生一次render。但是有时候是不需要更新的。虽然可以引入immutable-js来创建js不可变的数据,加上在shouldComponentUpdate搞点判断。但是,额,好吧,我觉得引入也挺麻烦的,感觉有点难以在现有的项目里插入(大神别喷我~)。
  • 最后呢,mobx可以比较好解决我上面的两个问题。mobx的写法不难,看一个下午,就可以开始动手写代码了。而且对在原来代码上修改可以比较迅速。因为UI和数据已经解耦了。你只要在store与UI和store的连接部分修改即可。还有就是mobx让你不再使用setState,那你也可以规避setState的异步更新的问题。mobx会检测被观察的数据,只要数据发生改变,它就会去重新渲染UI。当然还有很多很好的地方,每个人理解不一样罢了。这里就不深究mobx。毕竟我也只是处于一个能用的阶段。
最后

最后这里展示下demo

demo

当然还有, 欢迎大家star和fork, 传送门

點(diǎn)擊查看更多內(nèi)容
4人點(diǎn)贊

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

評論

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

正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊有機(jī)會得

100積分直接送

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

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

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

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

幫助反饋 APP下載

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

公眾號

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

舉報

0/150
提交
取消