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

（编辑：惠州站长网）

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