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

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

To make it easy to u未经授权，禁止复制转载。【原创内容，转载请注明出处】se react syntax to c未经授权，禁止复制转载。【原创不易，请尊重版权】reate applications, 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】I wrote a js framewo【原创内容，转载请注明出处】未经授权，禁止复制转载。rk which called Naut未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。il. It is much diffe本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】rence from native re【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。act development.

Now, follow me to ha【转载请注明来源】未经授权，禁止复制转载。ve a glance of what 【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】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转载请注明出处：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【本文受版权保护】原创内容，盗版必究。ponent will rerender原创内容，盗版必究。未经授权，禁止复制转载。. 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.net【关注微信公众号：wwwtangshuangnet】ould we write so man【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】y codes which is not【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】 about our business?著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net Nautil provides a i【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。nner Store which is 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。very easy to define,转载请注明出处：www.tangshuang.net【作者：唐霜】 and use like vue da【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】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【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】se way is to use state:

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

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

const WatchedComponent = observe(store)(OriginComponent)

The WatchedComponent is reactive of stor【关注微信公众号：wwwtangshuangnet】【作者：唐霜】e, so when the data 【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】changed in store, it【关注微信公众号：wwwtangshuangnet】【本文受版权保护】 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原创内容，盗版必究。转载请注明出处：www.tangshuang.netystem. 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 获取更多精彩内容】转载请注明出处：www.tangshuang.netg property. It recei【版权所有，侵权必究】【原创内容，转载请注明出处】ve an array which co【本文首发于唐霜的博客】未经授权，禁止复制转载。ntains two item. The【转载请注明来源】未经授权，禁止复制转载。 second item is a fu【转载请注明来源】【原创内容，转载请注明出处】nction which is to u原创内容，盗版必究。【原创内容，转载请注明出处】pdate the value.

By using createTwoWayBinding and Store, it very easy to wr【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netite 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【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。 object. When we inv【版权所有，侵权必究】【转载请注明来源】oke state.name, we will get a stru【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】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【原创不易，请尊重版权】【转载请注明来源】te a lot of callback本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】 functions, just cha著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】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【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】now how to use connect function to wrap a 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】component. In Nautil转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】, operators are func【转载请注明来源】未经授权，禁止复制转载。tions to create wrap【未经授权禁止转载】转载请注明出处：www.tangshuang.net function.

In Nautil, operators【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。 are much more power【转载请注明来源】【原创内容，转载请注明出处】ful than redux conne转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netct.

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

– pipe: combin【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。e operators
【访问 www.tangshuang.net 获取更多精彩内容】 – multiple: u【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netse batch operator pa原创内容，盗版必究。转载请注明出处：www.tangshuang.netrameters one time

Especially in an app【原创不易，请尊重版权】【原创不易，请尊重版权】lication, we would w原创内容，盗版必究。【原创内容，转载请注明出处】ant to bypass some p【本文受版权保护】【本文首发于唐霜的博客】rops, well, pollute operator is a magic【原创不易，请尊重版权】原创内容，盗版必究。. For example, you w原创内容，盗版必究。转载请注明出处：www.tangshuang.netant 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未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】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【本文首发于唐霜的博客】未经授权，禁止复制转载。atched with store pr【本文首发于唐霜的博客】未经授权，禁止复制转载。op.

5. Depository

To request data from【作者：唐霜】【作者：唐霜】 backend, yep, use a本文作者：唐霜，转载请注明出处。原创内容，盗版必究。jax. But in fact, we本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 do not need to writ未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.nete ajax code in your 本文版权归作者所有，未经授权不得转载。【本文受版权保护】project. Depository 转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】is 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本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】 data request, and u【版权所有，侵权必究】【原创不易，请尊重版权】se the id to get dat【转载请注明来源】未经授权，禁止复制转载。a from depository wi本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netthout 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【本文首发于唐霜的博客】【未经授权禁止转载】 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 原创内容，盗版必究。未经授权，禁止复制转载。data from backend im原创内容，盗版必究。转载请注明出处：www.tangshuang.netmediately, it reques未经授权，禁止复制转载。【原创不易，请尊重版权】t data from local ca本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。che 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未经授权，禁止复制转载。原创内容，盗版必究。end ajax in this cod本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】e, depository will d【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.neto it for you inside.【未经授权禁止转载】本文作者：唐霜，转载请注明出处。 Because of subscribe to depo, the UI wil转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。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转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】 set transform style, you do not n转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】eed to worry about r本文作者：唐霜，转载请注明出处。【作者：唐霜】eact-native parsing,转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net 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 【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。cross-platform appli本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。cations. Currently, 【原创不易，请尊重版权】原创内容，盗版必究。nautil support the f【未经授权禁止转载】【未经授权禁止转载】ollowing platforms: 本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】web, web-mobile, web转载请注明出处：www.tangshuang.net【本文受版权保护】-component (h5-app),转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】 react-native (ios, 【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】andriod), miniapp (w【版权所有，侵权必究】【版权所有，侵权必究】echat-app, others us【转载请注明来源】本文作者：唐霜，转载请注明出处。e antmove to transfo【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】rm).

I have create a CLI 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。tool nautil-cli, which can helop de未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netvelopers to start th本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。eir nautil applicati著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.neton more easy.

This is the real tim本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.nete to Write one, Run anywh【版权所有，侵权必究】原创内容，盗版必究。ere. Clone nautil-demo for playing.

8. Stream

Different from react转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net event system, Nauit本文作者：唐霜，转载请注明出处。【未经授权禁止转载】l allow developers t【版权所有，侵权必究】转载请注明出处：www.tangshuang.neto use rxjs in their 著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。event, the events ha原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netndler functions can 【原创不易，请尊重版权】【本文首发于唐霜的博客】be normal handler fu未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。nction to receive ca本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netllback parameters. O【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netr it can be observab【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】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 【原创内容，转载请注明出处】【本文首发于唐霜的博客】a rxjs pipe operator转载请注明出处：www.tangshuang.net原创内容，盗版必究。, and the latest ite【版权所有，侵权必究】原创内容，盗版必究。m in the array is onHint callback function w【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。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【本文首发于唐霜的博客】【版权所有，侵权必究】ications are always 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。struggling with data【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。. Nautil provide a M【未经授权禁止转载】【本文受版权保护】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【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】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.nets very sensitive wit转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。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【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】e because of data ch未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ecking fail.

On the other hand, t未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。he validators formulators are very useful in 【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。form, for example va【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。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【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】og to taste Model.

10. Props Statement

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

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

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

2019-10-13 3166