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转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】tem of react, develo著作权归作者所有，禁止商业用途转载。【作者：唐霜】pers are always foll原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。owing Flux architect【作者：唐霜】本文版权归作者所有，未经授权不得转载。ure.

However, its not eas【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。y to write applicati【原创不易，请尊重版权】【转载请注明来源】on level code with r原创内容，盗版必究。未经授权，禁止复制转载。eact. Even though we【本文受版权保护】【本文首发于唐霜的博客】 have redux and many【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。 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转载请注明出处：www.tangshuang.net【转载请注明来源】reate applications, 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】I wrote a js framewo【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netrk which called Naut本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】il. It is much diffe【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。rence from native re【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。act development.

Now, follow me to ha【原创不易，请尊重版权】【原创内容，转载请注明出处】ve a glance of what 本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】Nautil provides.

1. Observer

The whole framework 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】is built on the idea本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。 of Observer Pattern本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】. This help develope【本文首发于唐霜的博客】未经授权，禁止复制转载。rs write less code t本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。o implement reactive著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。 system. For example【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】:

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【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ub-components, and w著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】hen its dispatch is invoked, the com【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ponent will rerender【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】. By using Observer component, we can w本文版权归作者所有，未经授权不得转载。【本文受版权保护】rite reactive code m本文作者：唐霜，转载请注明出处。【未经授权禁止转载】ore interesting, any【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 responsive object c【转载请注明来源】【本文首发于唐霜的博客】an be used in react.

2. Store

It is too complex by【版权所有，侵权必究】【作者：唐霜】 using redux, why sh未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netould we write so man转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】y codes which is not著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】 about our business?【作者：唐霜】著作权归作者所有，禁止商业用途转载。 Nautil provides a i本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】nner Store which is 【原创不易，请尊重版权】转载请注明出处：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【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】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 【原创内容，转载请注明出处】未经授权，禁止复制转载。the UI when data cha【转载请注明来源】原创内容，盗版必究。nged.

const WatchedComponent = observe(store)(OriginComponent)

The WatchedComponent is reactive of stor原创内容，盗版必究。【本文首发于唐霜的博客】e, so when the data 转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netchanged in store, it著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 will rerender UI.

3. Two-Way-Binding

With the ability of 【关注微信公众号：wwwtangshuangnet】【转载请注明来源】Observer, I build up著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】 a two-way-binding s【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netystem. Yes, you can 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】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【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ve an array which co本文作者：唐霜，转载请注明出处。【转载请注明来源】ntains two item. The【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】 second item is a fu【版权所有，侵权必究】【转载请注明来源】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.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.net【版权所有】唐霜 www.tangshuang.netroperty inside compo【作者：唐霜】本文作者：唐霜，转载请注明出处。nent. If I want to c【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。reate a component li【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。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【本文受版权保护】【本文受版权保护】 functions, just cha【原创不易，请尊重版权】【本文受版权保护】nge the this.attrs.open. Isn’t it int【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.neteresting?

4. operators

If you have used rea本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ct-redux, you will k【版权所有，侵权必究】【转载请注明来源】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【关注微信公众号：wwwtangshuangnet】【本文受版权保护】 are much more power【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ful than redux conne【作者：唐霜】【原创不易，请尊重版权】ct.

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

– pipe: combin【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nete operators
【版权所有，侵权必究】 – multiple: u【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。se batch operator pa【未经授权禁止转载】【转载请注明来源】rameters one time

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

5. Depository

To request data from【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。 backend, yep, use a【未经授权禁止转载】【原创不易，请尊重版权】jax. But in fact, we【转载请注明来源】未经授权，禁止复制转载。 do not need to writ【原创不易，请尊重版权】原创内容，盗版必究。e ajax code in your 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。project. Depository 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。is the one to help y转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ou throw away ajax.

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

6. Stylesheet

Nautil component wil【原创内容，转载请注明出处】转载请注明出处：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转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net set transform style, you do not n本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。eed to worry about r【原创内容，转载请注明出处】【原创内容，转载请注明出处】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.net【版权所有】唐霜 www.tangshuang.netcross-platform appli【转载请注明来源】【本文首发于唐霜的博客】cations. Currently, 著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】nautil support the f【转载请注明来源】转载请注明出处：www.tangshuang.netollowing platforms: 【原创不易，请尊重版权】未经授权，禁止复制转载。web, web-mobile, web【未经授权禁止转载】原创内容，盗版必究。-component (h5-app),【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】 react-native (ios, 未经授权，禁止复制转载。【未经授权禁止转载】andriod), miniapp (w本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】echat-app, others us转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。e antmove to transfo【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】rm).

I have create a CLI 【本文受版权保护】【版权所有】唐霜 www.tangshuang.nettool nautil-cli, which can helop de转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】velopers to start th【作者：唐霜】原创内容，盗版必究。eir nautil applicati【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.neton 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.netl allow developers t转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。o use rxjs in their 本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】event, the events ha【本文受版权保护】原创内容，盗版必究。ndler functions can 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。be normal handler fu原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。nction to receive ca原创内容，盗版必究。【原创不易，请尊重版权】llback parameters. O【原创内容，转载请注明出处】【本文首发于唐霜的博客】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【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net, the first item is 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。a rxjs pipe operator【版权所有，侵权必究】【原创内容，转载请注明出处】, 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【作者：唐霜】【转载请注明来源】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未经授权，禁止复制转载。【原创内容，转载请注明出处】odel to control data著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】 for some necessary 【本文受版权保护】【本文受版权保护】place, for example, 转载请注明出处：www.tangshuang.net【未经授权禁止转载】in a form.

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

On the other hand, t【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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【关注微信公众号：wwwtangshuangnet】【本文受版权保护】s observable too, so【本文首发于唐霜的博客】【原创内容，转载请注明出处】 you can use it with observe operator in your co本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netmponent.

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【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。 prop-types to check【本文受版权保护】【原创内容，转载请注明出处】 data type in react,【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 Nautil provides a m【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ore sensitive type c转载请注明出处：www.tangshuang.net【本文受版权保护】hecking system based【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。 on tyshemo, which can check de未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ep nested object eas转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】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本文作者：唐霜，转载请注明出处。【作者：唐霜】 is compatible with 【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。prop-types, so that 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】all react components【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。 can be used in Naut【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】il system.

These are what Nauti【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netl bring up which are【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 different from reac【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。t development. It he原创内容，盗版必究。【未经授权禁止转载】lp developers write 转载请注明出处：www.tangshuang.net【本文受版权保护】less code and make c【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】ode structure more c本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。lear. If you are tir【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ed with complex scat【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。tered react ecology 未经授权，禁止复制转载。【原创内容，转载请注明出处】libraries, have a tr【作者：唐霜】【版权所有】唐霜 www.tangshuang.nety with Nautil.

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

2019-10-13 2919