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 的原因。

（编辑：揭阳站长网）

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