This is the 21st day of my participation in the August Text Challenge.More challenges in August

What is a hook

Remember that it is the use of hooks in React.

It empowers the external to handle the main process by exposing a set of interfaces for receiving external operations.

The simplest hook implementation

/ / main process
const pool = []

function main(initValue) {
  if (pool.length) {
    for (let i = 0; i < pool.length; i++) {
      initValue = pool[i](initValue)
    }
  }
}

External event 1: add
pool.push(function add(initValue) {
  initValue += 'add something'
})
// External event 2: reduce
pool.push(function reduce(initValue) {
  if (initValue.length > 2) {
    return initValue.substring(0.2)}})Copy the code

This example chain-executes the incoming events (Add events, reduce events) and takes the return value of the former operation as the input parameter of the latter operation.

What are the relationships between events

  • Synchronous streaming

    Multiple events are executed in chain with the return value of the previous operation as the input parameter of the next operation

  • Synchronous non flow

    Multiple events are executed in sequence

  • Synchronization fusing

    All events are executed in sequence, with each event having the ability to stop execution of subsequent events (via a return value)

  • Synchronous cycle

    Loop through all events until any event terminates execution (via return value)

  • Asynchronous parallel

    Multiple asynchronous operations are executed simultaneously

  • Asynchronous streaming

    Multiple asynchronous events are executed in a chain with the return value of the previous operation as the input parameter of the latter operation

  • Asynchronous fusing

    All events are executed in sequence, with each event having the ability to stop execution of subsequent events (via a return value)

  • Asynchronous loop

    Loop through all events until any event terminates execution (via return value)

Asynchrony can be executed by subsequent events by executing the next function in the parameter, that is:

function event1(args, next) {
  // do some async things
  // when handle over, execute next to finish current event
  next()
}
Copy the code

How do you code these relationships between events

const config = {
  eventFns: []}Copy the code

This config is the framework developer reserved Config object that receives plug-in functions from the plug-in developer.

config.eventFns.push(function a() {})
config.eventFns.push(function b() {})
config.eventFns.push(function c() {})
Copy the code

Plug-in developers pass in custom plug-ins

Different calls to plug-ins

  • Synchronous streaming
for (let  i = 0; i < config.eventFns.length; i++) {
  config.eventFns[i].call(null)}// Synchronization loop
let flag = true
while (flag) {
  for (let  i = 0; i < config.eventFns.length; i++) {
    if(! config.eventFns[i].call(null)) {
      flag = false
      break}}}Copy the code
  • Asynchronous streaming
let result = initValue
function doNext(index) {
  if (index > config.eventFns.length - 1) {
    return
  }
  config.eventFns[index].call(null, result, function(value) {
    result = value
    doNext(index + 1)
  }
}
doNext(0)
Copy the code
  • Asynchronous fusing
function doNext(index) {
  if (index > config.eventFns.length - 1) {
    return
  }
  config.eventFns[index].call(null.function(value) {
    if (value) {
      doNext.bind(null.null, index + 1)
    }
  })
}
doNext(0)
Copy the code

Encapsulation library based on Hook idea

Tapable

Encapsulates a variety of inter-event relationships for developers to use by exposing the basic two interfaces (register TAP and call).

  • Initialize (determine the type of hook when initializing)
const mySyncHook = new AsyncHook()
Copy the code
  • registered
mySyncHook.tapAsync('doA-hook'.(lastValue) = > {
  // do something
})
mySyncHook.tapAsync('doB-hook'.(lastValue) = > {
  // do something
})
Copy the code
  • call
mySyncHook.callASync(initValue).then(result= > {
  / /...
})
Copy the code

wepy

  • registered
this.register('doA-hook'.(lastValue) = > {
  // do something
})
this.register('doB-hook'.(lastValue) = > {
  // do something
})
Copy the code
  • Call (determine the type of hook when called)
this.hookSeq('doA-hook', initValue).then(result= > {
  / /...
})
Copy the code

Applicable scenario

As can be seen, the Hook idea can organize code more reasonably and clearly, so it is more suitable for framework development and plug-in development scenarios.