這東西實現起來難點有下面幾個：
一、滾動條的出現
二、可視區域流暢移動
三、閃屏優化
這玩意就不按步驟寫了，主要說一下這幾個難點是怎麼解決的：
columnnumber=
insightnumber=
startheight=
scrolldom=
>
to=`,state:item}
}>
hoverable
key=
cover=
classname=
'list-item'
ref=}}
>
"picture"
>
<
/icon>
<
/div>
}>
description=元`}
/>
<
/card>
<
/link>)}
)}<
/virtualize>
type props = propswithchildren<
>
function
virtualize
(props:props)
)const
[scalerow,setscalerow]
=usestate(2
)useeffect((
)=>
let fullheight = childrenlen/props.columnnumber*props.itemheight
setcostomheight
(fullheight)
let insightheight
if(childrenlenelse
setvisibleheight
(insightheight)
setrenderchildren
(props.children.
slice
(indexnumber.startindex,indexnumber.endindex))}
},[props.children,indexnumber]
)const
scrollfunc
=(e:event)
=>
let endindex = startindex+props.insightnumber+scalerow
overscroll=overscroll-timer*props.itemheight
settimeout((
)=>)}
);}useeffect((
)=>},
)return
(<
>
}>
}>
<
/div>
'virtual-custom-item'
style=
px, 0px)`
}}>
<
/div>
<
/div>
<
/>)}
export
default virtualize
React原始碼剖析 手寫React合成事件機制
之前剖析過vue中的ast的實現和dom diff的實現。這裡來到react,說說react的事件機制 這裡通過原始碼抽離react事件處理核心，手寫react事件處理方法 不和原始碼完全一樣，當基本思路及實現流程相同 上 定義addevent方法為dom物件新增事件 引數1 需要繫結事件的dom節...
手寫react優惠券元件
由於是截圖，大小有些失真看到這個圖，思考一下，就能明白，其實就兩個難點 左邊的鋸齒狀是如何實現 中間的凹陷是如何實現 上述兩個難點解決了，相信有css基礎的都能寫出這個元件。sawtooth sawtooth before,sawtooth after sawtooth before sawtoot...
React專案中手寫圓形checkbox
最近開發中，需要用到勾選框，類似下面這種選中樣式 選中如下 因為是移動端開發專案，所以需要根據螢幕大小進行縮放 使用antd的也可以，只需要覆蓋原有樣式即可，但是當螢幕變大的時候，勾選框的大小是固定的，同時，阿里的勾選框樣式有用到js函式，還是比較麻煩的，所以思來想去還是決定自己手寫 react開發...