我可以使用React中的函数提供上下文值吗？
我可以使用React中的函数提供上下文值吗？
提问于 2020-09-01 09:28:36
我现在问自己以下问题:是建议我直接在ContextProvider中定义状态和逻辑，还是在单独的函数中定义状态和逻辑以将代码分开一点？
示例：
const MyContext = React.createContext({});
const createStore = () => {
const [myState, setMyState] = useState();
return {
myState,
setMyState
}
}
const MyContextProvider = ({ children }) => {
const store = createStore();
return (
<MyContext.Provider value={store}>{children}</MyContext.Provider>
)
}我对createStore函数有点担心。如果提供程序重新渲染，createStore是否总是会重新创建？
编辑:谢谢你的回答！
如果我想在useCreateStore钩子中使用一个参数怎么办？参数会更新吗？
示例：
const MyContext = React.createContext({});
const useCustomStore= (myAwesomeValue) => {
const [myState, setMyState] = useState();
const doSomething = useCallback(() => {
//
}, [myAwesomeValue])
return {
myState,
setMyState
}
}
const MyContextProvider = ({ children, title }) => {
const { myState } = useCustomStore(title); //You need to desctructure the returned object here, note myState
return (
<MyContext.Provider value={myState}>{children}</MyContext.Provider>
)
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-01 09:42:46
你试图为你的“商店”创建的东西叫做custom hook
不过，您需要做一些更改。习惯上使用' use‘作为自定义钩子的开头。因此，这里我将createStore重命名为useCustomStore。因为它是一个带有useState的自定义钩子，所以它遵循的规则与您在上下文提供程序中实际拥有它时遵循的规则相同
此外，您的自定义钩子返回一个包含状态和突变方法的对象。您需要直接通过store.myState访问状态，也可以像我在示例中所做的那样对其进行解构{ myState}。
const MyContext = React.createContext({});
const useCustomStore= () => {
const [myState, setMyState] = useState();
return {
myState,
setMyState
}
}
const MyContextProvider = ({ children }) => {
const { myState } = useCustomStore(); //You need to desctructure the returned object here, note myState
return (
<MyContext.Provider value={myState}>{children}</MyContext.Provider>
)
}等同于
const MyContext = React.createContext({});
const MyContextProvider = ({ children }) => {
const [myState, setMyState] = useState();
return (
<MyContext.Provider value={myState}>{children}</MyContext.Provider>
)
}因此，重现器将保留状态，因为它使用了useState挂钩。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63684979
复制相关文章
点击加载更多
相似问题
我可以为react测试库中的所有呈现函数使用提供程序吗？
我可以在函数中调用React吗？
我可以用opencv提供的函数替换这个插值函数吗？
React Context Api使用上下文提供程序中的函数
使用子组件更新react上下文提供程序值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
