Neues zu React Hooks: Hooks in Vue?

React Hooks: Auch für Vue.js?
Keine Kommentare

Erst vor wenigen Tagen kündigte das React-Team an, zu React 16.7 Hooks einführen zu wollen. In der Diskussion zeigte sich schnell, dass die Idee gut ankommt. Jetzt wurden die Hooks bereits für Vue adaptiert.

Hooks sind eine gute Idee! Zumindest bekommt man diesen Eindruck, wenn man die Diskussion über das neue Feature betrachtet, das das React-Team kürzlich zur Diskussion gestellt hat. In React 16.7 soll es damit möglich sein, States und andere React-Features in Anwendungen zu nutzen, ohne dafür Klassen zu schreiben.

React Hooks: Worum geht es genau?

Dan Abramov, der die Idee der Hooks auf der React Conf zusammen mit Sophia Alpert vorgestellt hatte, ist inzwischen in einem Blogpost genauer auf die Motivation für Hooks eingegangen. Mit Hooks soll es in React möglich werden, die Logik innerhalb von Komponenten in isolierte, wiederverwendbare Einheiten zu unterteilen. Auch solle die Anzahl an Konzepten mit Hooks reduziert werden, die für das Erstellen von Anwendungen notwendig sind. Hooks reduzieren die Anzahl an Wegen, die zur Erstellung wiederverwendbaren Codes genutzt werden können. Eine genauere Erklärung zu Hooks findet sich im Blogpost von Abramov.

React Hooks in Vue.js

Nicht nur zahlreiche Anwender von React und das React-Team haben aber auf das Konzept der Hooks reagiert. Auch Evan You, Erfinder von Vue.js, hat einen Proof of Concept für eine Adaption der React Hooks in Vue geschrieben, der auf GitHub zu finden ist. Dort könnte eine entsprechende Implementierung wie folgt aussehen – You verweist allerdings explizit darauf, dass dieser POC noch nicht in der Production eingesetzt werden kann:

import {
  withHooks,
  useData,
  useComputed,
  useWatch,
  useMounted,
  useUpdated,
  useDestroyed
} from "vue-hooks"

const Foo = withHooks(h => {
  const data = useData({
    count: 0
  })

  const double = useComputed(() => data.count * 2)

  useWatch(() => data.count, (val, prevVal) => {
    console.log(`count is: ${val}`)
  })

  useMounted(() => {
    console.log('mounted!')
  })
  useUpdated(() => {
    console.log('updated!')
  })
  useDestroyed(() => {
    console.log('destroyed!')
  })

  return h('div', [
    h('div', `count is ${data.count}`),
    h('div', `double count is ${double}`),
    h('button', { on: { click: () => {
      // still got that direct mutation!
      data.count++
    }}}, 'count++')
  ])
})
Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -