脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react 函数组件输入卡顿

解析react 函数组件输入卡顿问题 usecallback react.memo

 更新时间：2022年07月15日 09:40:20   作者：用户4238953559166  
useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算，这篇文章主要介绍了react 函数组件输入卡顿问题 usecallback react.memo,需要的朋友可以参考下

现象

在输入问题时，输入框响应巨慢。

效果图

分析

右侧控制台显示，子组件不停在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 包裹子组件，使其在只有关心的属性更新时再重新渲染，类似pure component.

Recat.memo 的函数签名

  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函数，避免其在每次渲染时重复创建函数，保存函数引用。

useCallback中引用的值是第一次创建时的值，采用闭包保存下来，因此后面渲染用到的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后,该函数中的所有变量都会采用第一次创建该函数时的值，不会随之更新。导致界面无法正确显示数据。

此处功能正常是因为qdata是一个对象数组，引用地址没变，但其值发生了变化，所以界面显示正常。

如果是值类型，就有问题了

我们不能依赖该性质来投机取巧，而应该明确的指定useCallback的依赖项。

最终的办法是将生成随机ID的代码提出到组件外，分析了半天，发现是自己的代码有问题😫

如下:

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[];
  ....
  ...
}

到此这篇关于react 函数组件输入卡顿问题 usecallback react.memo的文章就介绍到这了,更多相关react 函数组件输入卡顿内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React项目中hook实现展示对话框功能

    React项目中hook实现展示对话框功能

    Modal(模态框)是 web 开发中十分常见的组件,即从页面中弹出的对话框,下面这篇文章主要给大家介绍了关于React项目中hook实现展示对话框功能的相关资料,需要的朋友可以参考下
    2022-05-05
  • react native与webview通信的示例代码

    react native与webview通信的示例代码

    本篇文章主要介绍了react native与webview通信的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React组件中使用JSON数据文件的方法详解

    React组件中使用JSON数据文件的方法详解

    要在 React 组件中使用 JSON 数据,有多种方法,这篇文章主要为大家详细介绍了五个常见的方法,文中的示例代码讲解详细,有需要的小伙伴可以了解下
    2024-01-01
  • react-redux及redux状态管理工具使用详解

    react-redux及redux状态管理工具使用详解

    Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下
    2023-01-01
  • 解决React报错Property 'X' does not exist on type 'HTMLElement'

    解决React报错Property 'X' does not 

    这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React路由拦截模式及withRouter示例详解

    React路由拦截模式及withRouter示例详解

    这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事

    这篇文章主要介绍了浅谈React Router关于history的那些事，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React+Node实现大文件分片上传、断点续传秒传思路

    React+Node实现大文件分片上传、断点续传秒传思路

    本文主要介绍了React+Node实现大文件分片上传、断点续传秒传思路，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • react 父组件与子组件之间的值传递的方法

    react 父组件与子组件之间的值传递的方法

    本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • react 通过后端接口实现路由授权的示例代码

    react 通过后端接口实现路由授权的示例代码

    本文主要介绍了React应用中通过后端接口获取路由授权,实现动态和灵活的权限管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-11-11

最新评论