react hooks in omi

packages/omi/examples/use/main.js

@@ -1,17 +1,35 @@
 import { define, render } from '../../src/omi'
 
 define('my-counter', function() {
-  const [count, setCount] = this.useData(0)
+  const [count, setCount] = this.use({
+    data: 0,
+    effect: function() {
+      document.title = `The num is ${this.data}.`
+    }
+  })
 
-  this.useEffect(() => {
-    document.title = `The num is ${count}.`
+  const [items, setItems] = this.use({
+    data: [{ text: 'Omi' }],
+    effect: function() {
+      console.log(`The items count is ${this.data.length}.`)
+    }
   })
 
   return (
     <div>
       <button onClick={() => setCount(count - 1)}>-</button>
       <span>{count}</span>
       <button onClick={() => setCount(count + 1)}>+</button>
+
+      <ul>
+        {items.map(item => {
+          return <li>{item.text}</li>
+        })}
+      </ul>
+      <button onClick={() => setItems([...items, { text: 'new item' }])}>
+        add
+      </button>
+      <button onClick={() => setItems([])}>empty</button>
     </div>
   )
 })

packages/omi/src/define.js

@@ -19,25 +19,33 @@ export function define(name, ctor) {
         return ctor.call(this)
       }
 
-      useData(value) {
+      beforeRender() {
+        this._useId = 0
+      }
+
+      use(option) {
+        this._useId++
         const updater = newValue => {
-          this._useMap[this._useId] = newValue
+          const item = this._useMap[updater.id]
+
+          item.data = newValue
+
           this.update()
-          this._effectFn()
+          item.effect && item.effect()
         }
 
+        updater.id = this._useId
         if (!this._isInstalled) {
-          return [value, updater]
+          this._useMap[this._useId] = option
+          return [option.data, updater]
         }
-        return [this._useMap[this._useId++], updater]
+
+        return [this._useMap[this._useId].data, updater]
       }
 
       installed() {
         this._isInstalled = true
       }
-      useEffect(fn) {
-        this._effectFn = fn
-      }
     }
     customElements.define(name, Element)
   }