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

學無先后，達者為師

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

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

作者：用戶4238953559166 ? 更新時間： 2022-09-07 編程語言

現(xiàn)象

在輸入問題時，輸入框響應巨慢。

效果圖

分析

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

代碼如下：

 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: '選項' + (index + 1) }}
              data={i.title}
              onChange={(data) => {
              }}
              ></CKInlineEditor>
          </div>
        </DNDCard>
      ))}
    </div>
  );
  };

qdata每次都會重新生成新的隨機id，導致組件不停卸載，掛載

  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: '選項' + (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ù)，避免其在每次渲染時重復創(chuàng)建函數(shù)，保存函數(shù)引用。

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

這樣就避免了

ckeditor組件被重復卸載重新掛載。

代碼如下

  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: '選項' + (index + 1) }}
                data={i.title}
                onChange={(data) => {
                }}
              ></CKInlineEditor>
            </div>
          </DNDCard>
        ))}
      </div>
    );
  }, []);

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

弊端

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

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

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

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

最終的辦法是將生成隨機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[];
  ....
  ...
}

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

欄目分類
最近更新