Flutter中如何阻止setState后TeXView重复渲染？

以下是几个实用方案，可彻底阻止TeXView在父组件调用setState时重新渲染：

方案一：封装成带状态保持的独立组件 #

把TeXView封装为独立的StatefulWidget，并混入AutomaticKeepAliveClientMixin，这个Mixin能让组件在父组件重建时保持自身状态，避免不必要的重新渲染。

代码示例：

class PersistentTeXView extends StatefulWidget {
  final RenderingEngine renderingEngine;
  final String messageContent;

  const PersistentTeXView({
    super.key,
    required this.renderingEngine,
    required this.messageContent,
  });

  @override
  State<PersistentTeXView> createState() => _PersistentTeXViewState();
}

class _PersistentTeXViewState extends State<PersistentTeXView> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态保持

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    return TeXView(
      renderingEngine: widget.renderingEngine,
      child: TeXViewDocument(
        widget.messageContent,
        style: TeXViewStyle(
          contentColor: Colors.white,
          fontStyle: TeXViewFontStyle(
            fontSize: 15,
            fontFamily: 'Nunito'
          ),
        ),
      ),
    );
  }
}

之后在父组件中直接使用PersistentTeXView替代原TeXView即可，只要它的renderingEngine和messageContent未发生变化，父组件setState时它不会重新渲染。

方案二：使用const构造函数（参数不变时适用） #

如果TeXView的所有参数（渲染引擎、公式内容、样式）都是固定值，直接给TeXView及嵌套组件加上const关键字，强制Flutter复用组件实例，避免重建：

const TeXView(
  renderingEngine: yourFixedEngine,
  child: const TeXViewDocument(
    "固定公式内容",
    style: const TeXViewStyle(
      contentColor: Colors.white,
      fontStyle: const TeXViewFontStyle(
        fontSize: 15,
        fontFamily: 'Nunito'
      ),
    ),
  ),
)

注意：所有嵌套组件和参数必须是编译时常量，此方案仅适用于内容完全固定的场景。

方案三：基于ValueNotifier局部更新 #

如果TeXView的内容需要动态变化，但不想因父组件setState触发重建，可以用ValueNotifier管理公式内容，仅在内容真正变化时更新TeXView：

代码示例：

// 在父组件或独立类中定义ValueNotifier
final ValueNotifier<String> formulaNotifier = ValueNotifier("初始公式内容");

// 渲染TeXView的部分
ValueListenableBuilder<String>(
  valueListenable: formulaNotifier,
  builder: (context, content, child) {
    return TeXView(
      renderingEngine: widget.renderingEngine,
      child: TeXViewDocument(
        content,
        style: TeXViewStyle(
          contentColor: Colors.white,
          fontStyle: TeXViewFontStyle(
            fontSize: 15,
            fontFamily: 'Nunito'
          ),
        ),
      ),
    );
  },
)

后续更新公式内容时，直接调用formulaNotifier.value = "新公式内容"即可，只有当内容变化时，ValueListenableBuilder才会重建TeXView，父组件其他位置的setState不会影响它。

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