日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

前言

專(zhuān)注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)江北免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

現(xiàn)在稍微大型的站點(diǎn)都會(huì)采用H5/PC端 并行，通過(guò)nignx獲取瀏覽器的UA信息來(lái)切換站點(diǎn)。

但這對(duì)于一些企業(yè)站點(diǎn)或人手不足的小型項(xiàng)目來(lái)說(shuō)，就很難實(shí)現(xiàn)。

通過(guò)CSS媒體查詢(xún)實(shí)現(xiàn)響應(yīng)式布局，是主流方式。

但是，有時(shí)在 React 程序中，需要根據(jù)屏幕大小有條件地渲染不同的組件（寫(xiě)媒體查詢(xún)太麻煩了，還不如另寫(xiě)組件），其實(shí)使用React Hooks，可以更靈活實(shí)現(xiàn)。

本文的實(shí)現(xiàn)來(lái)自：

 
 
 
 
  
  
  
  
Developing responsive layouts with React Hooks 
 
 
 

1. 方案一：innerWidth

一個(gè)很簡(jiǎn)單粗略的方案，是個(gè)前端都知道：

 
 
 
 
  
  
  
  
const MyComponent = () => {  
  
  
  
  
  // 當(dāng)前窗口寬度  
  
  
  
  
  const width = window.innerWidth;  
  
  
  
  
  // 鄰介值  
  
  
  
  
  const breakpoint = 620;  
  
  
  
  
  // 寬度小于620時(shí)渲染手機(jī)組件，反之桌面組件  
  
  
  
  
  return width < breakpoint ?  : ;  
  
  
  
  
} 
 
 
 

這個(gè)簡(jiǎn)單的解決方案肯定會(huì)起作用。根據(jù)用戶設(shè)備的窗口寬度，我們可以呈現(xiàn)桌面視圖或手機(jī)視圖。

但是，當(dāng)調(diào)整窗口大小時(shí)，未解決寬度值的更新問(wèn)題，可能會(huì)渲染錯(cuò)誤的組件。

2. 方案二：Hooks+resize

說(shuō)著也簡(jiǎn)單，監(jiān)聽(tīng)resize事件時(shí)，觸發(fā)useEffect改變數(shù)據(jù)。

 
 
 
 
  
  
  
  
const MyComponent = () => { 
  
  
  
  
   const [width, setWidth] = React.useState(window.innerWidth);  
  
  
  
  
  const breakpoint = 620;  
  
  
  
  
  React.useEffect(() => {  
  
  
  
  
    window.addEventListener("resize", () => setWidth(window.innerWidth));  
  
  
  
  
  }, []);  
  
  
  
  
  return width < breakpoint ?  : ;  
  
  
  
  
} 
 
 
 

但精通Hooks的你，一定知道這里存在內(nèi)存性能消耗問(wèn)題：resize事件沒(méi)移除！

優(yōu)化版本：

 
 
 
 
  
  
  
  
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. 方案三：構(gòu)建useViewport

自定義React Hooks,可以將組件/函數(shù)最大程度的復(fù)用。構(gòu)建一個(gè)也很簡(jiǎn)單：

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

精簡(jiǎn)后的組件代碼：

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

但是這里還有另一個(gè)性能問(wèn)題：

響應(yīng)式布局影響的是多個(gè)組件，如果在多處使用useViewport，這將浪費(fèi)性能。

這時(shí)就需要另一個(gè)React親兒子：React Context(上下文) 來(lái)幫忙。

4.終極方案：Hooks+Context

我們將創(chuàng)建一個(gè)新的文件viewportContext，在其中可以存儲(chǔ)當(dāng)前視口大小的狀態(tài)以及計(jì)算邏輯。

 
 
 
 
  
  
  
  
const viewportContext = React.createContext({});  
  
  
  
  
const ViewportProvider = ({ children }) => {  
  
  
  
  
  // 順帶監(jiān)聽(tīng)下高度，備用  
  
  
  
  
  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根節(jié)點(diǎn)，確保已經(jīng)包裹住了App：

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

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

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

后記

github上面的響應(yīng)式布局hooks，都是大同小異的實(shí)現(xiàn)方式。

本文除了介紹React Hooks的響應(yīng)式布局實(shí)現(xiàn)，還介紹了如何自定義hooks與使用Context上下文，來(lái)復(fù)用，以達(dá)到性能最佳優(yōu)化。

網(wǎng)站標(biāo)題：前端精神小伙：React Hooks響應(yīng)式布局
地址分享：http://www.5511xx.com/article/dpieceg.html