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

每次渲染时，都会在内存中创建一个新函数(因为它是在 render 函数中创建的)，并将对内存中新地址的新引用传递给<Button />，虽然输入完全没有变化，该 Button 组件还是会重新渲染。

修复

如果函数不依赖于的组件(没有 this 上下文)，则可以在组件外部定义它。 组件的所有实例都将使用相同的函数引用，因为该函数在所有情况下都是相同的。

const createAlertBox = () => alert('!'); 
 
class SomeComponent extends React.PureComponent { 
 
  get instructions() { 
    if (this.props.do) { 
      return 'Click the button: '; 
    } 
    return 'Do NOT click the button: '; 
  } 
 
  render() { 
    return ( 
      <div> 
        {this.instructions} 
        <Button onClick={createAlertBox} /> 
      </div> 
    ); 
  } 
} 

和前面的例子相反，createAlertBox 在每次渲染中仍然有着有相同的引用，因此按钮就不会重新渲染了。

虽然 Button 是一个小型，快速渲染的组件，但你可能会在大型，复杂，渲染速度慢的组件上看到这些内联定义，它可能会让你的 React 应用程序陷入囧境，所以最好不要在 render 方法中定义这些函数。

如果函数确实依赖于组件，以至于无法在组件外部定义它，你可以将组件的方法作为事件处理传递过去:

class SomeComponent extends React.PureComponent { 
 
  createAlertBox = () => { 
    alert(this.props.message); 
  }; 
 
  get instructions() { 
    if (this.props.do) { 
      return 'Click the button: '; 
    } 
    return 'Do NOT click the button: '; 
  } 
 
  render() { 
    return ( 
      <div> 
        {this.instructions} 
        <Button onClick={this.createAlertBox} /> 
      </div> 
    ); 
  } 
} 

在这种情况下，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 时不可能知道它是什么。怎样才能解决这个难题呢?

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

（编辑：揭阳站长网）

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