设为首页 - 加入收藏 永嘉网 (http://www.uskba.org)- 永嘉站长最喜爱的站长资讯网站,关注站长、SEO、推广、建站、运营!
热搜: 开始 数据中心 发布 出炉
当前位置: 首页 > 建站 > 正文

React 性能优化技巧总结

发布时间:2019-02-28 08:42 所属栏目:[建站] 来源:落在起风的地方
导读:本文将从 render 函数的角度总结 React App 的优化技巧。需要提醒的是,文中将涉及 React 16.8.2 版本的内容(也即 Hooks),因此请至少了解 useState 以保证食用效果。 正文开始。 当我们讨论 React App 的性能问题时,组件的渲染速度是一个重要问题。在进

React 性能优化技巧总结

本文将从 render 函数的角度总结 React App 的优化技巧。需要提醒的是,文中将涉及 React 16.8.2 版本的内容(也即 Hooks),因此请至少了解 useState 以保证食用效果。

正文开始。

当我们讨论 React App 的性能问题时,组件的 渲染 速度是一个重要问题。在进入到具体优化建议之前,我们先要理解以下 3 点:

  1. 当我们在说「render」时,我们在说什么?
  2. 什么时候会执行「render」?
  3. 在「render」过程中会发生什么?
解读 render 函数

这部分涉及 reconciliation 和 diffing 的概念,当然官方文档在 这里 。

当我们在说「render」时,我们在说什么?

这个问题其实写过 React 的人都会知道,这里再简单说下:

在 class 组件中,我们指的是 render 方法:

  1. class Foo extends React.Component {  
  2.  render() {  
  3.    return <h1> Foo </h1>;  
  4.  }  
  5. }  

在函数式组件中,我们指的是函数组件本身:

  1. function Foo() {  
  2.   return <h1> Foo </h1>;  
  3. }  

什么时候会执行「render」?

render 函数会在两种场景下被调用:

1. 状态更新时

a. 继承自 React.Component 的 class 组件更新状态时

  1. import React from "react";  
  2. import ReactDOM from "react-dom";  
  3.   
  4. class App extends React.Component {  
  5.   render() {  
  6.     return <Foo />;  
  7.   }  
  8. }  
  9.   
  10. class Foo extends React.Component {  
  11.   state = { count: 0 };  
  12.   
  13.   increment = () => {  
  14.     const { count } = this.state;  
  15.   
  16.     const newCount = count < 10 ? count + 1 : count;  
  17.   
  18.     this.setState({ count: newCount });  
  19.   };  
  20.   
  21.   render() {  
  22.     const { count } = this.state;  
  23.     console.log("Foo render");  
  24.   
  25.     return (  
  26.       <div>  
  27.         <h1> {count} </h1>  
  28.         <button onClick={this.increment}>Increment</button>  
  29.       </div>  
  30.     );  
  31.   }  
  32. }  
  33.   
  34. const rootElement = document.getElementById("root");  
  35. ReactDOM.render(<App />, rootElement);  

可以看到,代码中的逻辑是我们点击就会更新 count,到 10 以后,就会维持在 10。增加一个 console.log,这样我们就可以知道 render 是否被调用了。从执行结果可以知道,即使 count 到了 10 以上,render 仍然会被调用。

总结:继承了 React.Component 的 class 组件,即使状态没变化,只要调用了setState 就会触发 render。

b. 函数式组件更新状态时

我们用函数实现相同的组件,当然因为要有状态,我们用上了 useState hook:

  1. import React, { useState } from "react";  
  2. import ReactDOM from "react-dom";  
  3.   
  4. class App extends React.Component {  
  5.   render() {  
  6.     return <Foo />;  
  7.   }  
  8. }  
  9.   
  10. function Foo() {  
  11.   const [count, setCount] = useState(0);  
  12.   
  13.   function increment() {  
  14.     const newCount = count < 10 ? count + 1 : count;  
  15.     setCount(newCount);  
  16.   }  
  17.   
  18.   console.log("Foo render");  
  19.     
  20.   return (  
  21.     <div>  
  22.       <h1> {count} </h1>  
  23.       <button onClick={increment}>Increment</button>  
  24.     </div>  
  25.   );  
  26. }  
  27.   
  28. const rootElement = document.getElementById("root");  
  29. ReactDOM.render(<App />, rootElement);  

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章