React 性能优化技巧总结(2)

我们可以注意到，当状态值不再改变之后，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 就都会更新。

（编辑：ASP站长网）