dva-example-user-dashboard icon indicating copy to clipboard operation
dva-example-user-dashboard copied to clipboard

user页面会重复渲染

Open zhangxiaoj opened this issue 7 years ago • 4 comments

zhangxiaoj avatar May 26 '17 02:05 zhangxiaoj

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

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

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

fkpwolf avatar Oct 17 '17 10:10 fkpwolf

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

fkpwolf avatar Oct 17 '17 11:10 fkpwolf

不能只渲染一次么?

allinshang avatar Nov 08 '17 03:11 allinshang

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

fkpwolf avatar Nov 09 '17 02:11 fkpwolf