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

However, its not eas本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】y to write applicati本文作者：唐霜，转载请注明出处。【未经授权禁止转载】on level code with r著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。eact. Even though we【未经授权禁止转载】未经授权，禁止复制转载。 have redux and many【转载请注明来源】【转载请注明来源】 third libraries, we原创内容，盗版必究。【版权所有，侵权必究】 still should have t本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】o waste much time on未经授权，禁止复制转载。【本文首发于唐霜的博客】 resolving code orga本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】nization.

To make it easy to u【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。se react syntax to c转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netreate applications, 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。I wrote a js framewo本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。rk which called Naut本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netil. It is much diffe【本文受版权保护】本文作者：唐霜，转载请注明出处。rence from native re原创内容，盗版必究。【作者：唐霜】act development.

Now, follow me to ha转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。ve a glance of what 【关注微信公众号：wwwtangshuangnet】【本文受版权保护】Nautil provides.

1. Observer

The whole framework 转载请注明出处：www.tangshuang.net【未经授权禁止转载】is built on the idea著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。 of Observer Pattern本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。. This help develope转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netrs write less code t【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。o implement reactive【原创内容，转载请注明出处】【作者：唐霜】 system. For example【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net:

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 Observer component to wrap s【未经授权禁止转载】未经授权，禁止复制转载。ub-components, and w转载请注明出处：www.tangshuang.net原创内容，盗版必究。hen its dispatch is invoked, the com转载请注明出处：www.tangshuang.net【未经授权禁止转载】ponent will rerender【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。. By using Observer component, we can w未经授权，禁止复制转载。【原创不易，请尊重版权】rite reactive code m本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netore interesting, any【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。 responsive object c转载请注明出处：www.tangshuang.net【本文受版权保护】an be used in react.

2. Store

It is too complex by【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】 using redux, why sh【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netould we write so man【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。y codes which is not原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】 about our business?原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】 Nautil provides a i【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。nner Store which is 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netvery easy to define,【作者：唐霜】【原创内容，转载请注明出处】 and use like vue da【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ta.

import { Store } from 'nautil'

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

Use api to get and s著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。et data:

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

However, to more sen【未经授权禁止转载】【未经授权禁止转载】se way is to use state:

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

To worker with Observer, store can be watch著作权归作者所有，禁止商业用途转载。【本文受版权保护】ed so that rerender 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】the UI when data cha【未经授权禁止转载】本文作者：唐霜，转载请注明出处。nged.

const WatchedComponent = observe(store)(OriginComponent)

The WatchedComponent is reactive of stor原创内容，盗版必究。未经授权，禁止复制转载。e, so when the data 【原创内容，转载请注明出处】原创内容，盗版必究。changed in store, it原创内容，盗版必究。【本文受版权保护】 will rerender UI.

3. Two-Way-Binding

With the ability of 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netObserver, I build up【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net a two-way-binding s【原创不易，请尊重版权】【原创内容，转载请注明出处】ystem. Yes, you can 未经授权，禁止复制转载。【未经授权禁止转载】use 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 $value which begin with $ is a two-way-bindin本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。g property. It recei【作者：唐霜】本文版权归作者所有，未经授权不得转载。ve an array which co著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ntains two item. The【作者：唐霜】转载请注明出处：www.tangshuang.net second item is a fu未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netnction which is to u【转载请注明来源】【本文受版权保护】pdate the value.

By using createTwoWayBinding and Store, it very easy to wr本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】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【版权所有，侵权必究】转载请注明出处：www.tangshuang.netoke state.name, we will get a stru【本文首发于唐霜的博客】【转载请注明来源】ctured array.

And it is very easy 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netand interesting to u【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】se two-way-binding p未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。roperty inside compo【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】nent. If I want to c本文作者：唐霜，转载请注明出处。【转载请注明来源】reate a component li【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netke 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【关注微信公众号：wwwtangshuangnet】【本文受版权保护】nge the this.attrs.open. Isn’t it int【转载请注明来源】原创内容，盗版必究。eresting?

4. operators

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

In Nautil, operators本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】 are much more power本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ful than redux conne转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ct.

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

– pipe: combin【本文首发于唐霜的博客】未经授权，禁止复制转载。e operators
本文作者：唐霜，转载请注明出处。 – multiple: u本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】se batch operator pa著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】rameters one time

Especially in an app【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】lication, we would w本文版权归作者所有，未经授权不得转载。【转载请注明来源】ant to bypass some p【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。rops, well, pollute operator is a magic【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。. For example, you w【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。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【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】e reactive for store and the given sub-d转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.neteep-components insid转载请注明出处：www.tangshuang.net【版权所有，侵权必究】e App will auto be p本文作者：唐霜，转载请注明出处。【作者：唐霜】atched with store pr本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。op.

5. Depository

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

It is an abstract of【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 data request, you n著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.neteed to know one core本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】 concepts: data sour本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ce. A data source is【转载请注明来源】【版权所有，侵权必究】 a configuration for【版权所有，侵权必究】转载请注明出处：www.tangshuang.net data request, and u【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。se the id to get dat【本文首发于唐霜的博客】【本文首发于唐霜的博客】a 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未经授权，禁止复制转载。【版权所有，侵权必究】rce ‘some̵【作者：唐霜】【版权所有，侵权必究】7; in the depository【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。 ‘depo_name转载请注明出处：www.tangshuang.net【未经授权禁止转载】217;, and then I can【本文首发于唐霜的博客】【原创内容，转载请注明出处】 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著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】t data from local ca本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。che first, so it is 【未经授权禁止转载】原创内容，盗版必究。synchronous. 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.net本文作者：唐霜，转载请注明出处。end ajax in this cod著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.nete, depository will d本文版权归作者所有，未经授权不得转载。【转载请注明来源】o it for you inside.【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 Because of subscribe to depo, the UI wil【版权所有】唐霜 www.tangshuang.net【作者：唐霜】l rereender automati【作者：唐霜】原创内容，盗版必究。cally.

6. Stylesheet

Nautil component wil【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netl parse stylesheet automatically to be【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 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著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net set transform style, you do not n【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。eed to worry about r【转载请注明来源】【版权所有】唐霜 www.tangshuang.neteact-native parsing,原创内容，盗版必究。本文作者：唐霜，转载请注明出处。 Nautil will do it a【转载请注明来源】【本文首发于唐霜的博客】utomatically.

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

7. cross-platform

One of Nautil’转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。s goals is to build 原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】cross-platform appli原创内容，盗版必究。【原创不易，请尊重版权】cations. Currently, 著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】nautil support the f未经授权，禁止复制转载。未经授权，禁止复制转载。ollowing platforms: 【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】web, web-mobile, web【未经授权禁止转载】转载请注明出处：www.tangshuang.net-component (h5-app),本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 react-native (ios, 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netandriod), miniapp (w转载请注明出处：www.tangshuang.net原创内容，盗版必究。echat-app, others us著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。e antmove to transfo【本文首发于唐霜的博客】【本文首发于唐霜的博客】rm).

I have create a CLI 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】tool nautil-cli, which can helop de原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。velopers to start th著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】eir nautil applicati【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】on more easy.

This is the real tim【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。e to Write one, Run anywh本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netere. Clone nautil-demo for playing.

8. Stream

Different from react【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 event system, Nauit原创内容，盗版必究。转载请注明出处：www.tangshuang.netl allow developers t本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.neto use rxjs in their 【原创内容，转载请注明出处】【版权所有，侵权必究】event, the events ha本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ndler functions can 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netbe normal handler fu本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。nction to receive ca本文作者：唐霜，转载请注明出处。原创内容，盗版必究。llback parameters. O【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。r it can be observab本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。le stream pipe opera原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】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【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】m in the array is onHint callback function w【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】hich receive the str【原创内容，转载请注明出处】原创内容，盗版必究。eam output.

In the component, de本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。velopers can use this.onHint$ to operate onHint e著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】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 【作者：唐霜】著作权归作者所有，禁止商业用途转载。struggling with data【作者：唐霜】本文作者：唐霜，转载请注明出处。. Nautil provide a M【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。odel to control data【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net for some necessary 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。place, for example, 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netin a form.

Model is a very stro转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ng data type control【版权所有，侵权必究】转载请注明出处：www.tangshuang.netler, 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【本文受版权保护】【版权所有，侵权必究】s very sensitive wit【本文受版权保护】【本文首发于唐霜的博客】h data type. When yo转载请注明出处：www.tangshuang.net【作者：唐霜】u set a un-checked v【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】alue into it, it may【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 not accept the valu本文作者：唐霜，转载请注明出处。原创内容，盗版必究。e because of data ch本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ecking fail.

On the other hand, t原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】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【原创不易，请尊重版权】未经授权，禁止复制转载。s observable too, so【版权所有，侵权必究】【原创内容，转载请注明出处】 you can use it with observe operator in your co【未经授权禁止转载】未经授权，禁止复制转载。mponent.

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

Read more from my bl【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netog to taste Model.

10. Props Statement

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

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

It is very intuitive著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】, without any unders【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。tanding. However, it转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。 is compatible with 【本文首发于唐霜的博客】【作者：唐霜】prop-types, so that 【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。all react components转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】 can be used in Naut【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】il system.

These are what Nauti【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。l bring up which are【本文受版权保护】【未经授权禁止转载】 different from reac【未经授权禁止转载】转载请注明出处：www.tangshuang.nett development. It he【转载请注明来源】本文作者：唐霜，转载请注明出处。lp developers write 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。less code and make c【原创内容，转载请注明出处】未经授权，禁止复制转载。ode structure more c未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。lear. If you are tir【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.neted with complex scat本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】tered react ecology 原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。libraries, have a tr本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。y with Nautil.

The next step of Nau【未经授权禁止转载】【版权所有，侵权必究】til is to make a UI 原创内容，盗版必究。未经授权，禁止复制转载。framework which can 【原创不易，请尊重版权】【本文首发于唐霜的博客】run cross-platform. 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】If you a interested 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】in this project, wel本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。come to join me on github.

2019-10-13 2825