Allen 2023-02-19 12:17:00 3045 0 0 0 0
编程,不要忘记在组件卸载时移除监听器,我们经常需要在React的useEffect中监听键盘事件、鼠标事件等,但是我们经常忘记删除它们。

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 = 0const b = 'fatfish'
console.log(i && b)

我错了,这不是 React 中的错误,它完全符合 JavaScript 语法。

为了避免错误显示0,我们需要使用以下三种方法来解决这个问题。

// 1. Controlled by specific logiclist.length >= 1 && list={list} />// 2. Convert list.length to boolean!!list.length && list={list} />// 3. Use ternary expressions and nulllist.length ? list={list} /> : null

3. 如何轻松将 true 传递给子元素

我们经常需要在调用一个组件的时候给它传递一个布尔值,比如显式传递true。

const Child = ({ showNav }) => {  return !!showNav && 

实际上,您只需要传递 showNav 属性即可, 它们都具有完全相同的效果。

const Child = ({ showNav }) => {  return !!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">emptydiv>    )  }}
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">emptydiv>    )  }}

写在最后

以上就是今天我跟大家分享的4个非常实用的React技巧,希望能够帮助到你,编程快乐!


Tag: 编程
我也要发一个   ·   返回首页   ·   返回[编程]   ·   前一个   ·   下一个
欢迎评论
未登录,
请先 [ 注册 ] or [ 登录 ]
(一分钟即可完成注册!)
返回首页     ·   返回[编程]   ·   返回顶部