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

在这种情况下，SomeComponent 的每个实例都有一个不同的警告框。 Button 的click事件侦听器需要独立于 SomeComponent。 通过传递 createAlertBox 方法，它就和 SomeComponent 重新渲染无关了，甚至和 message 这个属性是否修改也没有关系。createAlertBox 内存中的地址不会改变，这意味着 Button 不需要重新渲染，节省了处理时间并提高了应用程序的渲染速度

但如果函数是动态的呢?

修复(高级)

这里有个非常常见的使用情况，在简单的组件里面，有很多独立的动态事件监听器，例如在遍历数组的时候：

class SomeComponent extends React.PureComponent { 
  render() { 
    return ( 
      <ul> 
        {this.props.list.map(listItem => 
          <li key={listItem.text}> 
            <Button onClick={() => alert(listItem.text)} /> 
          </li> 
        )} 
      </ul> 
    ); 
  } 
} 

在本例中，有一个可变数量的按钮，生成一个可变数量的事件监听器，每个监听器都有一个独特的函数，在创建 SomeComponent 时不可能知道它是什么。怎样才能解决这个难题呢?

输入记忆，或者简单地称为缓存。 对于每个唯一值，创建并缓存一个函数; 对于将来对该唯一值的所有引用，返回先前缓存的函数。

（编辑：惠州站长网）

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