如何使用 usememo 钩子在 react 本机应用程序中持久化数据

Question

我正在用 react native 编写一个应用程序，我遇到了一个问题 - 该应用程序将有几个屏幕(我使用 react-navigation 和 react-navigation-tabs(和双色主题(浅色和深色(由上下文和钩子管理。我想实现的是应用程序要记住的选定主题(浅色主题将设置为默认值，切换到深色后，离开应用程序并返回深色主题仍应应用(。

编辑#2：昨天的一个答案(由于某种原因消失了(建议使用redux和本地存储，所以我正在编辑下面的段落以澄清情况。

最简单的方法是使用同步存储/localStorage(我已经有使用本地存储的应用程序的工作版本(，但是我在网络上找到的一个教程为此目的使用用户备忘录钩子，虽然它应该可以工作，但它不是(至少在我的情况下(，我不知道为什么......

我的应用程序.js文件如下：

imports ...
const TabNavigator = createBottomTabNavigator({
Home: Home,
List: List,
});
const App = createAppContainer(TabNavigator);
export default () => (
<ThemeProvider>
<App />
</ThemeProvider>

主题上下文.js文件：

imports ...
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [colors, setColors] = useState(themes.lightTheme) //setting light theme as default
const value = useMemo(
() => ({
colors,
setColors,
}),
[colors, setColors],
);
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
}

和 Home.js 文件，带有一个按钮可以在主题之间切换：

imports ...
export const Home = () => {
const { colors, setColors } = useContext(ThemeContext);
const toggleTheme = () => {
if (colors.type === 'light') {
setColors(themes.darkTheme);
} else {
setColors(themes.lightTheme);
}
}
return (
<>
<View style={{...styles.mainView, backgroundColor: colors.backgroundColor }}>
<Text style={{...styles.mainText, color: colors.color}}>Hello Native World</Text>
<Button title='toggle theme' onPress={toggleTheme} />
</View>
</>
)
}
const styles = StyleSheet.create({
mainView: {
paddingTop: 40,
display: 'flex',
alignItems: 'center',
},
mainText: {
fontSize: 40,
fontWeight: 'bold',
},
});

Answer 1

您必须更改的密钥文件是上下文文件：

export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [colors, setColors] = useState(themes.lightTheme) //setting light theme as default
const value = useMemo(
() => ({
colors,
setColors,
}),
[colors, setColors],
);
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
}

我真的不明白你为什么用useMemo，但我会离开它。一眼看，我会说它不需要，但我不知道你的应用程序。你想要的是这样的东西：

import AsyncStorage from '@react-community/async-storage'
export const ThemeContext = createContext()
export function usePersistedState(key, initialState) {
const [state, setState] = useState(() => {})
useEffect(() => {
async function getAndSetInitialState() {
const persistedState = await AsyncStorage.getItem(key)
if (persistedState) {
setState(JSON.parse(persistedState))
} else if (typeof initialState === 'function') {
return setState(initialState())
} else {
return setState(initialState)
}
}
getAndSetInitialState()
}, [key])
function setPersistedState(value) {
AsyncStorage.setItem(key, JSON.stringify(value))
setState(value)
}
return [state, setPersistedState]
}
export const ThemeProvider = ({ children }) => {
const [colors, setColors] = usePersistedState("your_storage_key", themes.lightTheme) //setting light theme as default
const value = useMemo(
() => ({
colors,
setColors,
}),
[colors, setColors]
)
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
}

我可能错过了一些边缘情况，但这样你的应用程序将从存储加载它的状态并将其状态保存到存储中。

编辑：我不确定useMemo会如何帮助，AsyncStorage是最简单的解决方案imo。