Next.js动态渲染组件闪烁求助：Froala编辑器重复加载

问题根源 #

动态导入的Froala编辑器出现闪烁，核心原因是不必要的组件重复渲染：

1. 原组件中config对象每次渲染都会重新创建，导致FroalaEditor感知到props变化触发重渲染；
2. 父组件状态变更时，若传递给编辑器的事件处理函数（如onChanged）引用不稳定，会触发编辑器组件重复渲染；
3. 动态导入组件本身初始化需要时间，频繁重渲染会放大闪烁感。

解决方案 #

1. 用React.memo包裹编辑器组件

React.memo会对组件props做浅比较，只有当props真正变化时才重新渲染组件，避免父组件无关状态变更导致的无意义重渲染。

2. 用useMemo缓存静态配置

将编辑器的config对象用useMemo缓存，确保每次渲染时引用一致，避免因对象重新创建触发重渲染。

3. 用useCallback稳定事件处理函数

父组件中传递给编辑器的onChanged函数，用useCallback包裹保持引用稳定，避免父组件状态变更时传递新的函数引用。

修改后的代码 #

编辑器组件（Froala.tsx）

import React, { useMemo } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

// React.memo包裹组件，仅在props变化时重渲染
const Froala = React.memo((props: { model: any; onChanged: any }) => {
    // useMemo缓存静态config，依赖项为空表示只初始化一次
    const editorConfig = useMemo(() => ({
        toolbarButtons: ['fullscreen', 'bold', 'italic', 'textColor', 'backgroundColor', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', 'color', 'inlineClass', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', 'insertLink', 'insertImage', 'insertVideo', 'embedly', 'insertFile', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', 'print', 'getPDF', 'spellChecker', 'help', 'html', 'undo', 'redo'],
        toolbarButtonsXS: ['bold', 'italic', 'fontFamily', 'fontSize', 'undo', 'redo'],
        placeholderText: 'Edit Your Content Here!',
        charCounterCount: false,
        theme: 'dark',
        imageUploadParam: 'image_param',
        fileUploadMethod: 'POST',
        fileUploadURL: 'http://127.0.0.1:8000/upload_file',
        imageUploadMethod: 'POST',
        imageUploadURL: 'http://127.0.0.1:8000/api/upload/image',
        imageMaxSize: 5 * 1024 * 1024,
        imageAllowedTypes: ['jpeg', 'jpg', 'png'],
    }), []);

    return (
        <div>
            <FroalaEditor 
                model={props.model} 
                onModelChange={props.onChanged} 
                config={editorConfig}
            />
        </div>
    );
});

export default Froala;

父组件中的动态导入与使用

import { dynamic } from 'next/dynamic';
import { useCallback, useState } from 'react';
import { useDispatch } from 'react-redux';

const FroalaEditor = dynamic(() => import('../Froala'), {
    ssr: false,
    // 可选：添加加载状态，弱化闪烁时的视觉冲击
    loading: () => <div className="editor-loading">加载编辑器中...</div>
});

const ParentComponent = () => {
    const [content, setContent] = useState('');
    const dispatch = useDispatch();

    // useCallback稳定事件处理函数，避免每次渲染生成新引用
    const handleEditorChange = useCallback((newContent) => {
        setContent(newContent);
        dispatch({ type: 'UPDATE_CONTENT', payload: newContent });
    }, [dispatch]);

    return (
        <div>
            <FroalaEditor model={content} onChanged={handleEditorChange} />
            {/* 其他组件内容 */}
        </div>
    );
};

export default ParentComponent;

额外优化建议 #

• 确保Froala样式正确导入：在_app.tsx中添加样式引用，避免编辑器渲染异常

  import 'froala-editor/css/froala_style.min.css';
  import 'froala-editor/css/froala_editor.pkgd.min.css';
  

• 添加过渡动画弱化闪烁：给编辑器容器添加CSS过渡效果

  .editor-container {
      transition: opacity 0.2s ease;
  }
  .editor-loading {
      opacity: 0.6;
  }
  

内容的提问来源于stack exchange，提问作者HOHOOH