最佳實踐：在網站的移動版本上反應組件

Question

我想要一些有關React組件使用的建議/意見。

當面對網站的桌面版和移動版（不是應用程序）的兩種不同設計時，您使用相同的組件並使用媒體查詢或JavaScript窗口大小等修改各個部分，還是在需要時創建不同的組件並呈現不同的外觀如果是移動網站？

您在經驗/觀點上所使用的任何策略都會有很大幫助。 許多不同的將不勝感激！

謝謝！

Answer 1

我會使用響應式設計的Web標准以及引導程序或基礎之類的庫。 除非您針對不同的平台（例如，本地與網絡），否則無需編寫其他視圖。 這將節省您的時間和精力，因為您從編寫不同的組件中獲得的收益並不可觀。

就是說，如果某些特定的頁面可以通過完全不同的UI更好地提供服務，則可以將兩者混合使用。 簡單地創建兩個包含一堆文本的主頁沒有任何好處，此問題已通過響應式設計實踐得以解決，而沒有利用它們是倒退的一步。

還應盡可能利用組件的重用。 如果台式機共享5/6功能，則可以以不同的方式縮放5以便被切碎並編寫6th的兩個版本。

我不會說這兩個選項是互斥的。 盡可能利用響應式設計實踐，並盡可能利用react的組件化。 如果您不確定自己走哪條路，則可能意味着使用響應式設計（IMHO）。

我設計的應用程序的目標是真正不同的平台。 我們希望同時使用本機和Web。 您正在尋找一個中間立場，因為可能會共享許多組件，但是少數組件可能需要不同的功能，因此也需要組件。 我看到了兩種應用程序結構，一種結構按類型組織您的應用程序（例如，組件與容器），另一種結構根據頁面結構（索引，帳戶，登錄名，共享名）組織代碼。 我發現，當需要混合完成相同功能但針對不同平台的組件時，最好按索引結構中的頁面結構將其分開，就像需要索引時，我可以簡單地並排放置一個iOS索引和一個Web索引。 這使我具有兩個無狀態組件和一個有級容器來為其供電。 對於較大的應用程序，這在心理上也更有意義，並且可以讓您執行更多的工作。

總體而言，如果您需要使用if語句來隱藏和顯示功能，請考慮將其分解為可重用的組件，並創建一個由單個狀態完整組件驅動的移動和桌面演示組件。