React 性能优化技巧总结

而对付转达箭头函数的场景，我们可以代以只独一声明过一次的函数，从而总可以拿到沟通的引用，如下所示：

class App extends React.Component{  
  constructor(props) {  
    this.doSomethingMethod = this.doSomethingMethod.bind(this);      
  }  
  doSomethingMethod () { // do something}  
    
  render() {  
    return <Bar onSomething={this.doSomethingMethod} />  
  }  
}  

Tip #5：节制更新

照旧那句话，任何要领总有其合用范畴。

第三条提议固然处理赏罚了不须要的更新题目，但我们也不总能行使它。

而第四条，在某些环境下我们并不能拆分工具，假如我们转达了某种嵌套确实伟大的数据布局，那我们也很难将其拆分隔来。

不只云云，我们也不总能转达只声明白一次的函数。好比在我们的例子中，假如 App 是个函数式组件，生怕就不能做到这一点了（在 class 组件中，我们可以用 bind 可能类内箭头函数来担保 this 的指向及独一声明，而在函数式组件中则也许会有些题目）。

荣幸的是， 无论是 class 组件照旧函数式组件，我们都有步伐节制浅较量的逻辑 。

在 class 组件中，我们可以行使生命周期钩子 shouldComponentUpdate(prevProps, prevState)来返回一个布尔值，当返回值为 true 时才会触发 render。

而假如我们行使 React.memo，我们可以转达一个较量函数作为第二个参数。

留意！ React.memo 的第二参数（较量函数）和 shouldComponentUpdate 的逻辑是相反的，只有当返回值为 false 的时辰才会触发 render。 参考文档 。

const Bar = React.memo(  
  function Bar({ name: { first, last } }) {  
    console.log("update");  
    return (  
      <h1>  
        {first} {last}  
      </h1>  
    );  
  },  
  (prevProps, newProps) =>  
    prevProps.name.first === newProps.name.first &&  
    prevProps.name.last === newProps.name.last  
);  

尽量这条提议是可行的，但我们仍要留意 较量函数的机能开销 。假如 props 工具过深，反而会耗损不少的机能。

上述场景仍不足全面，但几多能带来一些开导性思索。虽然在机能方面，我们尚有很多其他的题目必要思量，但遵守上述的准则仍能带来相等不错的机能晋升。

【编辑保举】

1. AWS 开源 SageMaker，辅佐开拓职员优化呆板进修模子
2. 你与数据科学家只差这 26 条 Python 能力
3. 在将来和AI争夺事变的16个适用能力
4. 互联网公司口中的架构优化、计谋调解？着实是裁人差异姿势
5. GitHub 连任趋势榜数日 5k+ star 的 Nginx 机能优化清算

（编辑：湖南网）

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