日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

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

作者：用戶4238953559166 ? 更新時(shí)間： 2022-09-07 編程語(yǔ)言

現(xiàn)象

在輸入問(wèn)題時(shí)，輸入框響應(yīng)巨慢。

效果圖

分析

右側(cè)控制臺(tái)顯示，子組件不停在mount unmount，子組件中使用了CKEditor組件，每次mount開(kāi)支較大，導(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每次都會(huì)重新生成新的隨機(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)心的屬性更新時(shí)再重新渲染，類似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;
});

效果圖, 子組件沒(méi)有隨之渲染

方案二：

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

useCallback中引用的值是第一次創(chuàng)建時(shí)的值，采用閉包保存下來(lái)，因此后面渲染用到的qdata屬性都是不變的，這樣該段代碼<DNDCard key={i.id} id={i.id} index={index} moveCard={() => {}}>中的key值就不會(huì)因?yàn)殡S意變動(dòng)而導(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的開(kāi)支

弊端

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

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

如果是值類型，就有問(wèn)題了

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

最終的辦法是將生成隨機(jī)ID的代碼提出到組件外，分析了半天，發(fā)現(xiàn)是自己的代碼有問(wè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[];
  ....
  ...
}

原文鏈接：https://juejin.cn/post/7120148941731004453

欄目分類
最近更新