假设我们设置了一个上下文提供程序,以及一些初始数据属性值。
沿着这条线的某个地方,假设消费者然后修改了这些属性。
在页面重新加载时,这些更改将丢失。持久化数据以便我们可以保留这些数据修改的最佳方法是什么?除了简单的本地存储之外还有其他方法吗?
假设我们设置了一个上下文提供程序,以及一些初始数据属性值。
沿着这条线的某个地方,假设消费者然后修改了这些属性。
在页面重新加载时,这些更改将丢失。持久化数据以便我们可以保留这些数据修改的最佳方法是什么?除了简单的本地存储之外还有其他方法吗?
是的,如果您希望数据在重新加载时保持不变,您的选择将是将该信息存储在服务器端(通过 api 调用)或浏览器存储(本地存储、会话存储、cookie)。您要使用的选项取决于您希望实现的持久性级别。无论存储选择如何,它看起来都可能类似于
const MyContext = React.createContext(defaultValue);
class Parent extends React.Component {
setValue = (value) => {
this.setState({ value });
}
state = {
setValue: this.setValue,
value: localStorage.getItem("parentValueKey")
}
componentDidUpdate(prevProps, prevState) {
if (this.state.value !== prevState.value) {
// Whatever storage mechanism you end up deciding to use.
localStorage.setItem("parentValueKey", this.state.value)
}
}
render() {
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
)
}
}
上下文不会以您想要的方式持续存在。这是我所做的一个示例,使用带有 React 钩子的无状态函数。
import React, {useState, useEffect} from 'react'
export function sample(){
// useState React hook
const [data, setData] = useState({})
const [moreData, setMoreData] = useState([])
// useState React hook
useEffect(() => {
setData({test: "sample", user: "some person"})
setMoreData(["test", "string"])
}, [])
return data, moreData
}
export const AppContext = React.createContext()
export const AppProvider = props => (
<AppContext.Provider value={{ ...sample() }}>
{props.children}
</AppContext.Provider>
)
从一开始就了解这是一种解决方法,而不是永久解决方案。持久化数据是数据库的工作,而不是客户端。但是,如果您需要持久化数据进行开发,这是一种方法。首先请注意,我使用的是React hooks。这是 16.8 完全支持的功能。该useEffect()
替换的生命周期方法在类的声明一样,TLadd上述发现。他componentDidUpdate
习惯于坚持。执行此操作的最新方法是useEffect
. 当应用程序刷新时,将调用此方法并在上下文中设置一些硬编码数据。
要使用提供程序:
import React from 'react'
import Component from './path/to/component'
import { AppProvider } from './path/to/context'
const App = () => {
return (
<AppProvider>
<Component />
</AppProvider>
)
}
当你刷新,data
并且moreData
还会有分配给他们任何默认值。