linkComponent Life Cycle

Components have the following life cycle:

• Creation: this is when the component code is invoked
• Binding: this is when the DOM elements returned by the component are added to the actual DOM
• Clearing: this is when the DOM elements returned by the component are removed from the actual DOM

Component code is always invoked during creation. Components rendered with CommonDOMRenderer can also run logic on other life-cycle stages (binding/clearing):

1linkimport { ref } from 'render-jsx/common';

2link

3link

4linkexport function MyComp(_, renderer) {

5link  const container = ref();

6link

7link  this.onBind(() => console.log('Bound!'));

8link  this.onClear(() => console.log('Cleared!'));

9link

10link  return <div _ref={container}>

11link    <button onclick={() => renderer.remove(container.$)}>

12link      Remove ME!

13link    </button>

14link  </div>;

15link}

16link

verified_user Strict Type-Checking in TypeScript

If you are programming in TypeScript and want to conduct strict-typechecking (which is actually highly recommended), Render-JSX provides type annotations for this argument:

1linkimport { RendererLike } from 'render-jsx';

2link import { LiveComponentThis } from 'render-jsx/component/plugins';

3link

4linkexport function MyComp(

5link    this: LiveComponentThis,

6link   _: any,

7link   renderer: RendererLike<Node>) {

8link  // ...

9link

10link  this.onBind(() => ...);

11link

12link  // ...

13link}

If you want to use this.setLifeCycleMarker() (see below) you should use LiveDOMComponentThis instead:

1linkimport { LiveComponentThis } from 'render-jsx/component/plugins';

2linkimport { LiveDOMComponentThis } from 'render-jsx/dom';

linkFragment Returning Components

A component's life-cycle hooks are bound to the DOM element it returns, so bind logic is called when that element is added to DOM, and clear logic is invoked when that element gets removed.

However, if a component returns a fragment, there is no such element to track. CommonDOMRenderer automatically inserts a hidden marker element and will track that marker for the component's life-cycle.

You can override that behavior by providing a marker element yourself:

1linkimport { ref } from 'render-jsx/common';

2link

3link

4linkexport function MyComp(_, renderer) {

5link  const btn = ref();

6link

7link  this.onBind(() => console.log('Bound!'));

8link  this.onClear(() => console.log('Cleared!'));

9link  this.setLifeCycleMarker(btn);

10link

11link  return <>

12link    <button _ref={btn} onclick={() => renderer.remove(btn.$)}>

13link      Remove ME!

14link    </button>

15link  </>;

16link}