Блог

Допустим, я создаю книжный магазин и хочу добавлять, удалять, обновлять и т. Д. Книги в свой список (в основном, манипулировать списком книг). Я создаю глобальное состояние с помощью контекстного API и функций, подобных приведенным ниже:

 //defining my global state
const [books, setBooks] = useState([ ])

// defining a function to manipulate the global state
  const addBook = (newBook) => {
    let newBooksList = [newBook, …books]
    setBooks(newBooksList)
  }
  

А затем я передаю эти функции тем компонентам, которые в этом нуждались.
Это правильный подход? Я имею в виду, я знаю, что это работает, но считается ли это хорошей практикой или есть другие лучшие способы делать такие вещи?
Я не уверен, что это хороший функциональный подход или я должен делать это в более ооп-подходе, я был бы признателен, если бы кто-нибудь мог указать мне правильное направление.

Используемый вами способ хорош, если вы хотите управлять состоянием с помощью контекста.

О подходе к ООП, конечно, способ, которым вы его используете, — это просто предпочтение, но вы не видите много примеров использования ООП в мире React. Итак, если вы ищете точный ответ на этот вопрос, просто придерживайтесь метода, который вы там используете.

При желании вы можете использовать пользовательский хук для своего контекста. Вы можете найти пример здесь. Это только для состояния аутентификации, но логика та же.

И последнее замечание, хотя вы используете Context там, и это кажется нормальным, не забывайте, что Context не является менеджером состояний. Есть недостатки в использовании его в качестве менеджера состояний, например, все компоненты (включенные в этот контекст) повторно отображаются, когда что-то меняется в состоянии, связано ли это изменение с ними или нет.