Skip to main content

1. Use State And Adapter

Use State​

You can simply define the state via the reactive function.

Inline Object State​

import { reactive } from "@cfcs/core";

const obj = reactive({
  width: 0,
  height: 0,
});

Class State​

If you have a class component that you manage, it is also a good choice to support Reactive in the class component.

Make the class reactive through the class decorator called ReactiveSubscribe.

The state is set through a property decorator called Observe.

import { ReactiveSubscribe, Observe } from "@cfcs/core";

@ReactiveSubscribe
class ClassComponent {
  @Observe width = 0;
  @Observe height = 0;
}

const obj = new ClassComponent();

Use Adapter With State​

Reactive Adapter is an intermediate stage code to support the framework.

If you can create an adapter, you can create a reactive component in the framework supported by CFCS.

It provides a reactive adapter in the form of a function, and you can complete the adapter by writing the code for the function.

The return value of Adapter returns inline object or class instance or void as an instance.
If void is returned, an instance can be set in the mounted lifecycle. See Use Lifecycle.

const REACTIVE_ADAPTER = () => {
};

See Function Adapter's setup

The following code is an example of defining width and height state.

And when the state changes, re-rendering occurs in the parent component (or app) that used the component.

import { reactive } from "@cfcs/core";

const REACTIVE_ADAPTER = () => {
  const obj = reactive({
    width: 0,
    height: 0,
  });

  // Changing the state in the created Lifecycle will not cause a re-render.
  // obj.width = 100;
  // obj.height = 100;

  return obj;
};

Frameworks​

If you don't use the height value in the render lifecycle, re-rendering won't happen even if the height state changes.

import { useReactive } from "@cfcs/react";

export function App() {
  const {
    width,
    // height,
  } = useReactive(REACTIVE_ADAPTER);

  return <div>{width}</div>;
}