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 时不行能知道它是什么。奈何才气办理这个困难呢?

输入影象，可能简朴地称为缓存。 对付每个独一值，建设并缓存一个函数; 对付未来对该独一值的全部引用，返回先前缓存的函数。

（编辑：湖南网）

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