React.js输入性能

Question

I try to set up some inputs on page with EN value (left column inputs) and RU value (right column inputs). Input with EN value is read-only. Input with RU value can be changed.

After change I can POST my new value to server.

What I don't understand: in file scripts/react/components/InputsRow.js:61 I have a DIV element, and all OK. Github link

render: function() {
var result = this.state.data,
    keys = result.keys,
    values = result.values,
    locale_id = result.locale_id,
    project_id = result.project_id,
    version_id = result.version_id,
    self = this;

console.log('<InputsRow /> render');

var inputNodes = keys.map && keys.map(function(item, keyIndex) {
  var keyId = item.id;
  return (
    <div className="row" key={keyIndex} className={'inputs-row ' + (item.disabled ? 'inputs-row_disabled':'')}>
      <div className="col-md-12">
        <div className="col-md-6 form-group">
          <div className="input-group">
            <div className="input-group-addon">
              <i className="fa fa-info fa-fw"></i>
            </div>
            {/*<input className="key-input form-control" value={item.name} onClick={self.onInputKeyClick.bind(self,item)} readOnly />*/}
            <div className="key-input form-control">{item.name}</div>
          </div>
        </div>
        <LocalValues localObj={values[keyId]} locale_id={locale_id} project_id={project_id} sendItem={self.sendItem} key_id= {keyId}/>
      </div>
    </div>
  );
});
return (
  <div>
    <div>{inputNodes}</div>
  </div>
)

},

If you try to uncomment line 60 and comment line 61 - you get a problem with 'RU inputs'. When you typed any symbols - it's will work so slowly...

I have a git repo for best declaration this problem:

https://github.com/maxfarseer/react-inputs

PS 'RU inputs' = right column.

Answer 1

In my case it was chrome bug (?). I download chrome nightly and haven't problems with perfomance. Try to do same in last Safari - no problems again. I try to disable all extensions and try to disable all bootstrap styles on this input - nothings happen.

(stable) Chrome 43.0.2357.130 (64-bit) has perfomance problem

(nightly) Chrome 45.0.2452.0 canary (64-bit) - no problems

(stable) Safari 8.0.7 (10600.7.12) - no problems