Так что вам не придется переделывать работу
Оглавление
- Как создаются крючки
- Можем ли мы объединить варианты
- Почему это работает
- Заключение
Как создаются крючки
Когда мы создаем кастомный хук со сложной логикой в React, мы либо возвращаем массив, либо объект с состоянием и логикой. Далее показан процесс:
1. Возврат объекта
Первый вариант — вернуть объект из пользовательского хука, например:
const customHook = (configs) => {
const isLoading = true //logic
const reload = () => {/*logic*/}
return { isLoading, reload }
}
Использование будет выглядеть так:
const { isLoading, reload } = customHook(configs)
Где:
- Это удобно для разработчиков, где вам не нужно запоминать порядок реквизитов.
- IntelliSense поможет вам узнать параметры
Но когда мы используем несколько таких хуков, это выглядит некрасиво. Это будет выглядеть так:
const {
isLoading: isLoadingWidget1,
reload: reloadWidget1
} = customHook(widget1Config)
const {
isLoading: isLoadingWidget2,
reload: reloadWidget2
} = customHook(widget2Config)
const {
isLoading: isLoadingWidget3,
reload: reloadWidget3
} = customHook(widget3Config)
Что не очень приятно. Мы должны переименовать каждый ключ в другой, чтобы они не конфликтовали.
2. Возврат массива
Другой вариант — вернуть массив из пользовательского хука, как показано ниже:
const customHook = (configs) => {
const isLoading = true //logic
const reload = () => {/*logic*/}
return [isLoading, reload]
}
Использование будет выглядеть так:
const [isLoadingWidget1, reloadWidget1] = customHook(widget1Config) const [isLoadingWidget2, reloadWidget2] = customHook(widget2Config) const [isLoadingWidget3, reloadWidget3] = customHook(widget3Config)
Где:
- Это решает проблему многократного использования. Вам не нужно переименовывать каждую клавишу.
Но:
- Вы должны поддерживать порядок реквизита
- Не имеет того же IntelliSense, что и в Objects.
Можем ли мы объединить варианты
Можем ли мы объединить эти шаблоны вместе? В смысле, если вы хотите использовать его как массив или как объект для того же хука.
Да, это возможно. Посмотрите на эту реализацию:
const customHook = () => {
const isLoading = true //logic
const reload = () => {/*logic*/}
const result = [isLoading, reload]
result.isLoading = isLoading
result.reload = reload
return result
}
result — это массив, но мы добавляем к нему ключи isLoading и reload.
Эта реализация даст нам возможность использовать возвращаемое значение хука как:
- Объект
const { isLoading, reload } = customHook(configs)
2.Массив
const [isLoading, reload] = customHook(configs)
Оба эти варианта будут работать. Но почему…
Почему это работает
Почему можно использовать как возвращаемые типы Array, так и Object? Почему можно прикреплять ключи к массиву?
Объект
Array, как и массивы в других языках программирования, позволяет «сохранять набор из нескольких элементов под одним именем переменной и имеет элементы для выполнения общих операций с массивами. — МДН
Как уже упоминалось, «объект Array». Это показывает тот факт, что массив на самом деле является просто объектом со специальным конструктором и набором методов, выполняющих обычные операции с массивами.
Доказательство того, что массив на самом деле является объектом
- Доказательство 1
typeof [] // 'object'
Да, typeof приведет к 'object'
2. Доказательство 2
const {0: first, 1: second} = [1, 2, 3, 4] // first: 1, second: 2
Мы можем уничтожить объект массива, используя индексы, потому что ключи в любом массиве — это просто индексы и значения объекта, и это то, что вы передаете между скобками []. Вот почему мы можем уничтожить его и переименовать ключи таким образом.
3. Доказательство 3
const { length } = [1, 2, 3, 4]
Массив — это объект, в котором также есть ключ length.
4. Доказательство 4
Object.keys([1, 2, 3, 4]) // ['0', '1', '2', '3'] Object.values([1, 2, 3, 4]) // [1, 2, 3, 4]
Object.keys и Object.values работают только с объектами, а массив — это объект (специальный объект).
Заключение
Мы только что видели паттерн, который позволяет нам сделать так, чтобы возвращаемое значение хуков уничтожалось как массив или как объект. Мы видели, как это полезно. И мы увидели, почему это возможно, потому что все дело в том, что массивы — это просто объекты с крышкой.
