Nautil is a javascri未经授权，禁止复制转载。【未经授权禁止转载】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【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】pers are always foll著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】owing Flux architect原创内容，盗版必究。【本文首发于唐霜的博客】ure.

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

To make it easy to u著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netse react syntax to c著作权归作者所有，禁止商业用途转载。【本文受版权保护】reate applications, 本文版权归作者所有，未经授权不得转载。【作者：唐霜】I wrote a js framewo转载请注明出处：www.tangshuang.net【版权所有，侵权必究】rk which called Naut本文版权归作者所有，未经授权不得转载。转载请注明出处：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 转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。is built on the idea本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net of Observer Pattern【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。. This help develope【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】rs write less code t【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。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【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ub-components, and w著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】hen its dispatch is invoked, the com【作者：唐霜】本文作者：唐霜，转载请注明出处。ponent will rerender【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net. 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转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 using redux, why sh【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。ould we write so man未经授权，禁止复制转载。转载请注明出处：www.tangshuang.nety codes which is not未经授权，禁止复制转载。【本文首发于唐霜的博客】 about our business?本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 Nautil provides a i原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。nner Store which is 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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【作者：唐霜】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【作者：唐霜】本文版权归作者所有，未经授权不得转载。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【作者：唐霜】【未经授权禁止转载】 a two-way-binding s【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】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【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。g property. It recei本文版权归作者所有，未经授权不得转载。【本文受版权保护】ve an array which co【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。ntains two item. The【作者：唐霜】【版权所有，侵权必究】 second item is a fu【关注微信公众号：wwwtangshuangnet】【转载请注明来源】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【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 object. When we inv本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netoke state.name, we will get a stru转载请注明出处：www.tangshuang.net原创内容，盗版必究。ctured array.

And it is very easy 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】and interesting to u著作权归作者所有，禁止商业用途转载。【转载请注明来源】se two-way-binding p【原创不易，请尊重版权】【版权所有，侵权必究】roperty inside compo著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。nent. If I want to c本文版权归作者所有，未经授权不得转载。【转载请注明来源】reate a component li【未经授权禁止转载】【未经授权禁止转载】ke following:

<Swither $open={binding.open} />

We can easily write 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。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【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。nge the this.attrs.open. Isn’t it int【本文受版权保护】【版权所有】唐霜 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本文版权归作者所有，未经授权不得转载。【本文受版权保护】, operators are func【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nettions to create wrap【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。 function.

In Nautil, operators本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。 are much more power【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ful than redux conne【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ct.

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

– pipe: combin本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。e operators
【版权所有】唐霜 www.tangshuang.net – multiple: u著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】se batch operator pa原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。rameters one time

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

5. Depository

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

It is an abstract of【关注微信公众号：wwwtangshuangnet】【作者：唐霜】 data request, you n【本文首发于唐霜的博客】【本文受版权保护】eed to know one core【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net concepts: data sour【原创内容，转载请注明出处】【未经授权禁止转载】ce. A data source is【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 a configuration for【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】 data request, and u【转载请注明来源】原创内容，盗版必究。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【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netrce ‘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【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】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著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。end ajax in this cod原创内容，盗版必究。本文作者：唐霜，转载请注明出处。e, depository will d【未经授权禁止转载】【本文首发于唐霜的博客】o 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.netl parse stylesheet automatically to be【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 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著作权归作者所有，禁止商业用途转载。【本文受版权保护】 set transform style, you do not n【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】eed to worry about r【版权所有，侵权必究】【原创不易，请尊重版权】eact-native parsing,【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】 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 获取更多精彩内容】cross-platform appli【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】cations. Currently, 【版权所有】唐霜 www.tangshuang.net【本文受版权保护】nautil support the f【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netollowing platforms: 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】web, web-mobile, web转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。-component (h5-app),【本文受版权保护】原创内容，盗版必究。 react-native (ios, 原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netandriod), miniapp (w【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。echat-app, others us【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】e antmove to transfo【原创内容，转载请注明出处】【原创内容，转载请注明出处】rm).

I have create a CLI 【本文首发于唐霜的博客】原创内容，盗版必究。tool nautil-cli, which can helop de【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。velopers to start th未经授权，禁止复制转载。【版权所有，侵权必究】eir nautil applicati本文作者：唐霜，转载请注明出处。【转载请注明来源】on more easy.

This is the real tim【作者：唐霜】本文版权归作者所有，未经授权不得转载。e to Write one, Run anywh【转载请注明来源】著作权归作者所有，禁止商业用途转载。ere. Clone nautil-demo for playing.

8. Stream

Different from react未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】 event system, Nauit【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netl allow developers t【原创内容，转载请注明出处】【版权所有，侵权必究】o use rxjs in their 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netevent, the events ha【转载请注明来源】【本文首发于唐霜的博客】ndler functions can 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】be normal handler fu本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netnction 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 【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。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本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netications are always 【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】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【作者：唐霜】本文版权归作者所有，未经授权不得转载。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【转载请注明来源】本文版权归作者所有，未经授权不得转载。s very sensitive wit【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。h data type. When yo【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。u set a un-checked v【转载请注明来源】本文作者：唐霜，转载请注明出处。alue into it, it may【关注微信公众号：wwwtangshuangnet】【本文受版权保护】 not accept the valu【原创内容，转载请注明出处】【作者：唐霜】e because of data ch【作者：唐霜】著作权归作者所有，禁止商业用途转载。ecking fail.

On the other hand, t【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nethe validators formulators are very useful in 【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。form, for example va本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netlidate 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【本文受版权保护】【版权所有】唐霜 www.tangshuang.nets 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原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。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【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。hecking system based【未经授权禁止转载】【本文首发于唐霜的博客】 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著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。tanding. However, it【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】 is compatible with 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netprop-types, so that 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】all react components著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net can be used in Naut本文版权归作者所有，未经授权不得转载。转载请注明出处：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【作者：唐霜】转载请注明出处：www.tangshuang.netode structure more c转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】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著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.nettil is to make a UI 著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】framework which can 【原创内容，转载请注明出处】【原创不易，请尊重版权】run cross-platform. 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。If you a interested 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。in this project, wel【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】come to join me on github.

2019-10-13 3168