Web性能优化：缓存React事件来提高性能

这就是我将怎样实现上面的示例。

class SomeComponent extends React.PureComponent { 
  // SomeComponent的每个实例都有一个单击处理赏罚措施缓存，这些处理赏罚措施是惟一的。 
 
  clickHandlers = {}; 
 
  // 在给定独一标识符的环境下天生或返回单击处理赏罚措施。 
  getClickHandler(key) { 
    // 假如不存在此独一标识符的单击处理赏罚措施，则建设 
    if (!Object.prototype.hasOwnProperty.call(this.clickHandlers, key)) { 
      this.clickHandlers[key] = () => alert(key); 
    } 
    return this.clickHandlers[key]; 
  } 
  render() { 
    return ( 
      <ul> 
        {this.props.list.map(listItem => 
          <li key={listItem.text}> 
            <Button onClick={this.getClickHandler(listItem.text)} /> 
          </li> 
        )} 
      </ul> 
    ); 
  } 
} 

数组中的每一项都通过 getClickHandler 要领转达。所述要领将在第一次行使值挪用它时建设该值的独一函数，然后返回该函数。往后对该要领的全部挪用都不会建设一个新函数;相反，它将返回对先前在内存中建设的函数的引用。

因此，从头渲染 SomeComponent 不会导致按钮从头渲染。相同地，相似的，在 list 内里添加项也会为按钮动态地建设变乱监听器。

当多个处理赏罚措施由多个变量确按时，也许必要行使本身的智慧才智为每个处理赏罚措施天生独一标识符，可是在遍历内里，没有比每个 JSX 工具天生的 key 更简朴得了。

这里行使 index 作为独一标识会有个告诫：假如列表变动次序或删除项目，也许会获得错误的功效。

当数组从 ['soda'，'pizza'] 变动为 ['pizza'] 而且已经缓存了变乱监听器为 listeners[0] = () => alert('soda') ，您会发明 用户点击提示苏吊水的披萨的now-index-0按钮。 但点击 index 为 0 的按钮 pizza 的时辰，它将会弹出 soda。这也是 React 提议不要行使数组的索引作为 key 的缘故起因。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!