[英]Is good to use React.useMemo or React.useCallback inside component props?
[英]Difference between React.useCallBack, React.useMemo and React.Memo with examples?
React.useCallBack、React.useMemo 和 React.Memo 有哪些不同的用例?
import _ from 'lodash';
import React, { useState, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import { useOutsideClickHandler } from 'utilities/method';
import { useTranslation } from 'react-i18next';
function FilterIndicators({
filters,
onDeleteFilter,
onRemoveFilter,
removeAllFilters,
}) {
const { t } = useTranslation();
const [openedTagIndex, setOpenedTagIndex] = useState(null);
const handleFilterButtonClick = useCallback(
(index) => {
if (openedTagIndex === index) {
setOpenedTagIndex(null);
} else {
setOpenedTagIndex(index);
}
},
[openedTagIndex],
);
const hideOptions = useCallback(() => {
setOpenedTagIndex(null);
}, []);
const deleteFilters = useCallback(
(e, filterName) => {
e.preventDefault();
onDeleteFilter(filterName);
hideOptions();
},
[onDeleteFilter, hideOptions],
);
const removeFilter = useCallback(
(e, filterOption, filterName) => {
e.preventDefault();
onRemoveFilter(filterOption, filterName);
hideOptions();
},
[onRemoveFilter, hideOptions],
);
const wrapperRef = useRef(null);
useOutsideClickHandler(wrapperRef, hideOptions);
return (
<FilterIndicatorsSC data-testid="admin-filter-indicators" ref={wrapperRef}>
{filters.map((filter, index) => {
if (filter.isShow) {
return (
<FilterTag
key={filter.id}
data-testid="admin-filter-sub-indicators"
>
<FilterButton onClick={() => handleFilterButtonClick(index)}>
<FilterName>{filter.name}</FilterName>
<CaretIcon className="fa fa-caret-down" />
<CloseIcon
className="fa fa-times"
title={t('asset_configuration_panel.remove_filter')}
onClick={(e) => deleteFilters(e, filter.filterName)}
/>
</FilterButton>
{openedTagIndex === index ? (
<FilterPopup>
{filter.filterOptions &&
filter.filterOptions.map((filterOption) => (
<FilterOption key={filterOption}>
<FilterOptionLabel>
{'' + filterOption}
</FilterOptionLabel>
<FilterOptionCloseIcon
className="fa fa-times"
onClick={(e) =>
removeFilter(e, filterOption, filter.filterName)
}
/>
</FilterOption>
))}
</FilterPopup>
) : null}
</FilterTag>
);
} else {
return null;
}
})}
{filters.filter((filter) => filter.isShow).length > 0 && (
<FilterBarClearButton
title={t('clear_all_filters')}
onClick={removeAllFilters}
>
{t('clear_all')}
</FilterBarClearButton>
)}
</FilterIndicatorsSC>
);
}
FilterIndicators.propTypes = {
/** List of all the filters applied */
filters: PropTypes.array,
onRemoveFilter: PropTypes.func.isRequired,
onDeleteFilter: PropTypes.func.isRequired,
removeAllFilters: PropTypes.func.isRequired,
};
FilterIndicators.defaultProps = {
filters: [],
onRemoveFilter: () => {},
onDeleteFilter: () => {},
removeAllFilters: () => {},
};
const areEqual = (prevProps, nextProps) => {
return _.isEqual(prevProps, nextProps);
};
export default React.memo(FilterIndicators, areEqual);
您可以在上面的示例中看到我使用 React.memo,useCallback 用於優化應用程序性能,它節省了許多重新渲染,但在使用這些優化時要小心。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.