我可以使用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
复制
相似问题
Laravel -如何在视图中获取输入值
Laravel模态形式输入路径作为参数
iOS:在iPad模态视图中获取键盘点？
在Laravel视图中获取clientOriginalName
如何用Laravel在模态视图中显示cmd线输出数据
腾讯云开发者
