ReactHooks实现响应式布局
前⾔
现在稍微⼤型的站点都会采⽤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 />;
}
这个简单的解决⽅案肯定会起作⽤。根据⽤户设备的窗⼝宽度，我们可以呈现桌⾯视图或⼿机视图。
但是，当调整窗⼝⼤⼩时，未解决宽度值的更新问题，可能会渲染错误的组件。
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 () => veEventListener("resize", handleWindowResize);
}, []);
return { width };
}
3. ⽅案三：构建useViewport
⾃定义React Hooks，可以将组件/函数最⼤程度的复⽤。构建⼀个也很简单：
const useViewport = () => {
const [width, setWidth] = React.useState(window.innerWidth);reacthooks理解
React.useEffect(() => {
const handleWindowResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleWindowResize);
return () => veEventListener("resize", handleWindowResize);
}, []);
return { width };
}
精简后的组件代码：
const MyComponent = () => {
const { width } = useViewport();
const breakpoint = 620;
return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}
但是这⾥还有另⼀个性能问题：
响应式布局影响的是多个组件，如果在多处使⽤useViewport，这将浪费性能。
这时就需要另⼀个React亲⼉⼦：React Context(上下⽂)来帮忙。
4.终极⽅案：Hooks+Context
我们将创建⼀个新的⽂件viewportContext，在其中可以存储当前视⼝⼤⼩的状态以及计算逻辑。const viewportContext = ateContext({});
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 () => veEventListener("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 />;
}
后记
github上⾯的响应式布局hooks，都是⼤同⼩异的实现⽅式。
本⽂除了介绍React Hooks的响应式布局实现，还介绍了如何⾃定义hooks与使⽤Context上下⽂，来复⽤，以达到性能最佳优化。