天天看點
傳回

React 中的重新渲染

作者：阿裡終端技術

作者：梁瑞鋒(曉玉)

緣起

React 重新渲染，指的是在類函數中，會重新執行 render 函數，類似 Flutter 中的 build 函數，函數元件中，會重新執行這個函數

React 元件在元件的狀态 state 或者元件的屬性 props 改變的時候，會重新渲染，條件簡單，但是實際上稍不注意，會引起災難性的重新渲染

類元件

為什麼拿類元件先說，怎麼說呢，更好了解？還有前幾年比較流行的一些常見面試題

React 中的 setState 什麼時候是同步的，什麼時候是異步的
React setState 怎麼擷取最新的 state
以下代碼的輸出值是什麼，頁面展示是怎麼變化的 
test = () => {
    // s1 = 1
    const { s1 } = this.state;
    this.setState({ s1: s1 + 1});
    this.setState({ s1: s1 + 1});
    this.setState({ s1: s1 + 1});
    console.log(s1)
  };

  render() {
    return (
      <div>
        <button onClick={this.test}>按鈕</button>
        <div>{this.state.s1}</div>
      </div>
    );
  }
看到這些類型的面試問題，熟悉 React 事務機制的你一定能答出來，畢竟不難嘛，哈？你不知道 React 的事務機制？百度|谷歌|360|搜狗|必應 React 事務機制

React合成事件

在 React 元件觸發的事件會被冒泡到 document(在 react v17 中是 react 挂載的節點，例如 document.querySelector('#app'))，然後 React 按照觸發路徑上收集事件回調，分發事件。

  • 這裡是不是突發奇想，如果禁用了，在觸發事件的節點，通過原生事件禁止事件冒泡，是不是 React 事件就沒法觸發了？确實是這樣，沒法冒泡了，React 都沒法收集事件和分發事件了，注意這個冒泡不是 React 合成事件的冒泡。
  • 發散一下還能想到的另外一個點，React ，就算是在合成捕獲階段觸發的事件，依舊在原生冒泡事件觸發之後 
reactEventCallback = () => {
  // s1 s2 s3 都是 1
  const { s1, s2, s3 } = this.state;
  this.setState({ s1: s1 + 1 });
  this.setState({ s2: s2 + 1 });
  this.setState({ s3: s3 + 1 });
  console.log('after setState s1:', this.state.s1);
  // 這裡依舊輸出 1， 頁面展示 2，頁面僅重新渲染一次
};

<button
  onClick={this.reactEventCallback}
  onClickCapture={this.reactEventCallbackCapture}
>
  React Event
</button>
<div>
  S1: {s1} S2: {s2} S3: {s3}
</div>

定時器回調後觸發setState

定時器回調執行 setState 是同步的，可以在執行 setState 之後直接擷取，最新的值，例如下面代碼

timerCallback = () => {
  setTimeout(() => {
    // s1 s2 s3 都是 1
    const { s1, s2, s3 } = this.state;
    this.setState({ s1: s1 + 1 });
    console.log('after setState s1:', this.state.s1);
    // 輸出 2 頁面渲染 3 次
    this.setState({ s2: s2 + 1 });
    this.setState({ s3: s3 + 1 });
  });
};

異步函數後調觸發setState

異步函數回調執行 setState 是同步的，可以在執行 setState 之後直接擷取，最新的值，例如下面代碼

asyncCallback = () => {
  Promise.resolve().then(() => {
    // s1 s2 s3 都是 1
    const { s1, s2, s3 } = this.state;
    this.setState({ s1: s1 + 1 });
    console.log('after setState s1:', this.state.s1);
    // 輸出 2 頁面渲染 3 次
    this.setState({ s2: s2 + 1 });
    this.setState({ s3: s3 + 1 });
  });
};

原生事件觸發

原生事件同樣不受 React 事務機制影響，是以 setState 表現也是同步的

componentDidMount() {
  const btn1 = document.getElementById('native-event');
  btn1?.addEventListener('click', this.nativeCallback);
}

nativeCallback = () => {
  // s1 s2 s3 都是 1
  const { s1, s2, s3 } = this.state;
  this.setState({ s1: s1 + 1 });
  console.log('after setState s1:', this.state.s1);
  // 輸出 2 頁面渲染 3 次
  this.setState({ s2: s2 + 1 });
  this.setState({ s3: s3 + 1 });
};


<button id="native-event">Native Event</button>

setState修改不參與渲染的屬性

setState 調用就會引起就會元件重新渲染，即使這個狀态沒有參與頁面渲染，是以，請不要把非渲染屬性放 state 裡面，即使放了 state，也請不要通過 setState 去修改這個狀态，直接調用 this.state.xxx = xxx 就好，這種不參與渲染的屬性，直接挂在 this 上就好，參考下圖

// s1 s2 s3 為渲染的屬性，s4 非渲染屬性
state = {
  s1: 1,
  s2: 1,
  s3: 1,
  s4: 1,
};

s5 = 1;

changeNotUsedState = () => {
  const { s4 } = this.state;
  this.setState({ s4: s4 + 1 });
  // 頁面會重新渲染

  // 頁面不會重新渲染
  this.state.s4 = 2;
  this.s5 = 2;
};

<div>
  S1: {s1} S2: {s2} S3: {s3}
</div>;

隻是調用setState，頁面會不會重新渲染

幾種情況，分别是：

  • 直接調用 setState，無參數
  • setState，新 state 和老 state 完全一緻，也就是同樣的 state 
sameState = () => {
  const { s1 } = this.state;
  this.setState({ s1 });
  // 頁面會重新渲染
};

noParams = () => {
  this.setState({});
  // 頁面會重新渲染
};

這兩種情況，處理起來和普通的修改狀态的 setState 一緻，都會引起重新渲染的

多次渲染的問題

為什麼要提上面這些，仔細看，這裡提到了很多次渲染的 3 次，比較契合我們日常寫代碼的，異步函數回調，畢竟在定時器回調或者給元件綁定原生事件（沒事找事是吧？），挺少這麼做的吧，但是異步回調就很多了，比如網絡請求啥的，改變個 state 還是挺常見的，但是渲染多次，就是不行！不過利用 setState 實際上是傳一個新對象合并機制，可以把變化的屬性合并在新的對象裡面，一次性送出全部變更，就不用調用多次 setState 了

asyncCallbackMerge = () => {
  Promise.resolve().then(() => {
    const { s1, s2, s3 } = this.state;
    this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
    console.log('after setState s1:', this.state.s1);
    // 輸出 2 頁面渲染1次
  });
};

這樣就可以在非 React 的事務流中避開多次渲染的問題

測試代碼 

import React from 'react';

interface State {
  s1: number;
  s2: number;
  s3: number;
  s4: number;
}

// eslint-disable-next-line @iceworks/best-practices/recommend-functional-component
export default class TestClass extends React.Component<any, State> {
  renderTime: number;
  constructor(props: any) {
    super(props);
    this.renderTime = 0;
    this.state = {
      s1: 1,
      s2: 1,
      s3: 1,
      s4: 1,
    };
  }

  componentDidMount() {
    const btn1 = document.getElementById('native-event');
    const btn2 = document.getElementById('native-event-async');
    btn1?.addEventListener('click', this.nativeCallback);
    btn2?.addEventListener('click', this.nativeCallbackMerge);
  }

  changeNotUsedState = () => {
    const { s4 } = this.state;
    this.setState({ s4: s4 + 1 });
  };

  reactEventCallback = () => {
    const { s1, s2, s3 } = this.state;
    this.setState({ s1: s1 + 1 });
    this.setState({ s2: s2 + 1 });
    this.setState({ s3: s3 + 1 });
    console.log('after setState s1:', this.state.s1);
  };
  timerCallback = () => {
    setTimeout(() => {
      const { s1, s2, s3 } = this.state;
      this.setState({ s1: s1 + 1 });
      console.log('after setState s1:', this.state.s1);
      this.setState({ s2: s2 + 1 });
      this.setState({ s3: s3 + 1 });
    });
  };
  asyncCallback = () => {
    Promise.resolve().then(() => {
      const { s1, s2, s3 } = this.state;
      this.setState({ s1: s1 + 1 });
      console.log('after setState s1:', this.state.s1);
      this.setState({ s2: s2 + 1 });
      this.setState({ s3: s3 + 1 });
    });
  };
  nativeCallback = () => {
    const { s1, s2, s3 } = this.state;
    this.setState({ s1: s1 + 1 });
    console.log('after setState s1:', this.state.s1);
    this.setState({ s2: s2 + 1 });
    this.setState({ s3: s3 + 1 });
  };
  timerCallbackMerge = () => {
    setTimeout(() => {
      const { s1, s2, s3 } = this.state;
      this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
      console.log('after setState s1:', this.state.s1);
    });
  };
  asyncCallbackMerge = () => {
    Promise.resolve().then(() => {
      const { s1, s2, s3 } = this.state;
      this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
      console.log('after setState s1:', this.state.s1);
    });
  };
  nativeCallbackMerge = () => {
    const { s1, s2, s3 } = this.state;
    this.setState({ s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 });
    console.log('after setState s1:', this.state.s1);
  };
  sameState = () => {
    const { s1, s2, s3 } = this.state;
    this.setState({ s1 });
    this.setState({ s2 });
    this.setState({ s3 });
    console.log('after setState s1:', this.state.s1);
  };
  withoutParams = () => {
    this.setState({});
  };

  render() {
    console.log('renderTime', ++this.renderTime);
    const { s1, s2, s3 } = this.state;
    return (
      <div className="test">
        <button onClick={this.reactEventCallback}>React Event</button>
        <button onClick={this.timerCallback}>Timer Callback</button>
        <button onClick={this.asyncCallback}>Async Callback</button>
        <button id="native-event">Native Event</button>
        <button onClick={this.timerCallbackMerge}>Timer Callback Merge</button>
        <button onClick={this.asyncCallbackMerge}>Async Callback Merge</button>
        <button id="native-event-async">Native Event Merge</button>
        <button onClick={this.changeNotUsedState}>Change Not Used State</button>
        <button onClick={this.sameState}>React Event Set Same State</button>
        <button onClick={this.withoutParams}>
          React Event SetState Without Params
        </button>
        <div>
          S1: {s1} S2: {s2} S3: {s3}
        </div>
      </div>
    );
  }
}

函數元件

函數元件重新渲染的條件也和類元件一樣，元件的屬性 Props 群組件的狀态 State 有修改的時候，會觸發元件重新渲染，是以類元件存在的問題，函數元件同樣也存在，而且因為函數元件的 state 不是一個對象，情況就更糟糕

React合成事件 

const reactEventCallback = () => {
  // S1 S2 S3 都是 1
  setS1((i) => i + 1);
  setS2((i) => i + 1);
  setS3((i) => i + 1);
  // 頁面隻會渲染一次， S1 S2 S3 都是 2
};

定時器回調 

const timerCallback = () => {
  setTimeout(() => {
    // S1 S2 S3 都是 1
    setS1((i) => i + 1);
    setS2((i) => i + 1);
    setS3((i) => i + 1);
    // 頁面隻會渲染三次， S1 S2 S3 都是 2
  });
};

異步函數回調 

const asyncCallback = () => {
  Promise.resolve().then(() => {
    // S1 S2 S3 都是 1
    setS1((i) => i + 1);
    setS2((i) => i + 1);
    setS3((i) => i + 1);
    // 頁面隻會渲染三次， S1 S2 S3 都是 2
  });
};

原生事件 

useEffect(() => {
  const handler = () => {
    // S1 S2 S3 都是 1
    setS1((i) => i + 1);
    setS2((i) => i + 1);
    setS3((i) => i + 1);
    // 頁面隻會渲染三次， S1 S2 S3 都是 2
  };
  containerRef.current?.addEventListener('click', handler);
  return () => containerRef.current?.removeEventListener('click', handler);
}, []);

更新沒使用的狀态 

const [s4, setS4] = useState<number>(1);
const unuseState = () => {
  setS4((s) => s + 1);
  // s4 === 2 頁面渲染一次 S4 頁面上沒用到
};

總結

以上的全部情況，在 React Hook 中表現的情況和類元件表現完全一緻，沒有任何差别，但是也有表現不一緻的地方

不同的情況 設定同樣的State

在 React Hook 中設定同樣的 State，并不會引起重新渲染，這點和類元件不一樣，但是這個不一定的，引用 React 官方文檔說法

如果你更新 State Hook 後的 state 與目前的 state 相同時，React 将跳過子元件的渲染并且不會觸發 effect 的執行。（React 使用 Object.is 比較算法 來比較 state。）
需要注意的是，React 可能仍需要在跳過渲染前渲染該元件。不過由于 React 不會對元件樹的“深層”節點進行不必要的渲染，是以大可不必擔心。如果你在渲染期間執行了高開銷的計算，則可以使用 useMemo 來進行優化。

官方穩定有提到，新舊 State 淺比較完全一緻是不會重新渲染的，但是有可能還是會導緻重新渲染

// React Hook
const sameState = () => {
  setS1((i) => i);
  setS2((i) => i);
  setS3((i) => i);
  console.log(renderTimeRef.current);
  // 頁面并不會重新渲染
};

// 類元件中
sameState = () => {
  const { s1, s2, s3 } = this.state;
  this.setState({ s1 });
  this.setState({ s2 });
  this.setState({ s3 });
  console.log('after setState s1:', this.state.s1);
  // 頁面會重新渲染
};

這個特性存在，有些時候想要擷取最新的 state，又不想給某個函數添加 state 依賴或者給 state 添加一個 useRef，可以通過這個函數去或者這個 state 的最新值

const sameState = () => {
  setS1((i) => {
    const latestS1 = i;
    // latestS1 是目前 S1 最新的值，可以在這裡處理一些和 S1 相關的邏輯
    return latestS1;
  });
};

React Hook中避免多次渲染

React Hook 中 state 并不是一個對象，是以不會自動合并更新對象，那怎麼解決這個異步函數之後多次 setState 重新渲染的問題？

将全部state合并成一個對象 

const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });
setState((prevState) => {
  setTimeout(() => {
    const { s1, s2, s3 } = prevState;
    return { ...prevState, s1: s1 + 1, s2: s2 + 1, s3: s3 + 1 };
  });
});

參考類的的 this.state 是個對象的方法，把全部的 state 合并在一個元件裡面，然後需要更新某個屬性的時候，直接調用 setState 即可，和類元件的操作完全一緻，這是一種方案

使用useReducer

雖然這個 hook 的存在感确實低，但是多狀态的元件用這個來替代 useState 确實不錯

const initialState = { s1: 1, s2: 1, s3: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'update':
      return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };
    default:
      return state;
  }
}

const [reducerState, dispatch] = useReducer(reducer, initialState);
const reducerDispatch = () => {
  setTimeout(() => {
    dispatch({ type: 'update' });
  });
};

具體的用法不展開了，用起來和 redux 差别不大

狀态直接用Ref聲明，需要更新的時候調用更新的函數（不推薦） 

// S4 不參與渲染
const [s4, setS4] = useState<number>(1);
// update 就是 useReducer 的 dispatch，調用就更更新頁面，比定義一個不渲染的 state 好多了
const [, update] = useReducer((c) => c + 1, 0);
const state1Ref = useRef(1);
const state2Ref = useRef(1);

const unRefSetState = () => {
  // 優先更新 ref 的值
  state1Ref.current += 1;
  state2Ref.current += 1;
  setS4((i) => i + 1);
};

const unRefSetState = () => {
  // 優先更新 ref 的值
  state1Ref.current += 1;
  state2Ref.current += 1;
  update();
};

<div>
  state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
</div>;

這樣做，把真正渲染的 state 放到了 ref 裡面，這樣有個好處，就是函數裡面不用聲明這個 state 的依賴了，但是壞處非常多，更新的時候必須說動調用 update，同時把 ref 用來渲染也比較奇怪

自定義Hook

自定義 Hook 如果在元件中使用，任何自定義 Hook 中的狀态改變，都會引起元件重新渲染，包括元件中沒用到的，但是定義在自定義 Hook 中的狀态

簡單的例子，下面的自定義 hook，有 id 和 data 兩個狀态， id 甚至都沒有導出，但是 id 改變的時候，還是會導緻引用這個 Hook 的元件重新渲染

// 一個簡單的自定義 Hook，用來請求資料
const useDate = () => {
  const [id, setid] = useState<number>(0);
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    fetch('請求資料的 URL')
      .then((r) => r.json())
      .then((r) => {
        // 元件重新渲染
        setid((i) => i + 1);
        // 元件再次重新渲染
        setData(r);
      });
  }, []);

  return data;
};

// 在元件中使用，即使隻導出了 data，但是 id 變化，同時也會導緻元件重新渲染，是以元件在擷取到資料的時候，元件會重新渲染兩次
const data = useDate();

測試代碼 

// use-data.ts
const useDate = () => {
  const [id, setid] = useState<number>(0);
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    fetch('資料請求位址')
      .then((r) => r.json())
      .then((r) => {
        setid((i) => i + 1);
        setData(r);
      });
  }, []);

  return data;
};

import { useEffect, useReducer, useRef, useState } from 'react';
import useDate from './use-data';

const initialState = { s1: 1, s2: 1, s3: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'update':
      return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };
    default:
      return state;
  }
}

const TestHook = () => {
  const renderTimeRef = useRef<number>(0);
  const [s1, setS1] = useState<number>(1);
  const [s2, setS2] = useState<number>(1);
  const [s3, setS3] = useState<number>(1);
  const [s4, setS4] = useState<number>(1);
  const [, update] = useReducer((c) => c + 1, 0);
  const state1Ref = useRef(1);
  const state2Ref = useRef(1);
  const data = useDate();
  const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });
  const [reducerState, dispatch] = useReducer(reducer, initialState);
  const containerRef = useRef<HTMLButtonElement>(null);

  const reactEventCallback = () => {
    setS1((i) => i + 1);
    setS2((i) => i + 1);
    setS3((i) => i + 1);
  };

  const timerCallback = () => {
    setTimeout(() => {
      setS1((i) => i + 1);
      setS2((i) => i + 1);
      setS3((i) => i + 1);
    });
  };

  const asyncCallback = () => {
    Promise.resolve().then(() => {
      setS1((i) => i + 1);
      setS2((i) => i + 1);
      setS3((i) => i + 1);
    });
  };

  const unuseState = () => {
    setS4((i) => i + 1);
  };

  const unRefSetState = () => {
    state1Ref.current += 1;
    state2Ref.current += 1;
    setS4((i) => i + 1);
  };

  const unRefReducer = () => {
    state1Ref.current += 1;
    state2Ref.current += 1;
    update();
  };

  const sameState = () => {
    setS1((i) => i);
    setS2((i) => i);
    setS3((i) => i);
    console.log(renderTimeRef.current);
  };

  const mergeObjectSetState = () => {
    setTimeout(() => {
      setState((prevState) => {
        const { s1: prevS1, s2: prevS2, s3: prevS3 } = prevState;
        return { ...prevState, s1: prevS1 + 1, s2: prevS2 + 1, s3: prevS3 + 1 };
      });
    });
  };

  const reducerDispatch = () => {
    setTimeout(() => {
      dispatch({ type: 'update' });
    });
  };

  useEffect(() => {
    const handler = () => {
      setS1((i) => i + 1);
      setS2((i) => i + 1);
      setS3((i) => i + 1);
    };
    containerRef.current?.addEventListener('click', handler);
    return () => containerRef.current?.removeEventListener('click', handler);
  }, []);

  console.log('render Time Hook', ++renderTimeRef.current);
  console.log('data', data);
  return (
    <div className="test">
      <button onClick={reactEventCallback}>React Event</button>
      <button onClick={timerCallback}>Timer Callback</button>
      <button onClick={asyncCallback}>Async Callback</button>
      <button id="native-event" ref={containerRef}>
        Native Event
      </button>
      <button onClick={unuseState}>Unuse State</button>
      <button onClick={sameState}>Same State</button>
      <button onClick={mergeObjectSetState}>Merge State Into an Object</button>
      <button onClick={reducerDispatch}>Reducer Dispatch</button>
      <button onClick={unRefSetState}>useRef As State With useState</button>
      <button onClick={unRefSetState}>useRef As State With useReducer</button>
      <div>
        S1: {s1} S2: {s2} S3: {s3}
      </div>
      <div>
        Merge Object S1: {state.s1} S2: {state.s2} S3: {state.s3}
      </div>
      <div>
        reducerState Object S1: {reducerState.s1} S2: {reducerState.s2} S3:{' '}
        {reducerState.s3}
      </div>
      <div>
        state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
      </div>
    </div>
  );
};

export default TestHook;

規則記不住怎麼辦？

上面羅列了一大堆情況，但是這些規則難免會記不住，React 事務機制導緻的兩種完全截然不然的重新渲染機制，确實讓人覺得有點惡心，React 官方也注意到了，既然在事務流的中 setState 可以合并，那不在 React 事務流的回調，能不能也合并，答案是可以的，React 官方其實在 React V18 中， setState 能做到合并，即使在異步回調或者定時器回調或者原生事件綁定中，可以把測試代碼直接丢 React V18 的環境中嘗試，就算是上面列出的會多次渲染的場景，也不會重新渲染多次

具體可以看下這個位址

Automatic batching for fewer renders in React 18[1]

但是，有了 React V18 最好也記錄一下以上的規則，對于減少渲染次數還是很有幫助的

參考資料

[1]

Automatic batching for fewer renders in React 18: https://github.com/reactwg/react-18/discussions/21

Reac
上一篇: 【python資料分析】正态分布、正态性檢驗與相關性分析
下一篇: java與模式(java與模式 百度雲)

繼續閱讀