四个非常有用的 React 技巧

开发 前端
我们经常需要在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 = 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技巧,希望能够帮助到你,编程快乐!

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

2020-10-29 10:00:55

Python函数文件

2009-02-09 11:20:06

Windows7Windows

2020-06-15 10:29:10

JavaScript开发 技巧

2011-07-07 17:16:43

PHP

2017-08-02 13:32:18

编程Java程序片段

2009-03-24 14:23:59

PHP类库PHP开发PHP

2023-10-26 07:47:35

JavaScript代码变量

2022-09-02 23:08:04

JavaScript技巧开发

2023-06-13 15:15:02

JavaScript前端编程语言

2018-08-03 10:02:05

Linux命令

2023-09-06 16:55:33

JavaScript闭包

2013-11-05 10:03:22

Eclipse功能

2013-08-21 10:31:22

HTML5工具

2013-06-14 14:57:09

Java基础代码

2013-08-12 15:00:24

LinuxLinux命令

2021-03-09 09:14:27

ES2019JavaScript开发

2022-06-27 19:01:04

Python应用程序数据

2013-08-13 10:46:51

LinuxLinux命令

2012-04-17 09:44:08

JavaScript

2012-03-01 09:15:41

HTML 5
点赞
收藏

51CTO技术栈公众号