前端精神小伙：React Hooks响应式布局

前言

专注于为中小企业提供做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业江北免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

现在稍微大型的站点都会采用H5/PC端并行，通过nignx获取浏览器的UA信息来切换站点。

但这对于一些企业站点或人手不足的小型项目来说，就很难实现。

通过CSS媒体查询实现响应式布局，是主流方式。

但是，有时在 React 程序中，需要根据屏幕大小有条件地渲染不同的组件（写媒体查询太麻烦了，还不如另写组件），其实使用React Hooks，可以更灵活实现。

本文的实现来自：

 
 
 
   
  
  
  Developing responsive layouts with React Hooks

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", () => setWidth(window.innerWidth));    
  
  
    }, []);    
  
  
    return width < breakpoint ?  : ;    
  
  
  }

但精通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 ?  : ;    
  
  
  }

但是这里还有另一个性能问题：

响应式布局影响的是多个组件，如果在多处使用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 (    
  
  
          
  
  
        {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上下文，来复用，以达到性能最佳优化。

网站名称：前端精神小伙：React Hooks响应式布局
文章URL：http://www.shufengxianlan.com/qtweb/news26/236426.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容