Блог

В настоящее время я задаю себе следующий вопрос: рекомендуется ли мне определять свое состояние и логику непосредственно в 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>
  )
}
  

То, что вы пытаетесь создать для своего «хранилища», называется пользовательским подключением

Однако вам нужно будет внести некоторые изменения. Обычно используется ‘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.