Context和React，最佳实践

Question

我有一个项目，其中包含（除此之外）事件的列表视图，然后当然是一个单独显示这些事件的唯一页面，您可以很容易地理解有两个不同的路径：/ events /和/ events /： ID 我添加了一些事件过滤，当然，当我过滤列表，然后单击特定事件来查看它，然后返回事件列表，当然，忘记我的过滤器。

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

我还想过为所有过滤器设置不同的路径（例如：/ events / filter_type_1等等，filter_type_1是人类可读的东西。）

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

Answer 1

是的，没有3种方法可以解决这个问题：

将状态存储在更高的组件

中

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

持久状态

您可以将状态保留到localStorage并在组件安装时读取此状态。这样，当你回来时你的状态就会坚持下去。

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

外部化状态

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

这样，您可以将所有顶级状态保持在一起，而不必将其全部放在组件树中。