Q & A

Why is my page stuck on initializing?

The following code excerpt demonstrates an example:

// File path: components/my-component/index.js
import { useState, setupComponent } from '@goldfishjs/core';

Component(setupComponent(() => {
  const state = useState({
    ref: null,
  });
  
  useComponentLifeCycle('didMount', function () => {
    // this refers to the current component instance
    state.ref = this;
  });
  
  return {
    state,
  };
}));

In the above example, the value of the component instance is assigned to state, the reactive state data, which is returned to the component instance at the end.

The component instance object has a large size and the entire state is returned to the component instance, so Goldfish is slow in constructing the reactivity system for the following reasons:

• Goldfish has to deeply traverse the entire state object (including the component instance) and convert it to a reactive object.
• Goldfish has to deeply traverse the entire state object and listen for changes to the reactive data.

Therefore, we recommend you not to convert normal data that do not require reactivity to reactive data.

Why doesn't my page change with the data?

The following code excerpt demonstrates an example:

// File path: components/my-component/index.js
import { useState, setupComponent } from '@goldfishjs/core';

Component(setupComponent(() => {
  const state = useState({
    name: 'Jack',
  });
  
  setTimeout(() => {
    state.name = 'Ben';
  }, 1000);
  
  return {
    // CAUTION: Pay attention to the coding here.
    name: state.name,
  };
}));

<!-- File path: components/my-component/index.axml -->
<view>{{ name }}</view>

Pay attention to the syntax of return in the components/my-component/index.js file. The value of state.name is directly assigned to the name property. This means the snapshot value of state.name is assigned to the name property, so the value of name is kept as Jack instead of Ben.

To resolve this issue, change the return syntax as follows:

return {
  get name() {
    return state.name;
  },
};