【技術實現步驟摘要】
本申請涉及計算機，具體涉及一種表單數據處理方法、裝置、電子設備及存儲介質。
技術介紹
1、表格在網頁服務(web)前端開發中的應用隨處可見，也一直都是最復雜的組件之一。表格不僅要展示數據，還要支持豐富的操作(排序、過濾、分頁、搜索、自定義列、合并單元格等)，很多組件庫提供了功能豐富的表格組件，例如antd(一種基于ant?design設計體系的react?ui組件庫)等，但是這些組件表格本身很少考慮性能問題。
2、隨著業務邏輯逐漸趨于復雜化，現有的表格組件功能已經無法滿足業務需求，尤其是在數據平臺開發中，單元格內常伴有復雜的交互邏輯和數據處理，當表格數據量大、數據流向過于復雜時，性能問題便隨之而來。
3、在傳統的研發方案中，采用mvvm(model-view-viewmodel)數據驅動視圖的方式，通過改變父組件狀態來更新子組件，達到重新渲染的目的。但由于交互邏輯的復雜化，很多數據都是在一個數據流內產生，會導致父組件狀態頻繁更新的情況，從而增加了子組件的重新渲染(re-render)次數，對性能是一種消耗，導致在渲染和交互上都會有一定程度的卡頓。
技術實現思路
1、本申請提供一種能夠通過解耦父子組件之間數據流向，降低子組件的重新渲染的次數，從而降低性能消耗，并減少表格組件渲染卡頓的一種表單數據處理方法、裝置、電子設備及存儲介質。
2、一方面，本申請提供一種表單數據處理方法，包括：
3、獲取用戶對目標表單輸入的表單編輯信息，所述目標表單
4、根據所述表單編輯信息，所述表單父組件通知目標表單子組件更新內部狀態數據，所述目標表單子組件為至少一個所述表單子組件中的其中一個；
5、將更新后的所述內部狀態數據存儲至預設dom節點中；
6、從所述預設dom節點中獲取更新后的所述內部狀態數據；
7、根據更新后的所述內部狀態數據，對所述目標表單進行更新。
8、在本申請一種可能的實現方式中，所述根據所述表單編輯信息，所述表單父組件通知所述目標表單子組件更新內部狀態數據，包括：
9、當監聽到用戶對所述目標表單輸入的所述表單編輯信息時，觸發表單編輯事件；
10、通過所述表單父組件發送所述表單編輯事件至預設事件總線中，所述表單編輯事件在所述預設事件總線中以隊列形式存儲；
11、通過所述目標表單子組件從所述預設事件總線中接收所述表單編輯事件，以通知所述目標表單子組件更新內部狀態數據。
12、在本申請一種可能的實現方式中，在所述根據所述表單編輯信息，所述表單父組件通知目標表單子組件更新內部狀態數據之后，所述方法還包括：
13、當所述目標表單子組件接收所述表單編輯事件時，將所述表單編輯事件對應的所述表單編輯信息更新到所述目標表單子組件的所述內部狀態數據中。
14、在本申請一種可能的實現方式中，在所述將更新后的所述內部狀態數據存儲至預設dom節點中之后，所述方法還包括：
15、對所述預設dom節點中更新后的所述內部狀態數據創建唯一鍵值。
16、在本申請一種可能的實現方式中，所述從所述預設dom節點中獲取更新后的所述內部狀態數據，包括：
17、根據所述唯一鍵值，從所述預設dom節點中獲取所述更新后的所述內部狀態數據。
18、在本申請一種可能的實現方式中，所述根據更新后的所述內部狀態數據，對所述目標表單進行更新，包括：
19、根據所述內部狀態數據，確定所述目標表單是否有元素值發生變化，以及
20、若確定所述目標表單有元素值發生變化，觸發所述目標表單自身的事件處理函數對所述目標表單的元素值進行更新。
21、在本申請一種可能的實現方式中，在所述根據更新后的所述內部狀態數據，對所述目標表單進行更新之后，所述方法還包括：
22、重置所述表單父組件和至少一個所述表單子組件的狀態。
23、另一方面，本申請提供一種表單數據處理裝置，所述裝置包括：
24、獲取模塊，用于獲取用戶對目標表單輸入的表單編輯信息，所述目標表單關聯有表單父組件和所述表單父組件引用的至少一個表單子組件；
25、通知模塊，用于根據所述表單編輯信息，所述表單父組件通知目標表單子組件更新內部狀態數據，所述目標表單子組件為至少一個所述表單子組件中的其中一個；
26、存儲模塊，用于將更新后的所述內部狀態數據存儲至預設dom節點中；
27、消費模塊，用于從所述預設dom節點中消費更新后的所述內部狀態數據；
28、更新模塊，用于根據更新后的所述內部狀態數據，對所述目標表單進行更新。
29、另一方面，本申請還提供一種電子設備，所述電子設備包括：
30、一個或多個處理器；
31、存儲器；以及
32、一個或多個應用程序，其中所述一個或多個應用程序被存儲于所述存儲器中，并配置為由所述處理器執行以實現所述的表單數據處理方法。
33、另一方面，本申請還提供一種計算機可讀存儲介質，其上存儲有計算機程序，所述計算機程序被處理器進行加載，以執行所述的表單數據處理方法中的步驟。
34、本申請在用戶對目標表單輸入的表單編輯信息后，目標表單子組件更新內部狀態數據，并將更新后的內部狀態數據存儲至預設dom節點中，在需要更新后的內部狀態數據時，從預設dom節點獲取更新后的內部狀態數據，并根據更新后的內部狀態數據，對目標表單進行更新，因此，本申請通過上述方式解耦目標表單關聯的表單父組件與目標表單子組件之間的數據流向，相比于通過改變父組件狀態來更新子組件，以實現重新渲染的方式，本申請能夠降低表單子組件的重新渲染的次數，從而降低性能消耗，并減少表格組件渲染卡頓。
本文檔來自技高網...【技術保護點】
1.一種表單數據處理方法，其特征在于，包括：
2.如權利要求1所述的表單數據處理方法，其特征在于，所述根據所述表單編輯信息，所述表單父組件通知所述目標表單子組件更新內部狀態數據，包括：
3.如權利要求2所述的表單數據處理方法，其特征在于，在所述根據所述表單編輯信息，所述表單父組件通知目標表單子組件更新內部狀態數據之后，所述方法還包括：
4.如權利要求1所述的表單數據處理方法，其特征在于，在所述將更新后的所述內部狀態數據存儲至預設DOM節點中之后，所述方法還包括：
5.如權利要求4所述的表單數據處理方法，其特征在于，所述從所述預設DOM節點中獲取更新后的所述內部狀態數據，包括：
6.如權利要求1所述的表單數據處理方法，其特征在于，所述根據更新后的所述內部狀態數據，對所述目標表單進行更新，包括：
7.如權利要求1所述的表單數據處理方法，其特征在于，在所述根據更新后的所述內部狀態數據，對所述目標表單進行更新之后，所述方法還包括：
8.一種表單數據處理裝置，其特征在于，所述裝置包括：
9.一種
10.一種計算機可讀存儲介質，其特征在于，其上存儲有計算機程序，所述計算機程序被處理器進行加載，以執行權利要求1至7任一項所述的表單數據處理方法中的步驟。
...【技術特征摘要】
1.一種表單數據處理方法，其特征在于，包括：
2.如權利要求1所述的表單數據處理方法，其特征在于，所述根據所述表單編輯信息，所述表單父組件通知所述目標表單子組件更新內部狀態數據，包括：
3.如權利要求2所述的表單數據處理方法，其特征在于，在所述根據所述表單編輯信息，所述表單父組件通知目標表單子組件更新內部狀態數據之后，所述方法還包括：
4.如權利要求1所述的表單數據處理方法，其特征在于，在所述將更新后的所述內部狀態數據存儲至預設dom節點中之后，所述方法還包括：
5.如權利要求4所述的表單數據處理方法，其特征在于，所述從所述預設dom節點中獲取更新...
【專利技術屬性】
技術研發人員：葉志明，孫宇，胡典鋼，譚學文，唐淵，羅三，歐陽俊俊，詹禮嘉，
申請(專利權)人：順豐科技有限公司，
類型：發明
國別省市：
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。