四个非常有用的 React 技巧

2023-02-28

amp div list

1.不要忘记在组件卸载时移除监听器我们经常需要在React的useEffect中监听键盘事件、鼠标事件等，但是我们经常忘记删除它们。复制constwindowScroll=()=>{console.log('scroll')}useEffect(()=>{window.addEventL

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

QQhn0W">我们经常需要在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} /> : null1.
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.