如何强制Dojo2 Widget重新渲染？表单提交时VDOM重渲染需求

Dojo2的Widget是基于**状态（state）和属性（properties）**的响应式设计，当这两者发生变化时，组件会自动重新渲染VDOM并更新真实DOM。针对你的需求，有两种常用的实现方式：

1. 通过更新组件State触发重新渲染（推荐） #

这是最符合Dojo2设计理念的方式，你只需要在submitForm方法中更新组件的内部状态，框架会自动触发重新渲染。

示例代码：

import { WidgetBase } from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';

export class YourFormWidget extends WidgetBase<{}, { hasSubmitted: boolean }> {
  // 初始化组件状态
  protected getDefaultState() {
    return { hasSubmitted: false };
  }

  protected render() {
    // 这里可以根据state的变化调整渲染内容
    const submitText = this.state.hasSubmitted ? '已提交' : '提交';
    
    return v('form', { onSubmit: (event) => {
      event.preventDefault();
      this.submitForm(event.target);
    } }, [
      // 表单输入项...
      v('button', { type: 'submit' }, [submitText])
    ]);
  }

  public submitForm(input: any): void {
    console.log("want to re-render widget after this.");
    // 更新state，触发重新渲染
    this.setState({ hasSubmitted: true });
    
    // 如果需要基于之前的state更新，可以用函数式写法
    // this.setState(prevState => ({ ...prevState, hasSubmitted: true }));
  }
}

当你调用this.setState()后，Dojo2会检测到状态变更，自动调用render()方法生成新的VDOM，然后对比新旧VDOM的差异，只更新需要变化的DOM节点。

2. 强制触发重新渲染（特殊场景使用） #

如果你遇到不需要更新state/props，但必须重新渲染组件的情况（比如依赖了外部可变数据），可以调用this.invalidate()方法强制组件重新渲染：

public submitForm(input: any): void {
  console.log("want to re-render widget after this.");
  // 强制触发组件重新渲染
  this.invalidate();
}

不过这种方式要谨慎使用，因为它跳过了Dojo2的响应式状态检查，可能会导致不必要的渲染，影响性能。

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