Nautil is a javascri原创内容，盗版必究。本文作者：唐霜，转载请注明出处。pt framework based o本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】n React which is a m【原创不易，请尊重版权】【转载请注明来源】odern reactive UI li【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netbrary. In the ecosys本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】tem of react, develo【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】pers are always foll【版权所有】唐霜 www.tangshuang.net【作者：唐霜】owing Flux architect【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ure.

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

To make it easy to u【作者：唐霜】【未经授权禁止转载】se react syntax to c【本文首发于唐霜的博客】【版权所有，侵权必究】reate applications, 本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。I wrote a js framewo【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】rk which called Naut【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netil. 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 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】is built on the idea【本文受版权保护】未经授权，禁止复制转载。 of Observer Pattern原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】. This help develope转载请注明出处：www.tangshuang.net【本文受版权保护】rs write less code t【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。o implement reactive转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 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 Observer component to wrap s本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。ub-components, and w【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】hen its dispatch is invoked, the com【本文首发于唐霜的博客】原创内容，盗版必究。ponent will rerender本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。. By using Observer component, we can w原创内容，盗版必究。本文作者：唐霜，转载请注明出处。rite reactive code m转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】ore interesting, any原创内容，盗版必究。【本文首发于唐霜的博客】 responsive object c著作权归作者所有，禁止商业用途转载。【转载请注明来源】an be used in react.

2. Store

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

import { Store } from 'nautil'

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

Use api to get and s著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】et data:

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

However, to more sen原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netse way is to use state:

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

To worker with Observer, store can be watch原创内容，盗版必究。转载请注明出处：www.tangshuang.neted so that rerender 【本文受版权保护】【原创不易，请尊重版权】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 【作者：唐霜】【版权所有，侵权必究】Observer, I build up【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net a two-way-binding s未经授权，禁止复制转载。【版权所有，侵权必究】ystem. Yes, you can 【本文受版权保护】【版权所有】唐霜 www.tangshuang.netuse two-way-binding 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】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转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】g property. It recei本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netve an array which co【转载请注明来源】【作者：唐霜】ntains two item. The本文作者：唐霜，转载请注明出处。原创内容，盗版必究。 second item is a fu转载请注明出处：www.tangshuang.net【未经授权禁止转载】nction which is to u【访问 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转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】oke state.name, we will get a stru本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ctured array.

And it is very easy 【作者：唐霜】著作权归作者所有，禁止商业用途转载。and interesting to u【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】se two-way-binding p原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netroperty inside compo【本文受版权保护】【版权所有，侵权必究】nent. If I want to c【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。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本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】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转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netct-redux, you will k【未经授权禁止转载】本文作者：唐霜，转载请注明出处。now how to use connect function to wrap a 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netcomponent. In Nautil本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】, operators are func【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】tions to create wrap【本文受版权保护】【转载请注明来源】 function.

In Nautil, operators【转载请注明来源】【原创内容，转载请注明出处】 are much more power转载请注明出处：www.tangshuang.net【本文受版权保护】ful than redux conne本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netct.

– observe: sho【转载请注明来源】未经授权，禁止复制转载。rt for Observer
【本文首发于唐霜的博客】 – inject: pen【作者：唐霜】【转载请注明来源】d a new prop
【作者：唐霜】 – connect: in原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ject ReactConext int【作者：唐霜】未经授权，禁止复制转载。o a prop
本文作者：唐霜，转载请注明出处。 – pollute: ch本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ange sub-components&原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。#8217; defaultProps 【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。in runtime of curren【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】t component
【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。et 获取更多精彩内容】 – scrawl: cha本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。nge sub-components&#本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net8217; 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未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netlication, we would w【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。ant to bypass some p本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】rops, 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【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ode, your App will b著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】e reactive for store and the given sub-d【原创内容，转载请注明出处】【本文受版权保护】eep-components insid【版权所有】唐霜 www.tangshuang.net【本文受版权保护】e App will auto be p【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】atched with store pr【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】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 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】project. Depository 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netis the one to help y转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ou throw away ajax.

It is an abstract of【转载请注明来源】【原创不易，请尊重版权】 data request, you n【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。eed to know one core【转载请注明来源】著作权归作者所有，禁止商业用途转载。 concepts: data sour原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】ce. A data source is【原创内容，转载请注明出处】未经授权，禁止复制转载。 a configuration for【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】 data request, and u转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。se the id to get dat【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】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̵转载请注明出处：www.tangshuang.net【作者：唐霜】7; in the depository【作者：唐霜】未经授权，禁止复制转载。 ‘depo_name本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。217;, and then I can【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】 request the data by著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。:

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 获取更多精彩内容】转载请注明出处：www.tangshuang.netdata from backend im【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。mediately, it reques未经授权，禁止复制转载。转载请注明出处：www.tangshuang.nett data from local ca原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netche first, so it is 原创内容，盗版必究。【本文受版权保护】synchronous. Working原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net 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【未经授权禁止转载】【作者：唐霜】end ajax in this cod【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.nete, depository will d【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。o it for you inside.著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 Because of subscribe to depo, the UI wil转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netl rereender automati本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netcally.

6. Stylesheet

Nautil component wil未经授权，禁止复制转载。【本文首发于唐霜的博客】l parse stylesheet automatically to be【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 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【版权所有，侵权必究】未经授权，禁止复制转载。eed to worry about r未经授权，禁止复制转载。【原创不易，请尊重版权】eact-native parsing,【本文受版权保护】原创内容，盗版必究。 Nautil will do it a【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。utomatically.

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

7. cross-platform

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

I have create a CLI 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】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【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。e to Write one, Run anywh原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netere. Clone nautil-demo for playing.

8. Stream

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

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

In the previous code本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】, the first item is 本文作者：唐霜，转载请注明出处。【未经授权禁止转载】a rxjs pipe operator未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net, and the latest ite【访问 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【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。velopers 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本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netications are always 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】struggling with data【本文首发于唐霜的博客】【版权所有，侵权必究】. Nautil provide a M【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。odel to control data著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】 for some necessary 原创内容，盗版必究。原创内容，盗版必究。place, for example, 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】in a form.

Model is a very stro【原创内容，转载请注明出处】【转载请注明来源】ng data type control【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netler, which is based 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。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本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】h data type. When yo【关注微信公众号：wwwtangshuangnet】【转载请注明来源】u set a un-checked v原创内容，盗版必究。【本文受版权保护】alue into it, it may【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 not accept the valu本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete because of data ch著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】ecking fail.

On the other hand, t【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】he validators formulators are very useful in 【转载请注明来源】【本文受版权保护】form, for example va【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】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【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】mponent.

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

Read more from my bl本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。og to taste Model.

10. Props Statement

Although you can use本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。 prop-types to check【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net data type in react,【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。 Nautil provides a m【原创内容，转载请注明出处】【原创内容，转载请注明出处】ore sensitive type c本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】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【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net, without any unders【未经授权禁止转载】【版权所有，侵权必究】tanding. However, it著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net is compatible with 本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netprop-types, so that 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。all react components【作者：唐霜】本文版权归作者所有，未经授权不得转载。 can be used in Naut【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netil system.

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

The next step of Nau著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。til is to make a UI 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】framework which can 未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netrun cross-platform. 本文作者：唐霜，转载请注明出处。【作者：唐霜】If you a interested 【未经授权禁止转载】未经授权，禁止复制转载。in this project, wel【本文受版权保护】转载请注明出处：www.tangshuang.netcome to join me on github.

2019-10-13 2917