React hook
前言
现在稍微大型的站点都会采用H5/PC
端 并行,通过nignx
获取浏览器的UA
信息来切换站点。
但这对于一些企业站点或人手不足的小型项目来说,就很难实现。
通过CSS
媒体查询实现响应式布局,是主流方式。
但是,有时在 React 程序中,需要根据屏幕大小有条件地渲染不同的组件(写媒体查询太麻烦了,还不如另写组件),其实使用React Hooks
,可以更灵活实现。
本文的实现来自:
1. 方案一:innerWidth
一个很简单粗略的方案,是个前端都知道:
const MyComponent = () => {
// 当前窗口宽度
const width = window.innerWidth;
// 邻介值
const breakpoint = 620;
// 宽度小于620时渲染手机组件,反之桌面组件
return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
这个简单的解决方案肯定会起作用。根据用户设备的窗口宽度,我们可以呈现桌面视图或手机视图。
但是,当调整窗口大小时,未解决宽度值的更新问题,可能会渲染错误的组件。