#javascript #html #reactjs #react-native #react-hooks
Вопрос:
У меня есть функция с двумя параметрами, которая возвращает объект(палитру). Первый параметр-это индекс объекта в палитре, а второй параметр определяет, возвращать ли светлый или темный объект.
const Theme = (index:String, DarkMode:Boolean) => {
const palette = {
background:{
light,
dark,
},
custom:{
light,
dark,
},
}
return(palette[index][DarkMode]);
} Затем в моем компоненте react я использую эту функцию для стилизации своего элемента.
const [darkMode, setDarkMode] = useState(false); // state
const bg = Theme("background",darkMode); // function
// then in my component style
backgroundColor:`${bg.background}`, Затем у меня есть кнопка, которая переключает мое состояние темного режима, чтобы моя функция темы возвращала светлый объект вместо темного и наоборот, но проблема в том, что цвет фона моего компонента не меняется, даже когда меняется состояние.
Поэтому мой вопрос: «Как мне использовать React.useMemo для вызова моей функции и повторного отображения моего компонента при изменении состояния?».
Комментарии:
1. Поисковая реакция. Контекст и пример поставщика тем. Это неуместное использование useMemo.
2. @SamuelGoldenbaum Я знаю, что могу достичь этого с помощью useContext и createContext, но я просто изучал, есть ли другой способ достичь этого. Кроме того, я просто использую useMemo и useEffect в первый раз, поэтому я не совсем понимаю, каково было бы подходящее использование useMemo. Я проверил документы, но это просто не укладывается у меня в голове.
3. Запоминание-это просто способ кэширования результатов, когда вам предоставляется один и тот же набор параметров (зависимостей). Представьте себе функцию, которая выполняет приличный объем вычислений или должна совершать внешние вызовы и т. Д. Если вам снова дадут тот же набор параметров, то вы предпочли бы избежать повторного запуска полного процесса и вместо этого вернуть результат предыдущего вычисления.
4. useMemo используется, когда вы хотите запомнить возвращенное значение дорогостоящего/дорогостоящего вычисления.useCallback-это когда вы хотите запомнить саму функцию (т. Е. вы передаете ее в качестве реквизита и используете ее в эффекте использования ребенка… за, скажем) Я согласен с Сэмюэлем, useContext был бы самым идеальным решением.
5. Спасибо вам, ребята, за объяснение @SamuelGoldenbaum. Я просмотрел несколько видео на YouTube о крючках react и думаю, что теперь понимаю их лучше.