快捷導(dǎo)航

解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo

更新時間：2022年07月15日 09:40:20 作者：用戶4238953559166

useMemo是一個react hook,我們可以使用它在組件中包裝函數(shù)?？梢允褂盟鼇泶_保該函數(shù)中的值僅在依賴項(xiàng)之一發(fā)生變化時才重新計(jì)算，這篇文章主要介紹了react?函數(shù)組件輸入卡頓問題?usecallback?react.memo,需要的朋友可以參考下

現(xiàn)象

在輸入問題時，輸入框響應(yīng)巨慢。

效果圖

分析

右側(cè)控制臺顯示，子組件不停在mount unmount，子組件中使用了CKEditor組件，每次mount開支較大，導(dǎo)致輸入卡頓

代碼如下：

 const qdata = (q.qdata || [
    { id: getQuestionId('OPTION') },
    { id: getQuestionId('OPTION') },
  ]) as SelectOption[];
const renderEdit = () => {
  console.log('hh');
  return (
    <div
      className={classnames(
        styles.question_content_radio,
        styles.question_content_radio_edit,
      )}
      >
      {qdata.map((i, index) => (
        <DNDCard key={i.id} id={i.id} index={index} moveCard={() => {}}>
          <div className={styles.radio_item}>
            <CKInlineEditor
              config={{ placeholder: '選項(xiàng)' + (index + 1) }}
              data={i.title}
              onChange={(data) => {
              }}
              ></CKInlineEditor>
          </div>
        </DNDCard>
      ))}
    </div>
  );
  };

qdata每次都會重新生成新的隨機(jī)id，導(dǎo)致組件不停卸載，掛載

  const qdata = (q.qdata || [
    { id: getQuestionId('OPTION') },
    { id: getQuestionId('OPTION') },
  ]) as SelectOption[];
{qdata.map((i, index) => (
        <DNDCard key={i.id} id={i.id} index={index} moveCard={() => {}}>
          <div className={styles.radio_item}>
            <CKInlineEditor
              config={{ placeholder: '選項(xiàng)' + (index + 1) }}
              data={i.title}
              onChange={(data) => {
              }}
              ></CKInlineEditor>
          </div>
        </DNDCard>
      ))}

解決

方案一：

使用React.memo 包裹子組件，使其在只有關(guān)心的屬性更新時再重新渲染，類似pure component.

Recat.memo 的函數(shù)簽名

  function memo<P extends object>(
        Component: FunctionComponent<P>,
        propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean
    ): NamedExoticComponent<P>;

export default memo(QuestionRadio, (prevprops, nextprops) => {
  return prevprops.q.qdata === nextprops.q.qdata && prevprops.isEdit === nextprops.isEdit;
});

效果圖, 子組件沒有隨之渲染

方案二：

使用useCallback包裹指定render函數(shù)，避免其在每次渲染時重復(fù)創(chuàng)建函數(shù)，保存函數(shù)引用。

useCallback中引用的值是第一次創(chuàng)建時的值，采用閉包保存下來，因此后面渲染用到的qdata屬性都是不變的，這樣該段代碼<DNDCard key={i.id} id={i.id} index={index} moveCard={() => {}}>中的key值就不會因?yàn)殡S意變動而導(dǎo)致組件不停卸載，掛載。

這樣就避免了

ckeditor組件被重復(fù)卸載重新掛載。

代碼如下

  const renderEdit = useCallback(() => {
    console.log('hh');
    return (
      <div
        className={classnames(
          styles.question_content_radio,
          styles.question_content_radio_edit,
        )}
      >
        {qdata.map((i, index) => (
          <DNDCard key={i.id} id={i.id} index={index} moveCard={() => {}}>
            <div className={styles.radio_item}>
              <CKInlineEditor
                config={{ placeholder: '選項(xiàng)' + (index + 1) }}
                data={i.title}
                onChange={(data) => {
                }}
              ></CKInlineEditor>
            </div>
          </DNDCard>
        ))}
      </div>
    );
  }, []);

效果圖，子組件還是渲染了，但是避免了 CKInlineEditor的開支

弊端

使用usecallback包裹renderEdit后,該函數(shù)中的所有變量都會采用第一次創(chuàng)建該函數(shù)時的值，不會隨之更新。導(dǎo)致界面無法正確顯示數(shù)據(jù)。

此處功能正常是因?yàn)?code>qdata是一個對象數(shù)組，引用地址沒變，但其值發(fā)生了變化，所以界面顯示正常。

如果是值類型，就有問題了

我們不能依賴該性質(zhì)來投機(jī)取巧，而應(yīng)該明確的指定useCallback的依賴項(xiàng)。

最終的辦法是將生成隨機(jī)ID的代碼提出到組件外，分析了半天，發(fā)現(xiàn)是自己的代碼有問題??

如下:

const defaultOptions = [
  { id: getQuestionId('OPTION') },
  { id: getQuestionId('OPTION') },
];
const QuestionRadio: React.FC<{
  q: SurveyQuestion;
  isEdit: boolean;
  index: number;
}> = ({ q, isEdit, index }) => {
  const { loading, run, error } = useEditQuestionTitle();
  const qdata = (q.qdata || defaultOptions) as SelectOption[];
  ....
  ...
}

到此這篇關(guān)于react 函數(shù)組件輸入卡頓問題 usecallback react.memo的文章就介紹到這了,更多相關(guān)react 函數(shù)組件輸入卡頓內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: