# The init function of the chaining API

Since the glass-easel component framework is currently only available for the Skyline rendering engine , these features are also limited by this.

# Init chain invocation item

Support for.init (...)chained invocation items in the Chaining API allows component creation in a different way:

Component()
  .data(() => ({
    myDataField: 'someValue',
  }))
  .init(function ({ lifetime }) {
    // 这里可以用 JavaScript 局部量
    const getUpdatedValue = () => {
      return 'updated'
    }

    // 定义一个生命周期方法
    lifetime('attached', () => {
      this.setData({ myDataField: getUpdatedValue() })
    })
  })
  .register()

Functions defined in init are called once each time a component is created.

The main benefit of this approach is that it allows free use of JavaScript local variables within it, reducing the use of componentsthiswhich can sometimes be convenient.

# Auxiliary methods in init functions

The first parameter of init contains multiple helper methods that can be used for component definitions.

Methodis used to define a single method, equivalent to the traditionalmethodsdefining a single item in a paragraph.However, it is usually used only to define an event response function that needs to be returned at the end. For example:

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

LifetimeandpageLifetimeare used to define a single lifecycle method and a lifecycle method for the page where the component resides, respectively,Equivalent to a single item in the traditionallifetimeandpageLifetimedefinition paragraph.For example:

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

Observeris used to define a single data listener, similar to the traditionalobserversdefines a single item in a segment, but should be written as an array when listening to multiple data fields at the same time.For example:

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

Relationis used to define a single item of relationship between components, equivalent to a single item in a traditional form ofrelationsdefinition section.For example:

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

It is important to note that none of the above methods can be executed asynchronously or delayed, otherwise an error will be reported:

Component()
  .init(function ({ lifetime }) {
    setTimeout(() => {
      // 不能这么做！
      lifetime('attached', () => { /* ... */ })
    }, 0)
  })
  .register()

In addition, the first parameter containsdataandsetData,It 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()

Note, however, that data and setData should only be used in individual callbacks, as this will result in an error:

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