sl1673495 / qox

:shaved_ice: Use composition API in React or Fre

Qox

改名为 qox，重新开坑，在 react 中实现 composition API，弥补 hooks API 的缺陷

Use

npm i qox -S

import { setup, reactive } from 'qox'
import { render } from 'react-dom'

const App = setup(() => {
  const data = reactive({ count: 0 })
  return () => (
    <div>
      <div>{data.count}</div>
      <button onClick={() => data.count++}>+</button>
    </div>
  )
})
render(<App />, document.body)

Composition API

• reactive

• ref

• watch

• computed

reactive

It reversed a object and return a proxy object

const data = reactive({ count: 0 })
console.log(data.count) // 0
data.count++
console.log(data.count) //1

ref

Just return a value

const ref = ref(0)
console.log(ref.value) //0

watch

It will reserved a function and run it when data changed

watch(() => console.log(111))

computed

reactive with data

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

License

MIT ©yisar inspired by vue-next