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