最近在给自己的项目做响应式布局，我想实现根据窗口width的改变有选择的渲染一些组件（比如屏幕小到一定程度就把列表换成抽屉），自己想到的办法是把width作为一个状态存放在store，监听document的resize和orientation事件，如果clientWidth有变化就dispatch一个改变状态的action，代码如下：
const docEl = document.documentElement;
const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';// 移动端切换横屏或窗口大小改变
const recalc = function(){
const clientWidth = docEl.clientWidth;
if(!clientWidth)return;
dispatch(changeClient(clientWidth))
}
if(!document.addEventListener)return;
window.addEventListener(resizeEvt,recalc,false);
document.addEventListener('DOMContentLoaded',recalc,false);
这样确实能够实现当屏幕尺寸变化时实时渲染页面，但是总感觉这不是响应式一般的解决方法，频繁的dispatch感觉会性能不佳？不知道有没有更好的解决方案，能随屏幕尺寸大小变化而重新渲染组件？