React 如何准确地存储和响应不断变化的状态？

Question

我正在抓取一个使用 React 作为前端的网站。到目前为止，我似乎必须使用他们的搜索表单才能到达结果页面。

问题在于，每次刷新页面时，该站点都会从下拉列表（其state）中清除搜索表单的选定选项，因此会显着降低抓取速度。我知道它按预期工作，但如果有一种方法可以直接操纵状态，那么它可以加快我的抓取速度，而不是从小按钮中重新选择所有选项。

我认为它根本不使用任何类型的持久存储或本地存储，对于每个选择，否则表单可能不会在刷新时被清除.

我可以看到表单的年份选项始终存在于data-attribute (data-years=["2017", "2016", ...]) 中，但仅针对年份。 And when a year (or any option from the dropdowns) is selected, a hidden field is populated with a value such as <input type="hidden" name="year" value="2017">.

这就是 React 用于临时存储（又名。state）的全部 - 隐藏字段吗？

对于我的问题的第二部分，当状态发生变化时会触发什么类型的事件？我怎么能手动触发它？例如，当我选择一年时，我希望表单为我提供下一个下拉菜单的选项 - 给定年份。

Answer 1

React 根本不使用 DOM 来维护状态。您提供的示例只是一个编写不佳的 React 应用程序。通常一切都会保存在内存中（封闭的代码，所以在窗口/全局中什么都没有），React 会根据需要更新 DOM。 :)

这意味着我认为您无法从外部读取/检测 React 内在状态变化。交互式抓取应该像用户使用页面一样工作，没有任何提示它真正使用的技术。

根据您用于抓取的技术，您确实可以模拟或生成真实的 DOM 事件。当我们需要使用无处不在的 Selenium 服务器为 React 应用程序编写一些端到端测试时，我们通常必须在按钮、选项等上手动 click 并留出时间让 React 应用程序做出相应的反应并发挥它的魔力（比如获取更多数据和更新页面）然后阅读文档内容以验证一切正常。它基本上是“抓取”所需的输出来验证您的测试断言。

如果您只抓取静态页面（curl 样式：获取 HTML 并按照自己的方式处理原始 HTML 响应），我认为您将无法处理 Javascript 表单。您需要让您的刮板具有交互性。

除了提到的 Selenium/WebDriver 之外，像 PhantomJS 这样的东西可能会有所帮助。