ReactHooks实现响应式布局

前⾔

现在稍微⼤型的站点都会采⽤H5/PC端 并⾏，通过nignx获取浏览器的UA信息来切换站点。但这对于⼀些企业站点或⼈⼿不⾜的⼩型项⽬来说，就很难实现。通过CSS媒体查询实现响应式布局，是主流⽅式。

但是，有时在React程序中，需要根据屏幕⼤⼩有条件地渲染不同的组件（写媒体查询太⿇烦了，还不如另写组件），其实使⽤ReactHooks，可以更灵活实现。本⽂的实现来⾃：

1. ⽅案⼀：innerWidth

⼀个很简单粗略的⽅案，是个前端都知道：

const MyComponent = () => { // 当前窗⼝宽度

const width = window.innerWidth; // 邻介值

const breakpoint = 620;

// 宽度⼩于620时渲染⼿机组件，反之桌⾯组件

return width < breakpoint ? : ;}

这个简单的解决⽅案肯定会起作⽤。根据⽤户设备的窗⼝宽度，我们可以呈现桌⾯视图或⼿机视图。但是，当调整窗⼝⼤⼩时，未解决宽度值的更新问题，可能会渲染错误的组件。

2. ⽅案⼆：Hooks+resize

说着也简单，监听resize事件时，触发useEffect改变数据。

const MyComponent = () => {

const [width, setWidth] = React.useState(window.innerWidth); const breakpoint = 620;

React.useEffect(() => {

window.addEventListener(\"resize\ }, []);

return width < breakpoint ? : ;}

但精通Hooks的你，⼀定知道这⾥存在内存性能消耗问题：resize事件没移除！优化版本：

const useViewport = () => {

const [width, setWidth] = React.useState(window.innerWidth);

React.useEffect(() => {

const handleWindowResize = () => setWidth(window.innerWidth); window.addEventListener(\"resize\

return () => window.removeEventListener(\"resize\ }, []);

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\

return () => window.removeEventListener(\"resize\ }, []);

return { width };}

精简后的组件代码：

const MyComponent = () => { const { width } = useViewport(); const breakpoint = 620;

return width < breakpoint ? : ;}

但是这⾥还有另⼀个性能问题：

响应式布局影响的是多个组件，如果在多处使⽤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\

return () => window.removeEventListener(\"resize\ }, []);

return (

{children}

);};

const useViewport = () => {

const { width, height } = React.useContext(viewportContext); return { width, height };}

紧接着，你需要在React根节点，确保已经包裹住了App：

const App = () => { return (

);}

在往后的每次useViewport()，其实都只是共享Hooks。

const MyComponent = () => { const { width } = useViewport(); const breakpoint = 620;

return width < breakpoint ? : ;}

后记

github上⾯的响应式布局hooks，都是⼤同⼩异的实现⽅式。

本⽂除了介绍React Hooks的响应式布局实现，还介绍了如何⾃定义hooks与使⽤Context上下⽂，来复⽤，以达到性能最佳优化。