前言
现在稍微大型的站点都会采用H5/PC
端 并行,通过nignx
获取浏览器的UA
信息来切换站点。
但这对于一些企业站点或人手不足的小型项目来说,就很难实现。
通过CSS
媒体查询实现响应式布局,是主流方式。
但是,有时在 React 程序中,需要根据屏幕大小有条件地渲染不同的组件(写媒体查询太麻烦了,还不如另写组件),其实使用React Hooks
,可以更灵活实现。
![](https://i-blog.csdnimg.cn/blog_migrate/f7adbe31056e6c22a58ce8fe5887dad5.png)
本文的实现来自:
Developing responsive layouts with React Hooks
1. 方案一:innerWidth
一个很简单粗略的方案,是个前端都知道:
const MyComponent = () => {
// 当前窗口宽度
const width = window.innerWidth;
// 邻介值
const breakpoint = 620;
// 宽度小于620时渲染手机组件,反之桌面组件
return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
这个简单的解决方案肯定会起作用。根据用户设备的窗口宽度,我们可以呈现桌面视图或手机视图。
但是,当调整窗口大小时,未解决宽度值的更新问题,可能会渲染错误的组件。
![](https://i-blog.csdnimg.cn/blog_migrate/65d2aa19fd38c9453a3e1f3dedc16381.jpeg)
2. 方案二:Hooks
+resize
说着也简单,监听resize
事件时,触发useEffect
改变数据。
const MyComponent = () => {
const [width, setWidth] = React.useState(window.innerWidth);
const breakpoint = 620;
React.useEffect(() => {
window.addEventListener("resize", () => setWidth(window.innerWidth));
}, []);
return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
但精通Hooks
的你,一定知道这里存在内存性能消耗问题:resize
事件没移除!
优化版本:
const useViewport = () => {
const [width, setWidth] = React.useState(window.innerWidth);
React.useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);
return { width };
}
![](https://i-blog.csdnimg.cn/blog_migrate/f30754af1ceafcafc122ae7749522b8f.jpeg)
3. 方案三:构建useViewport
自定义React Hooks
,可以将组件/函数最大程度的复用。构建一个也很简单:
const useViewport = () => {
const [width, setWidth] = React.useState(window.innerWidth);
React.useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);
return { width };
}
精简后的组件代码:
const MyComponent = () => {
const { width } = useViewport();
const breakpoint = 620;
return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
![](https://i-blog.csdnimg.cn/blog_migrate/111459333f02c0d8ce1cb8869adf9de9.png)
但是这里还有另一个性能问题:
响应式布局影响的是多个组件,如果在多处使用useViewport
,这将浪费性能。
![](https://i-blog.csdnimg.cn/blog_migrate/c94bf25d5070cf72e9d727e13b974965.png)
这时就需要另一个React
亲儿子:React Context(上下文)
来帮忙。
4.终极方案:Hooks
+Context
我们将创建一个新的文件viewportContext
,在其中可以存储当前视口大小的状态以及计算逻辑。
const viewportContext = React.createContext({});
const ViewportProvider = ({ children }) => {
// 顺带监听下高度,备用
const [width, setWidth] = React.useState(window.innerWidth);
const [height, setHeight] = React.useState(window.innerHeight);
const handleWindowResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}
React.useEffect(() => {
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);
return (
<viewportContext.Provider value={{ width, height }}>
{children}
</viewportContext.Provider>
);
};
const useViewport = () => {
const { width, height } = React.useContext(viewportContext);
return { width, height };
}
紧接着,你需要在React
根节点,确保已经包裹住了App
:
const App = () => {
return (
<ViewportProvider>
<AppComponent />
</ViewportProvider>
);
}
在往后的每次useViewport()
,其实都只是共享Hooks
。
const MyComponent = () => {
const { width } = useViewport();
const breakpoint = 620;
return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
![](https://i-blog.csdnimg.cn/blog_migrate/850224131920c7d5a4f391fe96b9c990.gif)
后记
github
上面的响应式布局hooks
,都是大同小异的实现方式。
本文除了介绍React Hooks
的响应式布局实现,还介绍了如何自定义hooks
与使用Context
上下文,来复用,以达到性能最佳优化。
![](https://i-blog.csdnimg.cn/blog_migrate/01a9f5a5d0698553f7020b40d3ebaeba.jpeg)