关于商城购物车页面的一些思考,页面如下:
结算的时候,选中状态时本地修改,不会远程同步,一般在第一次获取数据后,处理数据,统一设置为未选中,每次选中或者不选中,直接更改本地数据后调用setState。
而数量比较有意思,数量修改后需要长久存储,修改某件产品的数量的时候,既要改变本地数据,也要改变远程数据,这个怎么做呢?
先说第一种思路,修改某条商品的数量,发送修改请求,后端处理完成后返回,修改完成,重新请求所有数据,然后重新渲染。
这个思路应用简单类表时可用,但是在购物车案例中,有本地状态时这样做就不行了,例如勾选了几个商品,然后修改了某个商品的数量,此时如果重新渲染,那么勾选的状态就会消失,那么如何办呢?
我能想到的做法是修改某个商品数量时,发送请求,若果请求成功,那么直接修改本地数据,不用去重新请求远程数据,这样选中未选中的状态也不会丢失。
整体的拔高视角思考一下,我们将所有的状态数据首先进行了重组,有的属性可以在本地直接修改,也就说可以直接调用setState进行修改,但是有些状态属性不能这样做,需要前后端同步,这就需要做一下验证,比方说数量的修改,先与后端同步,同步完成后,本地在调用setState进行更新,这样提高了页面渲染效率,很好的维护了页面的状态。
以上是购物车状态问题用react、vue等web前端框架开发时需要思考的问题,希望对你有所帮助。