Dojo 2是否提供组件渲染完成后的生命周期钩子？

Great question! I totally get where you're coming from—working with Dojo 2 (now part of the modern @dojo/framework ecosystem) can feel a bit isolating compared to React, since there's less community content out there. But rest assured, there are direct equivalents to React's componentDidMount hook for when your component finishes rendering and attaches to the DOM.

For Class-Based Widgets #

If you're using class-based components (extending WidgetBase), the closest match to componentDidMount is the onAttach lifecycle method. This method fires only once, right after the component's DOM node has been mounted to the document tree—perfect for one-time setup like DOM manipulation, data fetching, or initializing third-party libraries.

Here's a quick example:

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

export class MyWidget extends WidgetBase {
  // Triggers once after component mounts to DOM
  protected onAttach(): void {
    console.log('Component rendered and attached to DOM!');
    // Safely access DOM elements here, e.g.:
    const element = this.domNode;
    if (element) {
      element.classList.add('initialized');
    }
  }

  protected render() {
    return v('div', ['Hello Dojo 2 Class Widget']);
  }
}

If you need a method that runs after every render (including the first one, like combining React's componentDidMount and componentDidUpdate), you can use afterRender instead. Just note that afterRender fires on every re-render, so it's not a 1:1 match for componentDidMount's one-time behavior.

For Functional Widgets #

If you're using Dojo's functional components (with the create factory), you can use the useEffect hook with an empty dependency array. This replicates the one-time mount behavior of componentDidMount exactly—plus it lets you define a cleanup function that runs when the component unmounts (similar to React's componentWillUnmount).

Example:

import { create, tsx } from '@dojo/framework/core/vdom';
import { useEffect } from '@dojo/framework/core/hooks';

const factory = create();

export const MyFunctionalWidget = factory(function MyFunctionalWidget() {
  useEffect(() => {
    console.log('Component rendered and attached to DOM!');
    
    // Optional cleanup logic (runs on unmount)
    return () => {
      console.log('Component is about to unmount');
    };
  }, []); // Empty array = only run on mount/unmount

  return <div>Hello Dojo 2 Functional Widget</div>;
});

Key Notes #

• onAttach is exclusive to class-based widgets and only runs once post-mount.
• Functional components' useEffect with an empty dependency array is the most direct parallel to React's componentDidMount.
• If you need to react to prop/state changes after render, adjust the dependency array in useEffect or use afterRender in class widgets.

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