四个非常有用的React技巧

1.不要忘记在组件卸载时移除监听器

我们经常需要在React的useEffect中监听键盘事件、鼠标事件等，但是我们经常忘记删除它们。

创新互联主营新密网站建设的网络公司,主营网站建设方案,成都app开发,新密h5小程序定制开发搭建,新密网站营销推广欢迎新密等地区企业咨询

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 && (
      
        {list.map((name) => {
          return {name}

        })}
      

    )
  )
}

我不认为这段代码有什么问题！但是确实显示了0。难道是React的BUG？

const i = 0
const b = 'fatfish'


console.log(i && b)

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

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

// 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 传递给子元素

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

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


const Parent = () => {
  return 
}

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

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


const Parent = () => {
  return 
}

4. 请不要再使用 props.children

请问这段代码的结果是什么？它是空的吗？

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:”。我的天啊！这是为什么？

其实，此时children是一个空数组，所以肯定会显示“Children is:”。我们如何解决这个问题？React.Children.toArray 会拯救我们。

const Container = ({ children }) => {
  if (React.Children.toArray(children).length) {  
    return (
      
        children is:

        { children }
      

    ) 
  } else {
    return (
      empty

    )
  }
}

写在最后

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

当前文章：四个非常有用的React技巧
标题URL：http://www.shufengxianlan.com/qtweb/news4/208704.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容