Javascript React.js输入性能

我尝试在页面上设置一些带有EN值（左列输入）和RU值（右列输入）的输入。带有EN值的输入是只读的。可以更改具有RU值的输入

更改后，我可以将新值发布到服务器

我不明白的是： 在scripts/react/components/InputsRow.js:61文件中，我有一个DIV元素，并且都是OK。

render:function（）{
var结果=this.state.data，
keys=result.keys，
值=结果。值，
locale\u id=result.locale\u id，
project\u id=result.project\u id，
version\u id=result.version\u id，
self=这个；
log（'render'）；
var inputNodes=keys.map&&keys.map（函数（项，键索引）{
var keyId=item.id；
返回(
{/**/}
{item.name}
);
});
返回(
{inputNodes}
)

},

如果您试图取消注释第60行和注释第61行-您会遇到“RU输入”问题。当你输入任何符号时，它的工作速度会很慢

我有一份git回购协议，用于解决此问题：

---

p.S.“RU输入”=右列。

在我的例子中，是chrome错误（？）。 我每晚都下载chrome，而且性能没有问题。在最后一次狩猎中尝试同样的方法-再也没有问题了。 我尝试禁用所有扩展，并尝试禁用此输入上的所有引导样式-不会发生任何情况

（稳定）Chrome 43.0.2357.130（64位）存在性能问题

（每晚）Chrome 45.0.2452.0金丝雀（64位）-无问题

---

（稳定）Safari 8.0.7（10600.7.12）-没有问题

您所说的EN值和RU值是什么意思？英语和俄语但这只是猜测而已。左输入-EN，右输入-RU@Crob-En value=left column（输入值为英语值），Ru value=right column（输入值为俄语值）我并不是说这是核心问题，但我可以在Github上看到，每次发送操作时，您的数据存储（

InputsRowStore.js

）都会发生变化。您应该在每个操作回调（您的开关案例）中发出更改。另外，第61行中的

sendItem={self.sendItem}

似乎有点不对劲……我高度怀疑这是一个Chrome bug。。。最有可能的问题是您发送/订阅事件或如何使用绑定。如果你还没有，请仔细阅读控制输入：@DanaWoodman，好吧，如果不是chrome bug，为什么canary chrome和safari——效果很好？我试图用更多的时间找到解决方案，阅读所有关于受控和非受控输入的内容。当然，我可能会犯错误，但在其他浏览器（或浏览器版本）中做得很好…一般来说，在指向像Chrome这样的受良好支持的代码库之前，最好假设您的代码是错误的。我将尝试完全删除示例代码中的所有内容，直到失败仍然发生。如果您重新发布最简单的测试用例，我们可以帮助您排除故障。不相关的，您不需要在jQuery中包装

React.render

调用。@DanaWoodman，这是最简单的测试；）这是我的第一个完整示例问题——github repo；）好的，这个代码可能不是最好的，但是这个例子中的问题只发生在当前的chrome中。

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>
)