React 性能优化技巧总结

我们可以留意到，当状态值不再改变之后，render 的挪用就遏制了。

总结：对函数式组件来说，状态值改变时才会触发 render 函数的挪用。

2. 父容器从头渲染时

import React from "react";  
import ReactDOM from "react-dom";  
  
class App extends React.Component {  
  state = { name: "App" };  
  render() {  
    return (  
      <div className="App">  
        <Foo />  
        <button onClick={() => this.setState({ name: "App" })}>  
          Change name  
        </button>  
      </div>  
    );  
  }  
}  
  
function Foo() {  
  console.log("Foo render");  
  
  return (  
    <div>  
      <h1> Foo </h1>  
    </div>  
  );  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

只要点击了 App 组件内的 Change name 按钮，就会从头 render。并且可以留意到，不管 Foo 详细实现是什么，Foo 城市被从头渲染。

总结：无论组件是担任自 React.Component 的 class 组件照旧函数式组件，一旦父容器从头 render，组件的 render 城市再次被挪用。

在「render」进程中会产生什么？

只要 render 函数被挪用，就会有两个步调按次序执行。这两个步调很是重要，领略了它们才好知道怎样去优化 React App。

Diffing

在此步调中，React 将新挪用的 render 函数返回的树与旧版本的树举办较量，这一步是 React 抉择怎样更新 DOM 的须要步调。固然 React 行使高度优化的算法执行此步调，但如故有必然的机能开销。

Reconciliation

基于 diffing 的功效，React 更新 DOM 树。这一步由于必要卸载和挂载 DOM 节点同样存在很多机能开销。

Tip #1：审慎分派 state 以停止不须要的 render 挪用

我们以下面为例，个中 App 会渲染两个组件：

CounterLabel  
List  

import React, { useState } from "react";  
import ReactDOM from "react-dom";  
  
const ITEMS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];  
  
function App() {  
  const [count, setCount] = useState(0);  
  const [items, setItems] = useState(ITEMS);  
  return (  
    <div className="App">  
      <CounterLabel count={count} increment={() => setCount(count + 1)} />  
      <List items={items} />  
    </div>  
  );  
}  
  
function CounterLabel({ count, increment }) {  
  return (  
    <>  
      <h1>{count} </h1>  
      <button onClick={increment}> Increment </button>  
    </>  
  );  
}  
  
function List({ items }) {  
  console.log("List render");  
  
  return (  
    <ul>  
      {items.map((item, index) => (  
        <li key={index}>{item} </li>  
      ))}  
    </ul>  
  );  
}  
  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);  

执行上面代码可知，只要父组件 App 中的状态被更新， CounterLabel 和 List 就城市更新。

（编辑：湖南网）

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