Question

假设我正在创建一个书店，并且想要将书添加，删除，更新等（基本上是操作书列表）。我正在使用上下文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)
  }

然后将这些函数传递给需要它的组件。这是正确的方法吗？我的意思是，我知道这是行得通的，但是这是否被认为是好的做法，或者还有其他更好的方式来做这些事情？我不确定这是否是一种好的功能方法，还是应该以一种更常见的方法进行操作，如果有人能指出我正确的方向，我将不胜感激。

Answer 1

如果要使用Context管理状态，则使用的方式很好。

关于OOP方法，当然，您的使用方式只是一个首选项，但是在React世界中您看不到使用OOP的许多示例。因此，如果您要寻求确切的答案，请坚持使用在那里使用的方法。

（可选）您可以为上下文使用自定义钩子。您可以找到示例here。只是用于auth状态，但是逻辑是相同的。

最后一点要注意，尽管您在那里使用Context似乎还不错，但是请不要忘记Context不是状态管理器。将其用作状态管理器有一些缺点，例如当状态发生某些变化时，所有组件（由此Context包装）都会重新呈现，无论此更改与它们是否相关。

如何在ReactJS中正确处理全局状态？

1 个答案: