React如何存储和响应改变状态？

我正在刮一个使用React作为前端的网站。到目前为止，我似乎必须使用他们的搜索表单才能到达结果页面。React如何存储和响应改变状态？

问题在于，每次页面刷新时，网站都会从下拉菜单（其state）中清除搜索表单的所选选项，因此它会使搜索速度显着变慢。我知道它是按照预期工作的，但是如果有办法我可以直接操纵状态，那么它可以加速我的刮板，而不是从小按钮上重新选择所有的选择。

我不认为它使用任何类型的持久存储或本地存储可言，每一个选择，否则可能形式不会对刷新清除。

我可以看到，表单的年份选项始终存在于data-属性（data-years=["2017", "2016", ...]）中，但仅限于多年。当一年（或下拉菜单中的任何选项）被选中时，隐藏字段将填充一个值，例如<input type="hidden" name="year" value="2017">。

这就是React用于临时存储（又名状态） - 隐藏字段？

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

来源

2017-02-03 geminae

“这就是React用于临时存储（aka。state） - 隐藏字段的所有内容吗？”没有一种方法可以在React中管理状态。但是，为此目的使用隐藏字段，如果确实如此，这是非常不寻常的。 –

我同意，React使用隐藏字段看起来很不寻常。但是当你说“在React中没有一种方法可以管理状态”时，你的意思是不同版本的React管理状态有所不同吗？或者React根据它是一个React道具还是用setState设置的状态来不同地管理状态？@Jordan – geminae

React根本不使用DOM来维护状态。你提供的例子只是一个写得很差的React应用程序。通常情况下，所有内容都会保留在内存中（关闭代码，因此window/global中没有任何内容），React会根据需要更新DOM。 :)

这意味着我不认为你能够从外部读取/检测React内在状态变化。交互式抓取应该像使用该页面的用户一样工作，而不会提示它真正使用的技术。

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

如果你只是在搜索静态页面（卷曲样式：获取HTML并按原始HTML响应工作），我认为你不能处理Javascript表单。你需要你的刮板是互动的。

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

来源

2017-02-03 18:36:28 CharlieBrown

我担心这将会是这种情况 - 该状态被保留在内存中，并且被关闭的代码。真是令人震惊。事实上，我肯定使用“交互式刮板”，否则就无法使用React网站。感谢您的回答！如果我有分数的话，我会赞成它:)。 – geminae

没问题，祝你好运！ ;） – CharlieBrown

React如何存储和响应改变状态？

回答

相关问题