對輸入變化的反應工作很慢

對於React，我很新，在輸入字段上使用onChange方法遇到問題，該輸入字段在大數據分析人員中生成。
由於parentcomponent是數據的所有者，我向子組件（dataTableComponent）提供handleUpdate()方法。
由於React必須重新渲染整個數據網格，輸入onChange非常緩慢。
我該如何做得更好？有沒有辦法只更新一個修改過的行。或者我的反應有什麼問題？對輸入變化的反應工作很慢

摘要：ParentComponent包含一個包含傳遞給childComponent的對象的數組。 childComponent創建一個<table>元素，其數據對象屬性爲列。一列是可編輯的，並顯示爲<input>標記。這個標籤有一個onChangehandler指向一個父函數傳遞的函數。所以父母處理更新併爲此重新列出整個列表。對我來說很明顯，這一定是緩慢的。但我怎麼能做得更好？

來源

2016-07-01 Marc

我已經試過了像@ Piyush.kappor說。但我一直認爲這不好。將日期保存爲冗餘。

現在我終於找到了解決方案。

我離開它喜歡它是：

的應用程序包含對象的列表，並處理不斷變化的輸入。這將是非常緩慢的，但現在我已經添加了一個shouldComponentUpdate()方法。因此，每一行都會檢查是否需要更新。如果沒有，它不會。所以我沒有更多的滯後，但數據仍然在一個地方處理。

來源

2016-07-07 13:55:17 Marc

我之前遇到過這個問題。

將你的每一行作爲一個單獨的組件，並要求父組件傳遞道具。在行組件的構造函數中，存儲狀態的道具，現在只是玩狀態，不要調用父處理程序來更新。

如果你希望你的所有輸入字段更新回來，在父組件使用的裁判來提取數據

例子：

Class Parent extends React.component { 
    render (
      this.data.map(function(value) { 
       return <Row ref={value+index} data={value}/> 
      }) 
    } 
} 

Class Row extends React.Component { 
    constructor() { 
     super(props); 
     this.state = { 
      value: this.props.data 
     } 
    } 
    render() { 
    <input value={this.state.value}/> 
    } 
}

來源

2016-07-01 06:24:42

你可以使用一個高階組件，具有該功能的道具，以後你聲明的功能，並通過您的信息上，而不是，這樣你可以避免使用狀態和使用的道具完全相反，你用你的功能時，你需要它 –

我們不應該避免混合道具和狀態？有了您的解決方案，我將有數據redundat？ – Marc

這之後是在構造一個初始化的時間，你將只設置狀態 –

對輸入變化的反應工作很慢

回答

相關問題