Doux

Immutable reactivity system, made with ES6 Proxy.

Motivation

Hooks API has mental burden and unsolvable defects, this library can solve the following problems:

• Heavy state and repeated initialization.

In hooks API, Hooks will be initialized repeatedly. If there is a complex state, rendering will be blocked.

const [complexState] = useState(heavyData) // blocked

• State management and Context proplems.

There is a performance problem with context. All children of Context need to be rerender.

<Provier>
  {this.props.children} // all children will rerender.
<Provider/>

Use

npm i doux -S

import { observer, observable } from 'doux'
import { render } from 'react-dom'

const data = observable({ count: 0 })

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

render(<App />, document.getElementById('root'))

observer

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

const App = observer(Component)

observable

Like createContext, It create a observable object

Dependency collection

An accurate update way, it collects dependency in the initialization phase, establishes the mapping relationship between components and data, and updates the corresponding components when the data changes.

More is here

write on copy

The main idea comes from immer.js , when setting, the mutation is applied to the copy, and the copy is taken first when getting, keeping the immutable characteristics, and applying mutations.

License

MIT ©yisar inspired by vue-next