Как Front-End инженер, 4 React ловушки и советы, о которых вы должны знать

4 очень полезных совета по React.

1. Не забудьте удалить слушателя, когда компонент размонтируется.

Нам часто нужно слушать события клавиатуры, мыши и т.д. в useEffect React. Но мы часто забываем удалить их.

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

useEffect(() => {
  window.addEventListener("scroll", windowScroll, false)
}, [])

Да, когда мы вернемся к этому компоненту, событие прокрутки будет прослушиваться снова.

Другими словами, мы можем привязать к окну тысячи функций windowScroll. Это приведет к утечке памяти и неожиданному поведению слушателей.

Пожалуйста, не забудьте удалить слушателя при размонтировании компонента.

const windowScroll = () => {
  console.info('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?

const i = 0
const b = 'fatfish'

console.info(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>
    )
  }
}

Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter , LinkedIn , YouTube , и Discord .

Заинтересованы в масштабировании вашего программного стартапа? Посмотрите Circuit.