React如何存儲和響應改變狀態？

Question

我正在刮一個使用React作爲前端的網站。到目前爲止，我似乎必須使用他們的搜索表單才能到達結果頁面。

問題在於，每次頁面刷新時，網站都會從下拉菜單（其state）中清除搜索表單的所選選項，因此它會使搜索速度顯着變慢。我知道它是按照預期工作的，但是如果有辦法我可以直接操縱狀態，那麼它可以加速我的刮板，而不是從小按鈕上重新選擇所有的選擇。

我不認爲它使用任何類型的持久存儲或本地存儲可言，每一個選擇，否則可能形式不會對刷新清除。

我可以看到，表單的年份選項始終存在於data-屬性（data-years=["2017", "2016", ...]）中，但僅限於多年。當一年（或下拉菜單中的任何選項）被選中時，隱藏字段將填充一個值，例如<input type="hidden" name="year" value="2017">。

這就是React用於臨時存儲（又名狀態） - 隱藏字段？

對於問題的第二部分，當狀態發生變化時會觸發什麼類型的事件？我怎麼能手動觸發它？例如，當我選擇一年時，我希望表單能夠給出下一個下拉列表的選項 - 給定年份。

Answer 1

React根本不使用DOM來維護狀態。你提供的例子只是一個寫得很差的React應用程序。通常情況下，所有內容都會保留在內存中（關閉代碼，因此window/global中沒有任何內容），React會根據需要更新DOM。 :)

這意味着我不認爲你能夠從外部讀取/檢測React內在狀態變化。交互式抓取應該像使用該頁面的用戶一樣工作，而不會提示它真正使用的技術。

根據您使用的拼圖技術，您確實可以模擬或生成真實的DOM事件。當我們需要使用無處不在的Selenium服務器爲React應用程序編寫一些端到端測試時，我們通常必須在按鈕，選項等上手動輸入click，並讓React應用程序有足夠的時間做出相應的反應並做出其魔術（如獲取更多數據和更新頁面），然後閱讀文檔內容以驗證一切正常。它基本上是用所需的輸出「刮」來驗證你的測試斷言。

如果你只是在搜索靜態頁面（捲曲樣式：獲取HTML並按原始HTML響應工作），我認爲你不能處理Javascript表單。你需要你的刮板是互動的。

除了提到的Selenium/WebDriver之外，像PhantomJS之類的東西可能會有所幫助。