如何创建永不重渲染的React组件？有无官方推荐方案？

首先明确：React没有官方推荐的“强制永不重渲染”的实现方式。官方文档反复强调shouldComponentUpdate、React.memo、useMemo都是性能优化工具，而非用来彻底阻断渲染的手段——强行这么做会破坏React的状态同步逻辑，大概率埋下隐性bug（比如组件无法响应必要的配置更新、上下文变化等）。

针对你提到的Quill富文本编辑器包装器场景，问题本质不是“要组件完全不重渲染”，而是避免父组件列表变化时，现有组件的内部状态（编辑器内容）被意外重置。以下是更可靠的解决方案：

1. 解耦Quill状态与React状态 #

Quill本身有独立的实例和状态管理，没必要把编辑器内容存在React的state或props里：

• 类组件：在componentDidMount中初始化Quill实例，把实例存在this.quill上，后续通过Quill自身的API（getContents()/setContents()）读写内容，完全绕开React状态。
• 函数组件：用useRef保存Quill实例，通过useEffect初始化，依赖项设为空数组确保只执行一次：

  function QuillEditor() {
    const editorRef = useRef(null);
    const quillRef = useRef(null);
  
    useEffect(() => {
      if (!quillRef.current && editorRef.current) {
        quillRef.current = new Quill(editorRef.current, {
          // 配置项
        });
      }
    }, []);
  
    return <div ref={editorRef} />;
  }
  

  这种方式下，即使React组件重渲染，Quill实例和内容也不会丢失。

2. 稳定组件的key值 #

如果组件在列表中渲染，确保每个组件的key是稳定且唯一的（比如用后端返回的ID，而非数组索引）。React会通过key判断组件是否需要卸载重建，稳定的key能避免列表变化时现有组件被意外销毁，自然也就不会重置内容。

3. 精准控制重渲染（而非完全阻止） #

不要用shouldComponentUpdate直接返回false，也不要给React.memo传始终返回true的比较函数，而是只在必要的props变化时才触发重渲染：

• 类组件：在shouldComponentUpdate中对比真正影响组件的props（比如编辑器的配置项、绑定的ID），无关props变化时返回false。
• 函数组件：给React.memo传自定义比较函数：

  const MemoizedQuillEditor = React.memo(QuillEditor, (prevProps, nextProps) => {
    // 只有当editorId变化时才重渲染
    return prevProps.editorId === nextProps.editorId;
  });
  

  这种方式既避免了不必要的重渲染，又保留了组件响应必要更新的能力，符合React的设计规范。

为什么不推荐直接阻止渲染？ #

官方文档的提示不是空话：React在某些场景下会强制触发渲染（比如上下文更新、全局状态变化），如果强行阻断，组件会和外部状态脱节，出现无法预料的bug——比如后续你需要修改编辑器的主题或配置，直接阻止渲染的组件永远不会应用新配置。

你的场景中，核心需求是保留编辑器的内部状态，而非彻底禁止渲染。用上面的方案，既能达到目的，又不会违反React的设计原则。

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