使用React hooks完成响应式组件开发

好久没更新博客了，接触React已经有一段时间了，近期在做公司官网的开发。

技术要求使用React ，响应式布局。

开始准备使用css @media 来负责页面的响应布局。
当开发到一定程度时发现媒体查询并不能满足所有的情况。
当一个组件切换不同大小设备时只是改变宽度、边距或者排版时，媒体查询当然更好。
但是当一个组件在pc上的展示模式和在移动端展示的模式完全不同时，与其使用大量的媒体查询进行display:none;不如直接切换不同的组件来的优雅。

于是就想怎么在React中优雅的获取屏幕宽度，保证在动态改变屏幕尺寸的时候切换组件。

废话不多说直接贴代码
1.首先新建一个文件viewportContext.jsx

import React from 'react';
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>
  );
};
export default ViewportProvider;
export const useViewport = () => {
  const { width, height } = React.useContext(viewportContext);
  return { width, height };
}

2.然后找到你的根组件将ViewportContext包在外层

import ViewportContext from '../util/viewportContext';

const App = () => {
  return (
    <ViewportProvider>
      <AppComponent />
    </ViewportProvider>
  );
}

3.在需要响应切换组件的地方引入

import { useViewport } from '../../util/viewportContext';

const AppComponent = () => {
	const { width } = useViewport();
	const breakpoint = 760;
	return width < breakpoint ? <MobileComponent /> : <DesktopComponent />;
}

4.ok，到这里你的组件就可以根据设备宽度进行切换了。
实现主要是用到hooks + Context,能够最大的减少性能消耗，保证最大程度的复用性。

本文实现思路

Developing responsive layouts with React Hooks