建站
咨詢
售后
建站咨詢
新聞中心
1.不要忘記在組件卸載時(shí)移除監(jiān)聽器
我們經(jīng)常需要在React的useEffect中監(jiān)聽鍵盤事件、鼠標(biāo)事件等，但是我們經(jīng)常忘記刪除它們。
創(chuàng)新互聯(lián)主營新密網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),新密h5小程序定制開發(fā)搭建,新密網(wǎng)站營銷推廣歡迎新密等地區(qū)企業(yè)咨詢
const windowScroll = () => {
console.log('scroll')
}
useEffect(() => {
window.addEventListener("scroll", windowScroll, false)
}, [])是的，當(dāng)我們回到這個(gè)組件的時(shí)候，scroll事件又會(huì)被監(jiān)聽。
換句話說，我們可能會(huì)將數(shù)千個(gè) windowScroll 函數(shù)綁定到 window， 這將導(dǎo)致內(nèi)存泄漏和偵聽器的意外行為。
請不要忘記在組件卸載時(shí)移除監(jiān)聽器。
const windowScroll = () => {
console.log('scroll')
}
useEffect(() => {
window.addEventListener("scroll", windowScroll, false)
return () => {
window.removeEventListener('scroll', windowScroll, false)
}
}, [])
2.請謹(jǐn)慎使用0，它是魔鬼
你可能寫過類似下面的代碼，它顯示了什么？還是什么都沒有顯示？
const App = () => {
const [ list, setList ] = useState([])
return (
list.length && (
{list.map((name) => {
return {name}
})}
)
)
}我不認(rèn)為這段代碼有什么問題！但是確實(shí)顯示了0。難道是React的BUG？
const i = 0
const b = 'fatfish'
console.log(i && b)
我錯(cuò)了，這不是 React 中的錯(cuò)誤，它完全符合 JavaScript 語法。
為了避免錯(cuò)誤顯示0，我們需要使用以下三種方法來解決這個(gè)問題。
// 1. Controlled by specific logic
list.length >= 1 &&
// 2. Convert list.length to boolean
!!list.length &&
// 3. Use ternary expressions and null
list.length ?: null
3. 如何輕松將 true 傳遞給子元素
我們經(jīng)常需要在調(diào)用一個(gè)組件的時(shí)候給它傳遞一個(gè)布爾值，比如顯式傳遞true。
const Child = ({ showNav }) => {
return !!showNav &&
}
const Parent = () => {
return
}實(shí)際上，您只需要傳遞 showNav 屬性即可， 它們都具有完全相同的效果。
const Child = ({ showNav }) => {
return !!showNav &&
}
const Parent = () => {
return
}
4. 請不要再使用 props.children
請問這段代碼的結(jié)果是什么？它是空的嗎？
const Container = ({ children }) => {
if (children) {
return (
Children is:
{ children }
)
} else {
return (
empty
)
}
}
const App = () => {
const [ list, setList ] = useState([])
return (
{
list.map((name) => {
return { name }
})
}
)
}不幸的是，答案是：“Children is:”。我的天啊！這是為什么？
其實(shí)，此時(shí)children是一個(gè)空數(shù)組，所以肯定會(huì)顯示“Children is:”。我們?nèi)绾谓鉀Q這個(gè)問題？React.Children.toArray 會(huì)拯救我們。
const Container = ({ children }) => {
if (React.Children.toArray(children).length) {
return (
children is:
{ children }
)
} else {
return (
empty
)
}
}
寫在最后
以上就是今天我跟大家分享的4個(gè)非常實(shí)用的React技巧，希望能夠幫助到你，編程快樂！
分享名稱：四個(gè)非常有用的React技巧
分享路徑：http://m.fisionsoft.com.cn/article/dhjsjpg.html
