Question

我有一个React + Redux应用程序并使用webpack运行。目前在我的应用程序中，我有一些由我开发的小组件。在某些情况下，我们应该使用数百个数据渲染Grid类型的组件。由于某些原因，我不能使用分页。当用户点击我的网格线项目上的编辑按钮时，这将打开一个小对话框。在该窗口中，我有一个输入文本元素，如果用户为每个键编辑输入元素值，则会导致我的所有页面都包含所有数据和组件。因此，对于每个按键，存在大约1秒的滞后。我怎么处理这个？

我没有使用和DevTools 我的问题是渲染我的组件需要时间。但在这种情况下，我认为这是正常的。我无法从输入中删除onChange，因为它将变为readonly。我曾尝试使用defaultValue，但我会在渲染我的组件后填充我的道具，因为这些数据来自api。

代码

＆＃13;

  
    getEditSubWindow(){ 
            
        var gridData = this.props.stocks.filter(s=>{ return s.isSelected; });
           
        var windowCommandButtons=[
          {text:'Cancel', className:'cancel', onClick:null },
          {text:'Save', className:'save', onClick:null }
        ];
      
        return (
            <Window 
                header="Details"   
                windowButtons={['close']} 
                canDock={false}
                isDialog={true}
                onClose={::this.hideEditSubWindow}
                 >
                <Panel header="Details">
                  
                  <input type="text" placeholder="Information" value={this.props.currentData.name} onChange={::this.setInformation} onBlur={::this.saveInformation} /> 
          
                  <input type="text" placeholder="Information" defaultValue={this.props.currentData.name}  onBlur={::this.saveInformation} /> 
          
          
                </Panel> 
                
                {this.getGrid(gridData)}
            </Window> );
    }
    
    
    
     
    setInformation(event){  
      this.props.currentData.name= event.target.value;
      this.props.actions.informationChanged(this.props.currentData, event.target.value);  
    }
  


    saveInformation(event){
      this.props.actions.saveInformation(this.props.currentData, event.target.value);
    }
    


    render(){
      
      return   (
         <div className="stocks">
            {this.getGrid(this.props.stocks)}
            {this.state.showEditSubWindow?this.getEditSubWindow():null}
         </div>
      )
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    MY ACTIONS
    
export function requestStockList() {
    return (dispatch) => { 
      stock.getAll()
        .then(data => {dispatch(receiveStockList(data.stock));  } )
        .catch(error => { console.log(error) }); 
    }
}
  
export function saveInformation(info) {
    return (dispatch) => { 
      information.save(info)
        .then(data => {dispatch(receiveCurrentData(data.information));  } )
        .catch(error => { console.log(error) }); 
    }
}
export function informationChanged() {
    return (dispatch) => { 
      dispatch(receiveCurrentData(data.stock)); 
    }
}
  
export function receiveStockList(stockList) {
  return {
    type: RECEIVE_STOCKLIST,
    stockList
  };
}

export function receiveCurrentData(currentData) {
  return {
    type: CURRENTDATA_CHANGED,
    currentData
  };
}


    
  
  
  
  
  
  
  
  
  
  
  
  
  
  MY REDUCER
  
const initialState =  { 
  stockList:[], 
  currentData:{}
};

export default function StockReducer(state = initialState, action) {
   
  
     var newState = Object.assign({}, state);
  switch (action.type) {
    
    case actions.RECEIVE_STOCKLIST: 
        newState.stockList=action.stockList; 
      break;    
    case actions.CURRENTDATA_CHANGED: 
        newState.currentData=action.currentData;  
      break;    
      default:
      break;  
      
  }
    
  return newState;
  
}

＆＃13;

React输入onChange使得所有组件都工作得很慢

0 个答案: