Nautil is a javascri【原创内容，转载请注明出处】【本文首发于唐霜的博客】pt framework based o【本文受版权保护】本文作者：唐霜，转载请注明出处。n React which is a m【未经授权禁止转载】【作者：唐霜】odern reactive UI li【未经授权禁止转载】【作者：唐霜】brary. In the ecosys【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。tem of react, develo转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】pers are always foll【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。owing Flux architect【本文受版权保护】【版权所有，侵权必究】ure.

However, its not eas【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】y to write applicati转载请注明出处：www.tangshuang.net【本文受版权保护】on level code with r未经授权，禁止复制转载。【原创不易，请尊重版权】eact. Even though we【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net have redux and many转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 third libraries, we【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。 still should have t未经授权，禁止复制转载。转载请注明出处：www.tangshuang.neto waste much time on未经授权，禁止复制转载。未经授权，禁止复制转载。 resolving code orga【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。nization.

To make it easy to u【作者：唐霜】【作者：唐霜】se react syntax to c【本文首发于唐霜的博客】【版权所有，侵权必究】reate applications, 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】I wrote a js framewo【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netrk which called Naut【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netil. It is much diffe本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。rence from native re原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】act development.

Now, follow me to ha【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】ve a glance of what 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。Nautil provides.

1. Observer【版权所有】唐霜 www.tangshuang.net

The whole framework 【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。is built on the idea未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net of Observer Pattern【作者：唐霜】原创内容，盗版必究。. This help develope原创内容，盗版必究。【原创内容，转载请注明出处】rs write less code t【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。o implement reactive【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。 system. For example未经授权，禁止复制转载。【本文受版权保护】:

import { Component, Store } from 'nautil'
import { Observer, Text } from 'nautil/components'

const store = new Store({ age: 10 })

class SomeComponent extends Component {
  render() {
    return (
      <Observer
        subscribe={dispatch => store.watch('age', dispatch)}
        unsubscribe={dispatch => store.unwatch('age', dispatch)}
        dispatch={this.update}
      >
        <Text>{store.state.age}</Text>
      </Observer>
    )
  }
}

// in some place, even outside the file by exporting `store`
store.state.age = 20

Here we use a 【版权所有】唐霜 www.tangshuang.netObserver component to wrap s【原创不易，请尊重版权】【原创不易，请尊重版权】ub-components, and w【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】hen its dispatch is invoked, the com转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ponent will rerender【未经授权禁止转载】未经授权，禁止复制转载。. By using Observer component, we can w著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。rite reactive code m【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netore interesting, any【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net responsive object c转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netan be used in react.

2. Store【访问 www.tangshuang.net 获取更多精彩内容】

It is too complex by【转载请注明来源】【关注微信公众号：wwwtangshuangnet】 using redux, why sh【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netould we write so man【本文受版权保护】【版权所有】唐霜 www.tangshuang.nety codes which is not【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。 about our business?【未经授权禁止转载】原创内容，盗版必究。 Nautil provides a i【本文受版权保护】【版权所有】唐霜 www.tangshuang.netnner Store which is 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。very easy to define,【作者：唐霜】【版权所有】唐霜 www.tangshuang.net and use like vue da【转载请注明来源】【版权所有，侵权必究】ta.

import { Store } from 'nautil'

const store = new Store({
  name: 'tomy',
  age: 10,
})

Use api to get and s转载请注明出处：www.tangshuang.net【作者：唐霜】et data:

const name = store.get('name')
store.set('name', 'sunny')

However, to more sen【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】se way is to use state:【访问 www.tangshuang.net 获取更多精彩内容】

const { state } = store
const name = state.name
state.name = 'sunny'

To worker with 【作者：唐霜】Observer, store can be watch转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ed so that rerender 本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】the UI when data cha【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。nged.

const WatchedComponent = observe(store)(OriginComponent)

The 【关注微信公众号：wwwtangshuangnet】WatchedComponent is reactive of stor原创内容，盗版必究。转载请注明出处：www.tangshuang.nete, so when the data 【作者：唐霜】著作权归作者所有，禁止商业用途转载。changed in store, it【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net will rerender UI.

3. Two-Way-Binding【版权所有，侵权必究】

With the ability of 未经授权，禁止复制转载。未经授权，禁止复制转载。Observer, I build up【转载请注明来源】本文版权归作者所有，未经授权不得转载。 a two-way-binding s【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】ystem. Yes, you can 原创内容，盗版必究。转载请注明出处：www.tangshuang.netuse two-way-binding 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。in react too.

import { Component } from 'nautil'
import { Input } from 'nautil/components'

class EditComponent extends Component {
  state = {
    name: '',
  }
  render() {
    return (
      <Input $value={[this.state.name, name => this.setState({ name })]} />
    )
  }
}

The property 【关注微信公众号：wwwtangshuangnet】$value which begin with 本文作者：唐霜，转载请注明出处。$ is a two-way-bindin未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netg property. It recei【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。ve an array which co【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ntains two item. The转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】 second item is a fu【原创不易，请尊重版权】【本文首发于唐霜的博客】nction which is to u【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】pdate the value.

By using 【版权所有，侵权必究】createTwoWayBinding and 【原创内容，转载请注明出处】Store, it very easy to wr著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。ite beautiful codes.

import { Component, Store } from 'nautil'
import { Input } from 'nautil/components'
import { inject, observe, pipe } from 'nautil/operators'

class EditComponent extends Component {
  render() {
    return (
      <Input $value={this.attrs.binding.name} />
    )
  }
}

const store = new Store({ name: '' })
const binding = createTwoWayBinding(store.state)

export default pipe([
  inject('binding', binding),
  observe(store),
])(EditComponent)

We use 【本文首发于唐霜的博客】createTwoWayBinding to create a proxied本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。 object. When we inv未经授权，禁止复制转载。【未经授权禁止转载】oke state.name, we will get a stru本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netctured array.

And it is very easy 转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。and interesting to u【本文首发于唐霜的博客】【原创不易，请尊重版权】se two-way-binding p【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】roperty inside compo原创内容，盗版必究。【本文首发于唐霜的博客】nent. If I want to c【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】reate a component li未经授权，禁止复制转载。【本文受版权保护】ke following:

<Swither $open={binding.open} />

We can easily write 【本文受版权保护】【转载请注明来源】in the component:

class Swither extends Component {
  onToggle() {
    this.attrs.open = !this.attrs.open
  }
}

I do not need to wri【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】te a lot of callback【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。 functions, just cha原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。nge the this.attrs.open. Isn’t it int【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。eresting?

4. operators【原创不易，请尊重版权】

If you have used rea【作者：唐霜】原创内容，盗版必究。ct-redux, you will k【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】now how to use connect function to wrap a 【原创内容，转载请注明出处】【版权所有，侵权必究】component. In Nautil本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。, operators are func【原创内容，转载请注明出处】【未经授权禁止转载】tions to create wrap未经授权，禁止复制转载。【原创不易，请尊重版权】 function.

In Nautil, operators【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net are much more power转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ful than redux conne【原创不易，请尊重版权】【本文受版权保护】ct.

– observe: sho【作者：唐霜】本文作者：唐霜，转载请注明出处。rt for Observer
【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net – inject: pen原创内容，盗版必究。【原创不易，请尊重版权】d a new prop
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。 – connect: in未经授权，禁止复制转载。【转载请注明来源】ject ReactConext int【未经授权禁止转载】转载请注明出处：www.tangshuang.neto a prop
【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 – pollute: ch【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netange sub-components&【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net#8217; defaultProps 【作者：唐霜】【未经授权禁止转载】in runtime of curren本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】t component
原创内容，盗版必究。【未经授权禁止转载】 – scrawl: cha【作者：唐霜】本文作者：唐霜，转载请注明出处。nge sub-components&#【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net8217; defaultStylesh未经授权，禁止复制转载。【原创不易，请尊重版权】eet in runtime

– pipe: combin【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】e operators
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 – multiple: u【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。se batch operator pa本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netrameters one time

Especially in an app本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。lication, we would w著作权归作者所有，禁止商业用途转载。【作者：唐霜】ant to bypass some p【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netrops, well, pollute operator is a magic著作权归作者所有，禁止商业用途转载。【转载请注明来源】. For example, you w未经授权，禁止复制转载。【版权所有，侵权必究】ant to inject some c著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】omponent with an obj原创内容，盗版必究。【原创内容，转载请注明出处】ect globally:

class App extends Component {
  render() {
    ...
  }
}

const pollutedProps = { store }
export default pipe([
  multiple(pollute, [
    [ComponentA, pollutedProps],
    [ComponentB, pollutedProps],
    [ComponentC, pollutedProps],
  ]),
  observe(store),
])(App)

Using the previous c原创内容，盗版必究。转载请注明出处：www.tangshuang.netode, your App will b原创内容，盗版必究。【转载请注明来源】e reactive for store and the given sub-d未经授权，禁止复制转载。【转载请注明来源】eep-components insid【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。e App will auto be p本文作者：唐霜，转载请注明出处。原创内容，盗版必究。atched with store pr未经授权，禁止复制转载。【原创不易，请尊重版权】op.

5. Depository原创内容，盗版必究。

To request data from【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】 backend, yep, use a【版权所有】唐霜 www.tangshuang.net【转载请注明来源】jax. But in fact, we【未经授权禁止转载】【原创内容，转载请注明出处】 do not need to writ本文作者：唐霜，转载请注明出处。【转载请注明来源】e ajax code in your 著作权归作者所有，禁止商业用途转载。【作者：唐霜】project. Depository 【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】is the one to help y【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ou throw away ajax.

It is an abstract of著作权归作者所有，禁止商业用途转载。【转载请注明来源】 data request, you n【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.neteed to know one core本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。 concepts: data sour【转载请注明来源】【原创不易，请尊重版权】ce. A data source is【未经授权禁止转载】原创内容，盗版必究。 a configuration for【作者：唐霜】本文作者：唐霜，转载请注明出处。 data request, and u本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。se the id to get dat本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.neta from depository wi著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。thout ajax code.

import { Depository } from 'nautil'

const depo = new Depository({
  name: 'depo_name',
  baseURL: '/api/v2',
  sources: [
    {
      id: 'some',
      path: '/some',
      method: 'get',
    },
  ],
})

I defined a data sou本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】rce ‘some̵本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】7; in the depository【原创不易，请尊重版权】未经授权，禁止复制转载。 ‘depo_name【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】217;, and then I can【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】 request the data by【版权所有】唐霜 www.tangshuang.net【本文受版权保护】:

const data = depo.get('some') // get data from depo cache
depo.request('some').then(data => console.log(data)) // request data from backend in a Promise

.get is different from 【原创内容，转载请注明出处】.request, it do not request 未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】data from backend im本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。mediately, it reques【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。t data from local ca本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netche first, so it is 原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netsynchronous. Working【本文受版权保护】【作者：唐霜】 with observe:著作权归作者所有，禁止商业用途转载。

class SomeComponent extends Component {
  render() {
    const { depo } = this.attrs
    const some = depo.get('some')
    return (
      <Prepare isReady={some} loading={<Text>loading...</Text>}>
        {() => <Text>{some.name}</Text>}
      </Prepare>
    )
  }
}

export default pipe([
  inject('depo', depo),
  observe(dispatch => depo.subscribe('some', dispatch), dispatch => depo.unsubscribe('some', dispatch)),
])(SomeComponent)

You do not need to s【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netend ajax in this cod【作者：唐霜】【版权所有】唐霜 www.tangshuang.nete, depository will d【本文首发于唐霜的博客】【转载请注明来源】o it for you inside.未经授权，禁止复制转载。【本文受版权保护】 Because of subscribe to depo, the UI wil【未经授权禁止转载】【本文首发于唐霜的博客】l rereender automati【本文受版权保护】【本文首发于唐霜的博客】cally.

6. Stylesheet原创内容，盗版必究。

Nautil component wil未经授权，禁止复制转载。原创内容，盗版必究。l parse stylesheet automatically to be【作者：唐霜】本文版权归作者所有，未经授权不得转载。 used in different p本文作者：唐霜，转载请注明出处。原创内容，盗版必究。latform.

<Section stylesheet={'className'}></Section>  ## string
<Section stylesheet={{ className: this.state.name === 'tomy' }}></Section> ## object with boolean value
<Section stylesheet={{ color: 'red', width: 120, height: 90 }}></Section> ## style object in react
<Section stylesheet={['className', { otherClass: this.state.boolean }, { color: 'blue', fontSize: 14 }]}></Section> ## mix array

Especially, when you【版权所有，侵权必究】【原创内容，转载请注明出处】 set transform style, you do not n【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。eed to worry about r【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】eact-native parsing,【作者：唐霜】著作权归作者所有，禁止商业用途转载。 Nautil will do it a【本文首发于唐霜的博客】【本文受版权保护】utomatically.

<Section stylesheet={{ transform: 'translateX(-5px)' }}></Section>

7. cross-platform【本文受版权保护】

One of Nautil’未经授权，禁止复制转载。【本文首发于唐霜的博客】s goals is to build 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netcross-platform appli【本文受版权保护】【原创内容，转载请注明出处】cations. Currently, 未经授权，禁止复制转载。【本文受版权保护】nautil support the f转载请注明出处：www.tangshuang.net原创内容，盗版必究。ollowing platforms: 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netweb, web-mobile, web【原创不易，请尊重版权】原创内容，盗版必究。-component (h5-app),【作者：唐霜】【未经授权禁止转载】 react-native (ios, 【原创内容，转载请注明出处】【作者：唐霜】andriod), miniapp (w【转载请注明来源】【转载请注明来源】echat-app, others us原创内容，盗版必究。本文作者：唐霜，转载请注明出处。e antmove to transfo本文作者：唐霜，转载请注明出处。【作者：唐霜】rm).

I have create a CLI 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。tool nautil-cli【版权所有】唐霜 www.tangshuang.net, which can helop de原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netvelopers to start th【转载请注明来源】【未经授权禁止转载】eir nautil applicati【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。on more easy.

This is the real tim【转载请注明来源】【关注微信公众号：wwwtangshuangnet】e to Write one, Run anywh【作者：唐霜】著作权归作者所有，禁止商业用途转载。ere. Clone 【关注微信公众号：wwwtangshuangnet】nautil-demo【版权所有，侵权必究】 for playing.未经授权，禁止复制转载。

8. Stream本文版权归作者所有，未经授权不得转载。

Different from react本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】 event system, Nauit原创内容，盗版必究。【未经授权禁止转载】l allow developers t【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。o use rxjs in their 【本文受版权保护】【原创不易，请尊重版权】event, the events ha【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】ndler functions can 【作者：唐霜】【作者：唐霜】be normal handler fu未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。nction to receive ca【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netllback parameters. O未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】r it can be observab著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】le stream pipe opera【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。tors.

<SomeComponent onHint={[map(e => e.target.value * 2), value => this.setState({ value })]}></SomeComponent>

In the previous code原创内容，盗版必究。【原创不易，请尊重版权】, the first item is 【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】a rxjs pipe operator本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。, and the latest ite著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。m in the array is onHint callback function w【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。hich receive the str【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.neteam output.

In the component, de【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netvelopers can use this.onHint$ to operate onHint e著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】vent stream.

class SomeComponent extends Component {
  onDigested() {
    this.onHint$.subscribe((value) => {
      // you can subscribe on the stream when digested
      // so that, you do not need to write a wrapper handle
    })
  }
  handle(e) {
    this.onHint$.next(e)
  }
}

9. Model【转载请注明来源】

Modern frontend appl【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ications are always 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netstruggling with data【本文首发于唐霜的博客】【作者：唐霜】. Nautil provide a M【本文首发于唐霜的博客】【作者：唐霜】odel to control data原创内容，盗版必究。本文作者：唐霜，转载请注明出处。 for some necessary 【关注微信公众号：wwwtangshuangnet】【作者：唐霜】place, for example, 【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netin a form.

Model is a very stro本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ng data type control转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ler, which is based 未经授权，禁止复制转载。【作者：唐霜】on a Schema system.

import { Model } from 'nautil'
import { Natural } from 'nautil/types'

class PersonModel extends Model {
  schema() {
    return {
      name: {
        type: String,
        default: '',
        validators: [
          {
            validate: value => value && value.length > 6,
            message: 'name should must longer than 6 letters.',
          },
        ],
      },
      age: {
        type: Natural,
        default: 0,
        get: value => value + '', // convert to be a string when get
        set: value => +value, // convert to be a number when save into model
      },
    }
  }
}

const model = new PersonModel() // you can set default value here
const state = model.state // the same usage as Store

The model instance i【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】s very sensitive wit原创内容，盗版必究。【未经授权禁止转载】h data type. When yo转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。u set a un-checked v【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。alue into it, it may【原创不易，请尊重版权】【未经授权禁止转载】 not accept the valu本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。e because of data ch未经授权，禁止复制转载。【未经授权禁止转载】ecking fail.

On the other hand, t【本文首发于唐霜的博客】【未经授权禁止转载】he validators formulators are very useful in 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netform, for example va未经授权，禁止复制转载。【转载请注明来源】lidate in runtime:

<Section><Input $value={[state.name, name => state.name = name]} /></Section>
{model.message('name') ? <Section stylesheet="error-message">{model.message('name')}</Section> : null}

And Model instance i【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。s observable too, so【转载请注明来源】转载请注明出处：www.tangshuang.net you can use it with【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 observe operator in your co原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。mponent.

export default pipe([
  initialize('person', PersonModel),
  observe('person'),
])(SomeComponent)

Read more from my bl【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。og to taste Model.【作者：唐霜】

10. Props Statement【关注微信公众号：wwwtangshuangnet】

Although you can use【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net prop-types to check原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net data type in react,【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。 Nautil provides a m著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ore sensitive type c【转载请注明来源】【版权所有，侵权必究】hecking system based【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net on tyshemo【访问 www.tangshuang.net 获取更多精彩内容】, which can check de原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ep nested object eas【转载请注明来源】【本文首发于唐霜的博客】ily.

class SomeComponent extends Component {
  static props = {
    source: {
      name: String,
      books: [
        {
          name: String, 
          price: Positive,
        },
      ],
    },
  }
}

It is very intuitive【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】, without any unders【未经授权禁止转载】【版权所有，侵权必究】tanding. However, it原创内容，盗版必究。【转载请注明来源】 is compatible with 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】prop-types, so that 【原创内容，转载请注明出处】未经授权，禁止复制转载。all react components著作权归作者所有，禁止商业用途转载。【本文受版权保护】 can be used in Naut【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】il system.

These are what Nauti【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。l bring up which are【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】 different from reac【转载请注明来源】【关注微信公众号：wwwtangshuangnet】t development. It he【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】lp developers write 【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。less code and make c【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netode structure more c【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netlear. If you are tir【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ed with complex scat【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。tered react ecology 【转载请注明来源】著作权归作者所有，禁止商业用途转载。libraries, have a tr本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】y with Nautil.

The next step of Nau未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】til is to make a UI 【未经授权禁止转载】【版权所有，侵权必究】framework which can 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。run cross-platform. 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。If you a interested 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】in this project, wel【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。come to join me on github【转载请注明来源】.【本文受版权保护】

2019-10-13 2702