四个非常有用的 React 技巧

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

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

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

const windowScroll = () => {
  console.log('scroll')
}


useEffect(() => {
  window.addEventListener("scroll", windowScroll, false)
}, [])
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

是的,当我们回到这个组件的时候,scroll事件又会被监听。

换句话说,我们可能会将数千个 windowScroll 函数绑定到 window, 这将导致内存泄漏和侦听器的意外行为。

请不要忘记在组件卸载时移除监听器。

const windowScroll = () => {
  console.log('scroll')
}


useEffect(() => {
  window.addEventListener("scroll", windowScroll, false)
  return () => {
    window.removeEventListener('scroll', windowScroll, false)
  }
}, [])
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

2.请谨慎使用0,它是魔鬼

你可能写过类似下面的代码,它显示了什么?还是什么都没有显示?

const App = () => {
  const [ list, setList ] = useState([])


  return (
    list.length && (
      <div className="list">
        {list.map((name) => {
          return <div className="item">{name}</div>
        })}
      </div>
    )
  )
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

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

const i = 0
const b = 'fatfish'


console.log(i && b)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

我错了,这不是 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
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

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

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

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


const Parent = () => {
  return <Child showNav = { true } />
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

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

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


const Parent = () => {
  return <Child showNav/>
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

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>
  )
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

不幸的是,答案是:“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>
    )
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

写在最后

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

责任编辑:华轩 来源: web前端开发
相关推荐

2020-10-29 10:00:55

Python函数文件

2009-02-09 11:20:06

Windows7Windows

2020-06-15 10:29:10

JavaScript开发 技巧

2025-02-13 08:06:54

2009-03-24 14:23:59

PHP类库PHP开发PHP

2023-10-26 07:47:35

JavaScript代码变量

2011-07-07 17:16:43

PHP

2017-08-02 13:32:18

编程Java程序片段

2023-06-13 15:15:02

JavaScript前端编程语言

2018-08-03 10:02:05

Linux命令

2022-09-02 23:08:04

JavaScript技巧开发

2023-09-06 16:55:33

JavaScript闭包

2013-11-05 10:03:22

Eclipse功能

2013-06-14 14:57:09

Java基础代码

2021-03-09 09:14:27

ES2019JavaScript开发

2022-06-27 19:01:04

Python应用程序数据

2013-08-12 15:00:24

LinuxLinux命令

2013-08-21 10:31:22

HTML5工具

2013-08-13 10:46:51

LinuxLinux命令

2021-10-21 22:03:00

PythonNumpy函数
点赞
收藏

51CTO技术栈公众号