我可以使用 React 中的函数提供上下文值吗？

Question

我目前正在问自己以下问题：是否建议我直接在 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功能。如果 Provider 重新呈现，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>
  )
}

Answer 1

您尝试为“商店”创建的内容称为 custom hook

不过您需要进行一些更改。通常使用 'use' 作为自定义挂钩的开始。所以，我在这里将 createStore 重命名为 useCustomStore。因为它是一个带有 useState 的自定义钩子，所以它遵循与您在上下文提供程序中实际拥有它一样的规则

此外，您的自定义挂钩 returns 一个包含状态和变异方法的对象。您将需要直接访问状态 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 挂钩。

我可以使用 React 中的函数提供上下文值吗？

Can I provide context values using a function in React?

reactjs

react-context