前端精神小伙：React Hooks响应式布局
前言
现在稍微大型的前端站点都会采用H5/PC端 并行，通过nignx获取浏览器的精神局UA信息来切换站点。
但这对于一些企业站点或人手不足的小伙响小型项目来说，就很难实现。式布
通过CSS媒体查询实现响应式布局，前端是精神局主流方式。
但是小伙响，有时在 React 程序中，式布需要根据屏幕大小有条件地渲染不同的前端组件（写媒体查询太麻烦了，还不如另写组件），精神局其实使用React Hooks，小伙响可以更灵活实现。式布
本文的前端实现来自：
Developing responsive layouts with React Hooks1. 方案一：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 () => window.removeEventListener("resize", handleWindowResize); }, []); return { width }; }
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 />; }
但是这里还有另一个性能问题：
响应式布局影响的是多个组件，如果在多处使用useViewport，源码下载这将浪费性能。
这时就需要另一个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 />; }
后记
github上面的响应式布局hooks，都是大同小异的实现方式。
本文除了介绍React Hooks的响应式布局实现，还介绍了如何自定义hooks与使用Context上下文，来复用，以达到性能最佳优化。
云服务器提供商