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

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

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

Now, follow me to ha原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ve a glance of what 原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】Nautil provides.

1. Observer

The whole framework 【版权所有，侵权必究】【作者：唐霜】is built on the idea【作者：唐霜】【关注微信公众号：wwwtangshuangnet】 of Observer Pattern【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】. This help develope【本文受版权保护】【原创不易，请尊重版权】rs write less code t【本文受版权保护】【转载请注明来源】o implement reactive【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】 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原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netponent will rerender转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。. By using Observer component, we can w未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。rite reactive code m本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ore interesting, any本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】 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【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net about our business?【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net Nautil provides a i【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】nner Store which is 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。very easy to define,【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。 and use like vue da【原创不易，请尊重版权】【本文受版权保护】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未经授权，禁止复制转载。【本文受版权保护】se 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.net【版权所有，侵权必究】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【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net will rerender UI.

3. Two-Way-Binding

With the ability of 【版权所有，侵权必究】【转载请注明来源】Observer, I build up未经授权，禁止复制转载。【本文首发于唐霜的博客】 a two-way-binding s未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】ystem. Yes, you can 【作者：唐霜】【版权所有】唐霜 www.tangshuang.netuse 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转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。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【关注微信公众号：wwwtangshuangnet】【本文受版权保护】oke state.name, we will get a stru未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netctured array.

And it is very easy 【转载请注明来源】【原创内容，转载请注明出处】and interesting to u【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netse 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 本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。in the component:

class Swither extends Component {
  onToggle() {
    this.attrs.open = !this.attrs.open
  }
}

I do not need to wri著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】te a lot of callback本文作者：唐霜，转载请注明出处。【作者：唐霜】 functions, just cha【转载请注明来源】著作权归作者所有，禁止商业用途转载。nge the this.attrs.open. Isn’t it int著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。eresting?

4. operators

If you have used rea【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。ct-redux, you will k本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。now how to use connect function to wrap a 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netcomponent. In Nautil未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】, operators are func【本文受版权保护】【版权所有】唐霜 www.tangshuang.nettions to create wrap本文版权归作者所有，未经授权不得转载。【转载请注明来源】 function.

In Nautil, operators转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】 are much more power【作者：唐霜】【版权所有，侵权必究】ful than redux conne【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ct.

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

– pipe: combin【转载请注明来源】【版权所有，侵权必究】e operators
原创内容，盗版必究。 – multiple: u本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netse batch operator pa未经授权，禁止复制转载。【本文受版权保护】rameters one time

Especially in an app【未经授权禁止转载】本文作者：唐霜，转载请注明出处。lication, we would w【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。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【关注微信公众号：wwwtangshuangnet】【本文受版权保护】ode, your App will b【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.nete reactive for store and the given sub-d【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】eep-components insid未经授权，禁止复制转载。转载请注明出处：www.tangshuang.nete 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【本文首发于唐霜的博客】【作者：唐霜】e ajax code in your 原创内容，盗版必究。原创内容，盗版必究。project. Depository 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。is the one to help y未经授权，禁止复制转载。原创内容，盗版必究。ou throw away ajax.

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

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.net 获取更多精彩内容】mediately, 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原创内容，盗版必究。【版权所有，侵权必究】o it for you inside.【未经授权禁止转载】【原创内容，转载请注明出处】 Because of subscribe to depo, the UI wil转载请注明出处：www.tangshuang.net【转载请注明来源】l rereender automati本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netcally.

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【原创不易，请尊重版权】【原创内容，转载请注明出处】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 【未经授权禁止转载】【原创不易，请尊重版权】cross-platform appli未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】cations. Currently, 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。nautil support the f【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ollowing platforms: 【转载请注明来源】未经授权，禁止复制转载。web, web-mobile, web本文作者：唐霜，转载请注明出处。【作者：唐霜】-component (h5-app),【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。 react-native (ios, 本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】andriod), miniapp (w【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。echat-app, others us【作者：唐霜】本文版权归作者所有，未经授权不得转载。e antmove to transfo转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。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【作者：唐霜】本文版权归作者所有，未经授权不得转载。ere. Clone nautil-demo for playing.

8. Stream

Different from react【作者：唐霜】原创内容，盗版必究。 event system, Nauit原创内容，盗版必究。【本文首发于唐霜的博客】l allow developers t未经授权，禁止复制转载。原创内容，盗版必究。o use rxjs in their 【本文受版权保护】本文作者：唐霜，转载请注明出处。event, the events ha【原创内容，转载请注明出处】原创内容，盗版必究。ndler functions can 著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。be normal handler fu本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】nction to receive ca【作者：唐霜】著作权归作者所有，禁止商业用途转载。llback parameters. O【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】r it can be observab【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netle 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 【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】a rxjs pipe operator【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。, and the latest ite【原创内容，转载请注明出处】【版权所有，侵权必究】m in the array is onHint callback function w【转载请注明来源】转载请注明出处：www.tangshuang.nethich receive the str著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.neteam output.

In the component, de未经授权，禁止复制转载。【本文受版权保护】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.net未经授权，禁止复制转载。ications are always 【转载请注明来源】转载请注明出处：www.tangshuang.netstruggling with data【转载请注明来源】著作权归作者所有，禁止商业用途转载。. Nautil provide a M【本文首发于唐霜的博客】【版权所有，侵权必究】odel to control data【版权所有，侵权必究】【本文受版权保护】 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【版权所有，侵权必究】【版权所有，侵权必究】s very sensitive wit【未经授权禁止转载】【转载请注明来源】h data type. When yo【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。u set a un-checked v【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】alue into it, it may【作者：唐霜】未经授权，禁止复制转载。 not accept the valu【版权所有，侵权必究】【本文受版权保护】e because of data ch著作权归作者所有，禁止商业用途转载。【本文受版权保护】ecking fail.

On the other hand, t【原创不易，请尊重版权】【原创内容，转载请注明出处】he validators formulators are very useful in 【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】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【转载请注明来源】【未经授权禁止转载】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【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】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【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net on tyshemo, which can check de转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】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【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】tanding. However, it【原创内容，转载请注明出处】【未经授权禁止转载】 is compatible with 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netprop-types, so that 【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netall react components【未经授权禁止转载】未经授权，禁止复制转载。 can be used in Naut【原创不易，请尊重版权】【本文首发于唐霜的博客】il system.

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

The next step of Nau原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。til is to make a UI 【原创内容，转载请注明出处】【转载请注明来源】framework which can 【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】run cross-platform. 【版权所有，侵权必究】【未经授权禁止转载】If you a interested 【未经授权禁止转载】未经授权，禁止复制转载。in this project, wel著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netcome to join me on github.

2019-10-13 3048