使用React hooks完成響應式元件開發

好久沒更新部落格了，接觸react已經有一段時間了，近期在做公司官網的開發。

技術要求使用react ，響應式布局。

開始準備使用css @media 來負責頁面的響應布局。

當開發到一定程度時發現**查詢並不能滿足所有的情況。

當乙個元件切換不同大小裝置時只是改變寬度、邊距或者排版時，**查詢當然更好。

但是當乙個元件在pc上的展示模式和在移動端展示的模式完全不同時，與其使用大量的**查詢進行display:none;不如直接切換不同的元件來的優雅。

於是就想怎麼在react中優雅的獲取螢幕寬度，保證在動態改變螢幕尺寸的時候切換元件。

廢話不多說直接貼**

1.首先新建乙個檔案viewportcontext.jsx

import react from

'react'
;const viewportcontext = react.
createcontext()
;const
viewportprovider=(
)=>
react.
useeffect((
)=>,[
]);return
(}>
<
/viewportcontext.provider>);
};export
default viewportprovider;
export
const
useviewport=(
)=>
= react.
usecontext
(viewportcontext)
;return
;}

import viewportcontext from

'../util/viewportcontext'
;const=(
)=>

import

from
'../../util/viewportcontext'
;const=(
)=>
=useviewport()
;const breakpoint =
760;
return width < breakpoint ?
>
:>
;}

實現主要是用到hooks + context,能夠最大的減少效能消耗，保證最大程度的復用性。

本文實現思路

developing responsive layouts with react hooks

使用React Hooks請求資料並渲染

在日常的開發中，從伺服器端非同步獲取資料並渲染是相當高頻的操作。在以往使用react class元件的時候，這種操作我們已經很熟悉了，即在class元件的componentdidmount中通過ajax來獲取資料並setstate，觸發元件更新。隨著hook的到來，我們可以在一些場景中使用hook的...

Delphi 完成埠使用

delphi 完成埠相關函式。變數fcompletionport thandle 完成埠的相關資訊 const gowork ffffeeee 開始工作 workbeat ffffeedd 執行緒心跳 gosend ffffeecc 傳送資料 poolpause ffffcccc 暫停 shutdo...

小心使用IOCP完成埠

s createsocket 假定s返回值是10 createiocompletionport s,m hcompletionport,dword ptr a,0 wsasend s,wsasend s,wsasend s,wsasend s,wsasend s,這個時候，完成埠裡累計了多條跟s相關...