Doux

Simple, scalable state management

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

Use

npm i doux -S

import { setup, reactive } from 'doux'
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)

setup

Like memo or lazy, it receive a different composition compoent and return a new component

const App = setup(() => {
  return () => (
    <div>
      <div>{data.count}</div>
      <button onClick={() => data.count++}>+</button>
    </div>
  )
})

the composition component is different from hooks component, it return a pure render function, return () => vdom

Because closures, and from the second time on, the component will only reexecute this function.

This can solve the problem of repeated initialization rendering of hooks API.

Composition API

• reactive

• watch

• ref

• 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

watch

It will reserved an effect function and run it when deps changed.

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

ref

ref is another type of reactive, it just return an value

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

computed

effect for reactive data, when deps changed, it will return a ref

const data = reactive({ count: 0 })
const double = computed(() => data.count * 2)
data.count++

License

MIT ©yisar inspired by vue-next