# Chaining API of init function

Due to the current glass-easel The component framework is available only for Skyline Rendering engineThese features are also limited.

# init Chained call item

in Chaining API Support in .init(...) Chained call items, component creation can be done in another way:

Component()
  .data(() => ({
    myDataField: 'someValue',
  }))
  .init(function ({ Lifetime }) {
    // You can use it here. JavaScript Local quantity
    const getUpdatedValue  = () => {
      return 'updated'
    }

    // Define a lifecycle approach
    Lifetime('attached', () => {
      this.setData({ myDataField: getUpdatedValue () })
    })
  })
  .register()

init The functions defined in the.

The main benefit of this approach is that it is free to use within its JavaScript Local variables, reducing the need for components this The use is sometimes convenient.

# init Auxiliary methods in functions

init Contains multiple helper methods that can be used for component definitions.

method Used to define a single method, equivalent to the traditional form of methods Define a single item in the paragraph. However, it is usually only used to define event response functions, which need to be returned at the end. For example:

Component()
  .init(function ({ method }) {
    const tapHandler  = method(() => {
      /* ... */
    })
    return { tapHandler  }
  })
  .register()

Lifetime and PageLifetime Used to define a single lifecycle method and a lifecycle method for the page where the component resides, respectively, equivalent to the traditional form of Lifetime and PageLifetime Define a single item in the paragraph. For example:

Component()
  .init(function ({ lifetime, PageLifetime }) {
    Lifetime('attached', () => { /* ... */ })
    PageLifetime('show', () => { /* ... */ })
  })
  .register()

observer Used to define a single data listener, similar to the traditional form of observers Defines a single item in a segment, but when listening on multiple data fields at the same time, it should be written as an array. For example:

Component()
  .data(() => ({
    a: 1,
    b: 2,
  }))
  .init(function ({ observer }) {
    observer(['a', 'b'], () => { /* ... */ })
  })
  .register()

relation Used to define the relationship between individual components, equivalent to the traditional form of relations Define a single item in the paragraph. For example:

Component()
  .init(function ({ relation }) {
    relation('another-component', {
      type: 'parent',
    })
  })
  .register()

It should be noted that none of the above methods can be executed asynchronously or delayed, otherwise they will report an error:

Component()
  .init(function ({ Lifetime }) {
    setTimeout (() => {
      // You can't do that!
      Lifetime('attached', () => { /* ... */ })
    }, 0)
  })
  .register()

In addition, the first parameter contains Data and setData , can be used to quickly access and set up data. For example:

Component()
  .data(() => ({
    myDataField: 'someValue',
  }))
  .init(function ({ lifetime, data, setData }) {
    Lifetime('attached', () => {
      setData({
        myDataField: data.myDataField + ' updated',
      })
    })
  })
  .register()

But be aware Data and setData Should only be used in individual callback functions, the following will report an error:

Component()
  .init(function ({ setData }) {
    setData({ /* ... */ })
  })
  .register()