我使用react hook作为局部变量,例如const [something,setSomthing] = useState(''),使用redux存储通过store和Provider传递给整个组件的变量。但是有人告诉我不应该同时使用React Hooks和Redux。有人能解释为什么吗?如果不应该,我应该在函数组件中的哪里存储局部变量?
qgzx9mmu1#
Redux和本地状态总是一起使用的。钩子用来复制本地状态,你可以把它存储在基于类的组件中,但是要使用函数组件。就像你在问题中说的,状态钩子用来保持组件的本地状态。而redux用于保持应用程序的全局状态。它们彼此并不兼容。假设您有一个保持计数器的组件,但该计数器仅由该组件在本地使用。在这种情况下,您将使用挂钩来保持计数器的状态。现在,假设您的应用程序的要求发生了变化,现在该计数器(具有相同值特定计数器,而不是另一个)需要由应用程序中的其他组件使用。在这种情况下,计数器将不得不被移动到redux全局状态。我希望这能回答你的问题。
vs3odd8k2#
如果全局不需要该状态,则可以使用setState钩子将其本地存储在函数中,而不使用Redux。如果需要的话,在全局状态的功能组件中使用Redux也是不错的。但是对于许多用例,你可以使用React提供的带有钩子的Context API。
wlp8pajw3#
想想看,这片国家应该在哪里管理。假设您有一个复选框,为什么全世界都需要知道该复选框已选中呢?这可以被认为是仅复选框组件需要的一段状态,因此使用setChecked在组件中保持其状态。除非其他组件使用该checked值...在这种情况下,您可能希望将选中状态向上移动到某个点,在该点上,该值可以仅瀑布式下降到需要选中值的组件。您可以将checked的值保存到redux中,但是您需要这样做吗?(在我们的应用程序中)redux比react context更好,因为它重新呈现的次数更少,我们还从应用程序初始化时的get请求中获取复选框/等的状态,因此我们在构建时保存到redux,然后在页面上显示复选框时填充它们...所以redux是保存状态的正确位置(对我们来说)(而不是我前面提到的组件)。一般的规则是在树中不将状态保持在比它所需要的更高的位置。
8xiog9wr4#
不必担心redux和react-hook,因为它们的用例完全取决于您的数据,如果您不想在导航到页面后看到加载的数据,所以我建议你不要使用任何数据存储管理器,比如Mobx或Redux,但是如果你想把数据存储在某个地方,并在你的页面之间共享它们,那么你需要在你的项目中实现一个数据管理器。但React钩子与redux完全没有冲突。但是如果您对React钩子很熟悉,它可以帮助您通过React上下文API像Redux一样存储数据。在Typescript中使用React上下文API的演示:
https://github.com/ali-master/react-typescript-hooks-sample
4条答案
按热度按时间qgzx9mmu1#
Redux和本地状态总是一起使用的。钩子用来复制本地状态,你可以把它存储在基于类的组件中,但是要使用函数组件。就像你在问题中说的,状态钩子用来保持组件的本地状态。而redux用于保持应用程序的全局状态。它们彼此并不兼容。假设您有一个保持计数器的组件,但该计数器仅由该组件在本地使用。在这种情况下,您将使用挂钩来保持计数器的状态。现在,假设您的应用程序的要求发生了变化,现在该计数器(具有相同值特定计数器,而不是另一个)需要由应用程序中的其他组件使用。在这种情况下,计数器将不得不被移动到redux全局状态。我希望这能回答你的问题。
vs3odd8k2#
如果全局不需要该状态,则可以使用setState钩子将其本地存储在函数中,而不使用Redux。
如果需要的话,在全局状态的功能组件中使用Redux也是不错的。但是对于许多用例,你可以使用React提供的带有钩子的Context API。
wlp8pajw3#
想想看,这片国家应该在哪里管理。
假设您有一个复选框,为什么全世界都需要知道该复选框已选中呢?这可以被认为是仅复选框组件需要的一段状态,因此使用setChecked在组件中保持其状态。除非其他组件使用该checked值...在这种情况下,您可能希望将选中状态向上移动到某个点,在该点上,该值可以仅瀑布式下降到需要选中值的组件。
您可以将checked的值保存到redux中,但是您需要这样做吗?(在我们的应用程序中)redux比react context更好,因为它重新呈现的次数更少,我们还从应用程序初始化时的get请求中获取复选框/等的状态,因此我们在构建时保存到redux,然后在页面上显示复选框时填充它们...所以redux是保存状态的正确位置(对我们来说)(而不是我前面提到的组件)。
一般的规则是在树中不将状态保持在比它所需要的更高的位置。
8xiog9wr4#
不必担心redux和react-hook,因为它们的用例完全取决于您的数据,如果您不想在导航到页面后看到加载的数据,所以我建议你不要使用任何数据存储管理器,比如Mobx或Redux,但是如果你想把数据存储在某个地方,并在你的页面之间共享它们,那么你需要在你的项目中实现一个数据管理器。但React钩子与redux完全没有冲突。
但是如果您对React钩子很熟悉,它可以帮助您通过React上下文API像Redux一样存储数据。
在Typescript中使用React上下文API的演示: