Реагирующие крючки - эффект использования, функции вызова только при обновлении определенного свойства

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие крючки

Вопрос:

Это мой эффект использования:

 useEffect(() => {
        handleFetchUsers();
        handleFetchBooks();
}, [month, listUsers, listBooks]);

Я хочу получать книги и пользователей в первый раз (а также когда пользователь меняет месяц), и мне также нужно извлекать книги и пользователя, когда происходят изменения за пределами компонента (при изменении кэша я хочу удалить из кэша).

Проблема здесь в том, что есть 3 свойства, и когда books обновляется, функция useEffect отправляет все выборки, я не хочу получать пользователей, если пользователь не был обновлен.

Есть ли способ извлекать книги только при обновлении книг и извлекать использование только при обновлении пользователей?

Прямо сейчас у меня все выборки дублируются.

Я помню, что в componentWillUpdated я решаю эту проблему, сравнивая nextProps и currentProps:

 if(nextProps.users !=== props.users){
  fetchUsers();
}

Я хочу такую производительность.

Ответ №1:

Вы можете (и должны!) используйте useEffect более одного раза в функциональном компоненте. Разделите свои опасения таким образом, и вы должны увидеть поведение, которое вы ищете.

 useEffect(() => {
    handleFetchBooks()
},[month])

useEffect(() => {
    handleFetchUsers()
},[YOUR_USER_DEPENDENCIES])

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

1. БОЖЕ! Извините, потому что я знал useEffect как «componentWillMount» для компонента функций, я не думал, что смогу использовать useEffect более одного раза. Спасибо!!! В этом есть большой смысл, извините, если вопрос был слишком простым.

2. @LeonardoCavani Это один из приемов хуков, к которому нужно точно привыкнуть, как только вы освоитесь с ним, он становится очень мощным. useEffect заменяет как componentWillMount, так и componentWillUpdate , он работает не совсем так, но может выполнять роль обоих, если вы знаете, что делаете.

Ответ №2:

useEffect было сделано с учетом этого, в идеале должна быть одна задача или, скажем, побочный эффект.

Итак, в основном, как и в ответе @Cal Irvine, у вас могут быть отдельные эффекты для ваших побочных эффектов.

 useEffect(() => {
        taskrelatedtomonthdependant();
}, [month]);

useEffect(() => {
        taskrelatedtouserdependant();
}, [month]);