React 性能优化技巧总结

本文将从 render 函数的角度总结 React App 的优化能力。必要提示的是，文中将涉及 React 16.8.2 版本的内容(也即 Hooks），因此请至少相识 useState 以担保食用结果。

正文开始。

当我们接头 React App 的机能题目时，组件的 渲染 速率是一个重要题目。在进入到详细优化提议之前，我们先要领略以下 3 点：

1. 当我们在说「render」时，我们在说什么？
2. 什么时辰会执行「render」？
3. 在「render」进程中会产生什么？

这部门涉及 reconciliation 和 diffing 的观念，虽然官方文档在 这里 。

当我们在说「render」时，我们在说什么？

这个题目着实写过 React 的人城市知道，这里再简朴说下：

在 class 组件中，我们指的是 render 要领：

class Foo extends React.Component {  
 render() {  
   return <h1> Foo </h1>;  
 }  
}  

在函数式组件中，我们指的是函数组件自己：

function Foo() {  
  return <h1> Foo </h1>;  
}  

什么时辰会执行「render」？

render 函数会在两种场景下被挪用：

1. 状态更新时

a. 担任自 React.Component 的 class 组件更新状态时

import React from "react";  
import ReactDOM from "react-dom";  
  
class App extends React.Component {  
  render() {  
    return <Foo />;  
  }  
}  
  
class Foo extends React.Component {  
  state = { count: 0 };  
  
  increment = () => {  
    const { count } = this.state;  
  
    const newCount = count < 10 ? count + 1 : count;  
  
    this.setState({ count: newCount });  
  };  
  
  render() {  
    const { count } = this.state;  
    console.log("Foo render");  
  
    return (  
      <div>  
        <h1> {count} </h1>  
        <button onClick={this.increment}>Increment</button>  
      </div>  
    );  
  }  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

可以看到，代码中的逻辑是我们点击就会更新 count，到 10 往后，就会维持在 10。增进一个 console.log，这样我们就可以知道 render 是否被挪用了。从执行功效可以知道，纵然 count 到了 10 以上，render 如故会被挪用。

总结：担任了 React.Component 的 class 组件，纵然状态没变革，只要挪用了setState 就会触发 render。

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

我们用函数实现沟通的组件，虽然由于要有状态，我们用上了 useState hook：

import React, { useState } from "react";  
import ReactDOM from "react-dom";  
  
class App extends React.Component {  
  render() {  
    return <Foo />;  
  }  
}  
  
function Foo() {  
  const [count, setCount] = useState(0);  
  
  function increment() {  
    const newCount = count < 10 ? count + 1 : count;  
    setCount(newCount);  
  }  
  
  console.log("Foo render");  
    
  return (  
    <div>  
      <h1> {count} </h1>  
      <button onClick={increment}>Increment</button>  
    </div>  
  );  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

（编辑：河北网）

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