Nautil is a javascri转载请注明出处：www.tangshuang.net【作者：唐霜】pt framework based o著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。n React which is a m【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。odern reactive UI li【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。brary. In the ecosys【作者：唐霜】本文版权归作者所有，未经授权不得转载。tem of react, develo【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。pers are always foll转载请注明出处：www.tangshuang.net【本文受版权保护】owing Flux architect原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ure.

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

To make it easy to u本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】se react syntax to c【作者：唐霜】【原创内容，转载请注明出处】reate applications, 【作者：唐霜】【原创内容，转载请注明出处】I wrote a js framewo本文版权归作者所有，未经授权不得转载。【转载请注明来源】rk which called Naut【版权所有，侵权必究】【本文首发于唐霜的博客】il. It is much diffe未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。rence from native re原创内容，盗版必究。【原创不易，请尊重版权】act development.

Now, follow me to ha原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ve a glance of what 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netNautil provides.

1. Observer

The whole framework 【原创不易，请尊重版权】【版权所有，侵权必究】is built on the idea【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。 of Observer Pattern著作权归作者所有，禁止商业用途转载。【本文受版权保护】. This help develope原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。rs 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【本文首发于唐霜的博客】【转载请注明来源】hen its dispatch is invoked, the com【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ponent will rerender【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。. By using Observer component, we can w本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。rite reactive code m著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netore interesting, any【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。 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.netould we write so man【原创内容，转载请注明出处】未经授权，禁止复制转载。y codes which is not本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】 about our business?【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】 Nautil provides a i本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。nner Store which is 【作者：唐霜】本文版权归作者所有，未经授权不得转载。very 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转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et data:

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

However, to more sen【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】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 【未经授权禁止转载】未经授权，禁止复制转载。the UI when data cha转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】nged.

const WatchedComponent = observe(store)(OriginComponent)

The WatchedComponent is reactive of stor本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】e, so when the data 【作者：唐霜】【本文受版权保护】changed in store, it著作权归作者所有，禁止商业用途转载。【作者：唐霜】 will rerender UI.

3. Two-Way-Binding

With the ability of 本文版权归作者所有，未经授权不得转载。【作者：唐霜】Observer, I build up转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net a two-way-binding s原创内容，盗版必究。【版权所有，侵权必究】ystem. Yes, you can 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】use two-way-binding 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netin 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转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。g property. It recei转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ve an array which co本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ntains two item. The【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 second item is a fu转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。nction which is to u【原创内容，转载请注明出处】【作者：唐霜】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著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netoke state.name, we will get a stru本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ctured array.

And it is very easy 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。and interesting to u原创内容，盗版必究。【本文首发于唐霜的博客】se two-way-binding p【作者：唐霜】【未经授权禁止转载】roperty inside compo【本文受版权保护】本文版权归作者所有，未经授权不得转载。nent. If I want to c转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。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.nette a lot of callback转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net functions, just cha【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。nge the this.attrs.open. Isn’t it int【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】eresting?

4. operators

If you have used rea原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ct-redux, you will k转载请注明出处：www.tangshuang.net【本文受版权保护】now how to use connect function to wrap a 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。component. In Nautil【未经授权禁止转载】转载请注明出处：www.tangshuang.net, operators are func著作权归作者所有，禁止商业用途转载。【本文受版权保护】tions to create wrap【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 function.

In Nautil, operators【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】 are much more power【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ful than redux conne【转载请注明来源】【版权所有】唐霜 www.tangshuang.netct.

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

– pipe: combin本文版权归作者所有，未经授权不得转载。【作者：唐霜】e operators
【本文首发于唐霜的博客】 – multiple: u【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】se batch operator pa本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】rameters one time

Especially in an app转载请注明出处：www.tangshuang.net原创内容，盗版必究。lication, we would w【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ant to bypass some p【作者：唐霜】【版权所有】唐霜 www.tangshuang.netrops, 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【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。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本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ode, your App will b【转载请注明来源】【本文受版权保护】e reactive for store and the given sub-d【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】eep-components insid【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。e App will auto be p【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netatched 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.netis the one to help y【原创内容，转载请注明出处】原创内容，盗版必究。ou throw away ajax.

It is an abstract of【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 data request, you n【版权所有】唐霜 www.tangshuang.net【本文受版权保护】eed to know one core【作者：唐霜】【本文首发于唐霜的博客】 concepts: data sour【未经授权禁止转载】【原创不易，请尊重版权】ce. A data source is转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。 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未经授权，禁止复制转载。【本文受版权保护】rce ‘some̵著作权归作者所有，禁止商业用途转载。【作者：唐霜】7; in the depository著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】 ‘depo_name未经授权，禁止复制转载。【本文受版权保护】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 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】data from backend im【作者：唐霜】【转载请注明来源】mediately, it reques【转载请注明来源】本文版权归作者所有，未经授权不得转载。t data from local ca原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】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【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。end ajax in this cod原创内容，盗版必究。【未经授权禁止转载】e, depository will d【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.neto it for you inside.原创内容，盗版必究。【转载请注明来源】 Because of subscribe to depo, the UI wil【原创不易，请尊重版权】【原创内容，转载请注明出处】l rereender automati原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】cally.

6. Stylesheet

Nautil component wil【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netl 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【作者：唐霜】未经授权，禁止复制转载。eed to worry about r【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。eact-native parsing,原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。 Nautil will do it a【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。utomatically.

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

7. cross-platform

One of Nautil’【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】s goals is to build 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】cross-platform appli【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】cations. Currently, 【原创不易，请尊重版权】【本文首发于唐霜的博客】nautil support the f【本文首发于唐霜的博客】【原创内容，转载请注明出处】ollowing platforms: 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】web, 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 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】tool nautil-cli, which can helop de著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。velopers to start th【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。eir nautil applicati未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】on more easy.

This is the real tim【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。e to Write one, Run anywh原创内容，盗版必究。【版权所有，侵权必究】ere. Clone nautil-demo for playing.

8. Stream

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

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

In the previous code【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。, the first item is 【转载请注明来源】【作者：唐霜】a rxjs pipe operator【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。, and the latest ite【作者：唐霜】【版权所有】唐霜 www.tangshuang.netm in the array is onHint callback function w【原创内容，转载请注明出处】【版权所有，侵权必究】hich receive the str【版权所有】唐霜 www.tangshuang.net【作者：唐霜】eam output.

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

Model is a very stro本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ng data type control【原创不易，请尊重版权】【原创不易，请尊重版权】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原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】s very sensitive wit本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】h data type. When yo【作者：唐霜】【转载请注明来源】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【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。he validators formulators are very useful in 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。form, 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【本文受版权保护】【关注微信公众号：wwwtangshuangnet】mponent.

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

Read more from my bl【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】og to taste Model.

10. Props Statement

Although you can use【作者：唐霜】【版权所有】唐霜 www.tangshuang.net prop-types to check未经授权，禁止复制转载。【原创不易，请尊重版权】 data type in react,【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。 Nautil provides a m【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ore sensitive type c原创内容，盗版必究。【转载请注明来源】hecking system based【转载请注明来源】未经授权，禁止复制转载。 on tyshemo, which can check de【本文首发于唐霜的博客】【版权所有】唐霜 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本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 is compatible with 原创内容，盗版必究。【本文首发于唐霜的博客】prop-types, so that 【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。all react components【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net can be used in Naut转载请注明出处：www.tangshuang.net【版权所有，侵权必究】il system.

These are what Nauti【本文首发于唐霜的博客】未经授权，禁止复制转载。l bring up which are【原创内容，转载请注明出处】【本文首发于唐霜的博客】 different from reac【本文首发于唐霜的博客】【作者：唐霜】t development. It he本文作者：唐霜，转载请注明出处。【未经授权禁止转载】lp developers write 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netless code and make c转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ode structure more c原创内容，盗版必究。本文作者：唐霜，转载请注明出处。lear. If you are tir【本文受版权保护】著作权归作者所有，禁止商业用途转载。ed with complex scat【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】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. 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。If you a interested 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】in this project, wel【本文首发于唐霜的博客】【版权所有，侵权必究】come to join me on github.

2019-10-13 3051