в чем разница между компонентами и кастомными хуками?

09.05.2021Рубрика: ВопросыАвтор: admin

вот мой код

function Label({title}){
  return <h1>{title}</h1>
}
function  useLabel({title}){
  return <h1> {title}</h1>
}
function Diff(){
  return <div>
    <Label title='this is component'/>
    {useLabel({title:'this is custom hook'})}
    </div>
}

в коде я определил компонент Label и пользовательский хук useLabel. они выполняют одну и ту же работу, за исключением того, что вызываются с использованием другого синтаксиса.

мои вопросы:

помимо синтаксиса вызова, в чем разница между пользовательскими хуками и компонентами?
могу ли я всегда использовать кастомные хуки вместо компонентов?

Post Views: 100

См. также: Мое приложение не запустится, если я не объявлю main как wmain. Это почему? (Visual Studio 19)

2 react-hooks reactjs

Комментарии: 2

yigal 09.05.2021 в 00:00
пользовательский хук useLabel

Вы дали ему условное название для хуков, но я рекомендую вам не называть его кастомным хуком, так как это может вызвать путаницу. Пользовательский перехватчик обычно относится к функции, которая вызывает один или несколько встроенных перехватчиков, предоставляемых response, например useState или useEffect. Поскольку он делает это, он требует соблюдения правил хуков.

Например, следующее — это настраиваемый хук, который получает и возвращает ширину окна:
```
const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => { 
      window.removeEventListener('resize', handleResize);
    }
  }, [])
  return width;
}
```
То, что вы написали, является вспомогательной функцией, но она не обязана подчиняться правилам хуков, поскольку никогда не вызывает хуки. Вспомогательная функция, возвращающая элемент реакции, иногда может быть полезна, если вам приходится делать одно и то же несколько раз, но в основном это не отличается от простого написания более длинного компонента Diff. Насколько известно React, это то же самое, что писать <h1> в теле Diff.

Итак, ваш вопрос сводится к следующему: когда мне использовать один компонент или несколько компонентов.

Иногда такое решение принимается по соображениям производительности. Если это все один компонент, то все это нужно перерендерить как группу. Но если он разделен на отдельные компоненты, то потенциально необходимо повторно отрендерить только часть из них.

В других случаях решение больше о том, как сделать код понятным для нас, маленьких людей. Разделение компонентов по разумным границам может позволить вам мысленно сгруппировать связанный код вместе, а затем игнорировать его, когда вам не нужно знать детали.

Ваш ответ правильный и высоко оценен. Но может возникнуть вопрос: а что, если тот же код будет написан в таком компоненте, как custom hook? Ответ на этот вопрос может быть полезным. Например, React выдаст ошибку, поскольку это даже не пользовательский хук, так как пользовательский хук всегда начинается с use. — person yigal; 09.05.2021
Ответить
yigal 09.05.2021 в 00:00
Пользовательские хуки в первую очередь предназначены для абстракции логики с отслеживанием состояния и манипулирования состоянием, так что вы можете написать ловушку один раз и использовать ее в нескольких местах или не беспокоясь о деталях реализации.

Хотя пользовательский хук технически может возвращать что угодно, довольно странно, что он возвращает элемент JSX, потому что компонент может делать то же самое менее запутанно. Если вы хотите вернуть что-то другое, кроме JSX-элемента, при работе в рамках React, например:
```
const isOnline = useFriendStatus(props.friend.id);
```
могу ли я всегда использовать кастомные хуки вместо компонентов?

Технически это было бы возможно, но было бы очень запутанно. Лучше всегда использовать компоненты при возврате JSX.
Ответить

Добавить комментарий