1.不要忘记在组件卸载时移除监听器
我们经常需要在React的useEffect中监听键盘事件、鼠标事件等,但是我们经常忘记删除它们。
const windowScroll = () => {
console.log('scroll')
}
useEffect(() => {
window.addEventListener("scroll", windowScroll, false)
}, [])
是的,当我们回到这个组件的时候,scroll事件又会被监听。
换句话说,我们可能会将数千个 windowScroll 函数绑定到 window, 这将导致内存泄漏和侦听器的意外行为。
请不要忘记在组件卸载时移除监听器。
const windowScroll = () => {
console.log('scroll')
}
useEffect(() => {
window.addEventListener("scroll", windowScroll, false)
return () => {
window.removeEventListener('scroll', windowScroll, false)
}
}, [])
2.请谨慎使用0,它是魔鬼
你可能写过类似下面的代码,它显示了什么?还是什么都没有显示?
const App = () => {
const [ list, setList ] = useState([])
return (
list.length && (
<div className="list">
{list.map((name) => {
return <div className="item">{name}</div>
})}
</div>
)
)
}
我不认为这段代码有什么问题!但是确实显示了0。难道是React的BUG?
const i = 0
const b = 'fatfish'
console.log(i && b)
我错了,这不是 React 中的错误,它完全符合 JavaScript 语法。
为了避免错误显示0,我们需要使用以下三种方法来解决这个问题。
// 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 传递给子元素
我们经常需要在调用一个组件的时候给它传递一个布尔值,比如显式传递true。
const Child = ({ showNav }) => {
return !!showNav && <Nav />
}
const Parent = () => {
return <Child showNav = { true } />
}
实际上,您只需要传递 showNav 属性即可, 它们都具有完全相同的效果。
const Child = ({ showNav }) => {
return !!showNav && <Nav />
}
const Parent = () => {
return <Child showNav/>
}
4. 请不要再使用 props.children
请问这段代码的结果是什么?它是空的吗?
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:”。我的天啊!这是为什么?
其实,此时children是一个空数组,所以肯定会显示“Children is:”。我们如何解决这个问题?React.Children.toArray 会拯救我们。
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个非常实用的React技巧,希望能够帮助到你,编程快乐!