dvajs / dva-example-user-dashboard

👲 👬 👨‍👩‍👧 👨‍👩‍👦‍👦
446 stars 205 forks source link

user页面会重复渲染 #25

Open zhangxiaoj opened 7 years ago

fkpwolf commented 6 years ago

仔细看了下,User 列表页面会渲染三次:

  1. model 初始化的时候加载一次,合理。
  2. effects 中的 const { data, headers } = yield call(usersService.fetch, { page }); 这一句会触发渲染。似乎没有必要,因为数据虽然取了回来,但是还没有塞到 model 中。
  3. reduce 中的 save 修改 model 后会触发一次,合理。

effect 应该是只能读取 state 而不能修改 state,要修改数据,只能在 reduce 中修改。这样 effect 里面的代码应该不会导致页面刷新啊?

fkpwolf commented 6 years ago

找到原因了,第二次是由于Step 8. 通过 dva-loading 处理 loading 状态导致的,loading 状态是另外一个 model了,而fetch会修改这个状态。 由于 React 的机制,在数据没有变化的情况下组件是不会重新加载的,这样只是一个 loading 的变化对整个页面的性能影响关系不大。

allinshang commented 6 years ago

不能只渲染一次么?

fkpwolf commented 6 years ago

@allinshang 这里的做法是先显示空白数据页面,然后取到数据后再次渲染,这样用户体验会好点。当然你也可以先准备好数据,然后再跳转到这个页面。