現在稍微大型的站點都會採用h5/pc端 並行，通過nignx獲取瀏覽器的ua資訊來切換站點。
但這對於一些企業站點或人手不足的小型專案來說，就很難實現。
通過css**查詢實現響應式布局，是主流方式。
但是，有時在 react 程式中，需要根據螢幕大小有條件地渲染不同的元件（寫**查詢太麻煩了，還不如另寫元件），其實使用react hooks，可以更靈活實現。
乙個很簡單粗略的方案，是個前端都知道：
const mycomponent = () =>但是，當調整視窗大小時，未解決寬度值的更新問題，可能會渲染錯誤的元件。
resize事件時，觸發useeffect改變資料。
const mycomponent = () => , );
return width < breakpoint ? : ;
}
hooks的你，一定知道這裡存在記憶體效能消耗問題：resize事件沒移除！
優化版本：
react hooks,可以將元件/函式最大程度的復用。構建乙個也很簡單：
const useviewport = () => , );
return ;
}
const mycomponent = () => = useviewport();
const breakpoint = 620;
return width < breakpoint ? : ;
}
useviewport，這將浪費效能。react親兒子：react context(上下文)來幫忙。
我們將建立乙個新的檔案viewportcontext，在其中可以儲存當前視口大小的狀態以及計算邏輯。
const viewportcontext = react.createcontext({});
const viewportprovider = () =>
react.useeffect(() => , );
return (
);};const useviewport = () => = react.usecontext(viewportcontext);
return ;
}
);} 在往後的每次useviewport()，其實都只是共享hooks。
github上面的響應式布局hooks，都是大同小異的實現方式。
本文除了介紹react hooks的響應式布局實現，還介紹了如何自定義hooks與使用context上下文，來復用，以達到效能最佳優化。
使用React hooks完成響應式元件開發
好久沒更新部落格了，接觸react已經有一段時間了，近期在做公司官網的開發。技術要求使用react 響應式布局。開始準備使用css media 來負責頁面的響應布局。當開發到一定程度時發現 查詢並不能滿足所有的情況。當乙個元件切換不同大小裝置時只是改變寬度 邊距或者排版時，查詢當然更好。但是當乙個元...
前端響應式原理
響應式布局指的是同一頁面在不同螢幕尺寸下有不同的布局 響應式設計與自適應設計的區別 響應式開發一套介面，通過檢測視口解析度，針對不同客戶端在客戶端做 處理，來展現不同的布局和內容 自適應需要開發多套介面，通過檢測視口解析度，來判斷當前訪問的裝置是pc端 平板 手機，從而請求服務層，返回不同的頁面 方...
前端響應式布局
這段時間一直在學習前端的東西記錄一下自己所欠缺的東西！響應式布局 由於以前基本上沒有接觸前端的東西，熟悉又陌生，熟悉是因為經常聽見同事在說，陌生是因為自己沒有實踐過 查詢 查詢 剛開始我看名字以為是查詢之類的 說明 通過不同的 型別和條件定義樣式表規則。ok 我已經了基本上了解響應式布局是幹嘛的了 ...