分析ReactHooks响应式布局

本篇内容主要讲解“分析React Hooks响应式布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“分析React Hooks响应式布局”吧!

创新互联建站主营安仁网站建设的网络公司,主营网站建设方案,app软件定制开发,安仁h5微信平台小程序开发搭建,安仁网站营销推广欢迎安仁等地区企业咨询

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

分析React Hooks响应式布局

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

响应式布局影响的是多个组件,如果在多处使用useViewport,这将浪费性能。

分析React Hooks响应式布局

这时就需要另一个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 ?  : ;  }

分析React Hooks响应式布局

到此,相信大家对“分析React Hooks响应式布局”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


文章标题:分析ReactHooks响应式布局
网址分享:http://scyanting.com/article/pgoohs.html