专栏首页全栈者前端精神小伙:React Hooks 响应式布局

前端精神小伙: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 ? <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上下文,来复用,以达到性能最佳优化。

本文分享自微信公众号 - 全栈者(fullStackEngineer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • nodejs框架Koa做中间层使用总结(含示例)

    一个以nodejs为基础的一个后台框架。直白一点来说,就是一个javascript语言需要编写的库,它的定位是作为服务端应用提供服务,本身对外暴露了一些api,...

    用户1462769
  • 初识加密算法

    很简单,加密算法的出现正是为了解决万物互联下数据隐私与安全的问题,在畅游于网络之中时候,那便是数据在不停的交换和流动的时候,如果没有加密算法,我们的 各种密码,...

    用户1462769
  • AST 与前端工程化实战

    AST 是一个非常基础但是同时非常重要的知识点,我们熟知的 TypeScript、babel、webpack、vue-cli 都是依赖 AST 进行开发的。本文...

    用户1462769
  • 回乡偶记|从这个四省交界的苏北大城, 看二三线城市区块链现状

    徐州,又名彭城、涿鹿,地处江苏省最北端,与山东、河南、安徽三省交界,楚汉之都,淮海地区及华东重要门户。

    区块链大本营
  • ES6中也要使用好严格的代码规范,助力你写出优雅的代码

    必需开启eslint检测, 且使用 standard规范检测,这样大家写出来的代码风格就可以保持一致

    前端老鸟
  • Airbnb JavaScript 风格指南(一)

    ConardLi
  • JavaScript语言规范

    JavaScript 是一种客户端脚本语言,这里列出了编写 JavaScript 时需要遵守的规则。

    用户1065635
  • 实战:小程序云开发之在云函数中使用Router

    最近在做自己的小程序《看啥好呢》,这个小程序是使用云开发的方式开发的,功能特别简单,就是获取豆瓣、大麦网的数据展示,虽然功能简单,但还是记录下开发过程和一些技术...

    Dunizb
  • Python爬虫入门教程 15-100 石家庄政民互动数据爬取

    今天,咱抓取一个网站,这个网站呢,涉及的内容就是 网友留言和回复,特别简单,但是网站是gov的。网址为

    梦想橡皮擦
  • 聊聊http/2

    随着web的发展,http/1.x 已经很难满足现在的需求,Google 因此开发了 SPDY 作为尝试, http/2 在此基础上应运而生。 此外,Googl...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券