reactjs - 上下文和反应，最佳实践

Question

我有一个项目，其中包含（除其他外）事件列表视图，当然还有一个单独显示这些事件的独特页面，您可以轻松理解有两个不同的路径：我添加的 /events/ 和 /events/:id对事件进行一些过滤，当然当我过滤列表时，然后单击特定事件以查看它，然后返回事件列表，当然，忘记我的过滤器。

我应该使用上下文还是有我没有听说过的特定方式？

我还考虑为所有过滤器设置不同的路径（即：/events/filter_type_1 等，其中 filter_type_1 是人类可读的。）

什么是更合乎逻辑的方式？

标签： reactjs

Answer 1

是和否，有 3 种方法可以解决此问题：

将状态存储在更高的组件中

而不是将状态存储在您的 overviewView 组件中。将其存储在执行路由的上面的组件中。这样它就不会迷失在导航中。（我不喜欢这种方法）。

持续状态

您可以将状态保存到localStorage并在组件挂载时读取此状态。这样，当您回来时，您的状态将持续存在。

localStorage.getItem("overviewCompnent_filter");
localStorage.setItem("overviewCompnent_filter",yourData);

外化状态

有一些状态库可以帮助您将顶级应用程序状态置于 react 组件之外，例如：mobx（我最喜欢的）和 redux。这些库使用下面的上下文 api 为您的组件提供正确的状态/值，您可以让它们将它们作为 props 注入到您的组件中（因此它就像第一个选项，但更清洁的解决方案）。

这样，您可以将所有顶级状态保持在一起，而不必一直沿组件树向下传递。