У меня есть ProductSearchContainer.js файл, который он слишком долго обрабатывает и поддерживает.
За что он отвечает:
- Выполнение сетевых запросов для получения списка продуктов
- Фильтр, который перечисляет значения фильтров, которые он получает из строки запроса URL, и обновляет состояние с помощью нового FilterList
- . Он также содержит функции для имитации длины товаров в каждом фильтре, прежде чем щелкнуть по нему.Например: цветной фильтр с Black (5) , указывающим, что вы получите 5 товаров, если вы нажмете Black .
- Среди других функций
Файл становился слишком большим (более 600 строк), и я решил переместить некоторые кусочки логики в другие файлы.
Для каждой категории фильтров (марка, цена, рейтинг и т. Д.), Которые у меня естьдве функции:
- 1 для применения активных фильтров (получить массив
list и activeFilters, и он возвращает отфильтрованный список для этих фильтров. - 1 для имитацииследующая длина фильтра (как я объяснил выше на примере цветов)
Примечание: Ниже вы увидите, что они полагаются на переменную состояния activePriceFilters, но не вызываютлюбой React Hook в их исполнении.
OPTION # 1
Моей первой мыслью было превратиться в кастомный хук. Так я и сделал. И это работает (см. фрагмент ниже).
function usePriceFilter(activePriceFilters) {
function applyPriceFilter(list, activePriceFilters) {
console.log('I will get a list and return it filtered by activePriceFilters');
}
function simulateNextPriceFilter(list, someTestPriceFilter) {
console.log('I will get a list and return the length of the filtered list by price');
}
return [applyPriceFilter,simulateNextPriceFilter];
}
И я потребляю, выполняя:
const [applyPriceFilter,simulateNextPriceFilter] = usePriceFilter(activePriceFilters)
Я имею в виду, мой пользовательский хук в основномфункция более высокого порядка, но я думаю, что она все еще квалифицируется как пользовательский хук:
из React DOCS:
Пользовательский хук - это функция JavaScript, имя которой начинаетсяс помощью «use», и это может вызвать другие Hooks.
OPTION # 2
Но я думаю, я также мог бы превратиться в обычный .js файл, экспортируйте обе функции и просто выполните обычный импорт для них.Например:
import {applyPriceFilter,simulateNextPriceFilter} from './priceFilterHelpers
ВОПРОС:
Есть ли разница в функциональности или производительности между двумя подходами?Стоит ли мне отдавать предпочтение 1 вместо другого?
Я думаю, что пользовательские хуки более читабельны, но есть ли что-то еще, что я получаю, делая это?
function App() {
const [activePriceFilters,setActivePriceFilters] = React.useState(['10to20','50+']);
const [applyPriceFilter, simulateNextPriceFilter] = usePriceFilter(activePriceFilters);
return(
<React.Fragment>
<button onClick={applyPriceFilter}>Apply Price Filters</button>
<button onClick={simulateNextPriceFilter}>Simulate Price Filter</button>
</React.Fragment>
);
}
function usePriceFilter(activePriceFilters) {
function applyPriceFilter(list, activePriceFilters) {
console.log('I will get a list and return it filtered by activePriceFilters');
}
function simulateNextPriceFilter(list, someTestPriceFilter) {
console.log('I will get a list and return the length of the filtered list by price');
}
return [applyPriceFilter,simulateNextPriceFilter];
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>