Analyze React Hooks responsive layout

This article focuses on "analyzing React Hooks responsive layout". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "analyzing React Hooks responsive layout".

1. Option 1: innerWidth

A very simple and rough solution that is known to all at the front end:

Const MyComponent = () = > {/ / the current window width const width = window.innerWidth; / / neighbor const breakpoint = 620; / / render the mobile phone component when the width is less than 620, and vice versa the desktop component 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. Plan 3: build useViewport

Custom React Hooks can reuse components / functions as much as possible. Building one is also easy:

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

The simplified component code:

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 }) =>

{/ / standby 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};}

Next, you need to be at the root node of the React to make sure that the App is wrapped:

Const App = () = > {return ();}

In the future, every time useViewport (), it is just sharing Hooks.

Const MyComponent = () = > {const {width} = useViewport (); const breakpoint = 620; return width < breakpoint?:;}

Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!