React 組件的狀態(tài)下移和內(nèi)容提升的操作方法

更新時(shí)間：2022年11月26日 15:06:41 作者：前端小二哥

這篇文章主要介紹了React 組件的狀態(tài)下移和內(nèi)容提升,通過代碼講解了渲染性能的組件問題結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下

前言

本專欄的另一篇文章，講到了 useMemo 有一定的開銷，不能濫用，本篇文章講解兩個(gè)簡單實(shí)用的優(yōu)化組件渲染性能的方法：

狀態(tài)下移
內(nèi)容提升

在講解這兩種方法之前，我們需要先手動(dòng)創(chuàng)建一個(gè)有嚴(yán)重渲染性能的組件，如下所示：

import { useState } from 'react';

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

function ExpensiveTree() {
  let now = performance.now();
  while (performance.now() - now < 100) {
    // Artificial delay -- do nothing for 100ms
  }
  return <p>I am a very slow component tree.</p>;
}

很顯然，當(dāng) App 組件內(nèi)的狀態(tài)發(fā)生了改變，ExpensiveTree 組件會(huì) re-render，事實(shí)上 ExpensiveTree 組件的 props、state 并未發(fā)生改變，這并不是我們期望的結(jié)果，下面將提供兩種簡單的方法，提升組件渲染的性能；

狀態(tài)下移

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

我們可以看到以上 ExpensiveTree 組件并不依賴 App 組件內(nèi)部的狀態(tài)，因此我們是否可以考慮，將依賴 color 的元素抽離到一個(gè)依賴 color 的組件中呢？
下面是實(shí)踐后的代碼：

export default function App() {
  return (
    <>
      <Form />
      <ExpensiveTree />
    </>
  );
}

function Form() {
  let [color, setColor] = useState('red');
  return (
    <>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
    </>
  );
}

此時(shí)，將依賴 color 的元素提取到了 Form 組件中，F(xiàn)orm 組件內(nèi)部的狀態(tài)不再影響 ExpensiveTree 組件的渲染，問題便得到了解決

內(nèi)容提升

export default function App() {
  let [color, setColor] = useState('red');
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p>Hello, world!</p>
      <ExpensiveTree />
    </div>
  );
}

以上情況是高開銷組件 ExpensiveTree 的父節(jié)點(diǎn)依賴 color，此時(shí)顯然狀態(tài)下移是行不通的，但是還有另外一種辦法：

export default function App() {
  return (
    <ColorPicker>
      <p>Hello, world!</p>
      <ExpensiveTree />
    </ColorPicker>
  );
}

function ColorPicker({ children }) {
  let [color, setColor] = useState("red");
  return (
    <div style={{ color }}>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      {children}
    </div>
  );
}

此時(shí)和狀態(tài)提升是完全相反的，將依賴 color 的元素提升到了 ColorPicker 組件中，而不依賴 color 的元素以 children prop 的形式傳入了 ColorPicker ，當(dāng)組件內(nèi)部的狀態(tài)改變時(shí)：