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

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

To make it easy to u【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。se react syntax to c本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】reate applications, 【未经授权禁止转载】【本文受版权保护】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【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】ve a glance of what 【版权所有，侵权必究】【本文首发于唐霜的博客】Nautil provides.

1. Observer

The whole framework 【转载请注明来源】【版权所有，侵权必究】is built on the idea转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。 of Observer Pattern著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】. This help develope【本文受版权保护】【转载请注明来源】rs write less code t著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。o implement reactive【访问 www.tangshuang.net 获取更多精彩内容】【访问 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【转载请注明来源】【关注微信公众号：wwwtangshuangnet】ponent will rerender【版权所有】唐霜 www.tangshuang.net【作者：唐霜】. By using Observer component, we can w【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netrite reactive code m本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netore interesting, any原创内容，盗版必究。【转载请注明来源】 responsive object c【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。an be used in react.

2. Store

It is too complex by原创内容，盗版必究。【版权所有，侵权必究】 using redux, why sh转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ould we write so man【原创不易，请尊重版权】原创内容，盗版必究。y codes which is not本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 about our business?【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】 Nautil provides a i著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】nner Store which is 转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】very easy to define,【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net 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.netet 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【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。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 【作者：唐霜】【本文首发于唐霜的博客】changed in store, it【本文受版权保护】【版权所有】唐霜 www.tangshuang.net 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 著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netuse two-way-binding 【版权所有】唐霜 www.tangshuang.net【作者：唐霜】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【未经授权禁止转载】【本文受版权保护】ve an array which co【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netntains two item. The【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】 second item is a fu【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netnction 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本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】 object. When we inv【本文受版权保护】本文版权归作者所有，未经授权不得转载。oke state.name, we will get a stru本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。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【转载请注明来源】【转载请注明来源】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【版权所有】唐霜 www.tangshuang.nette a lot of callback【未经授权禁止转载】本文作者：唐霜，转载请注明出处。 functions, just cha【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。nge the this.attrs.open. Isn’t it int转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】eresting?

4. operators

If you have used rea【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ct-redux, you will k【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。now how to use connect function to wrap a 转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。component. In Nautil【转载请注明来源】著作权归作者所有，禁止商业用途转载。, operators are func【原创不易，请尊重版权】【未经授权禁止转载】tions to create wrap转载请注明出处：www.tangshuang.net【作者：唐霜】 function.

In Nautil, operators【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net are much more power【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netful than redux conne【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。ct.

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

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

Especially in an app本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。lication, we would w原创内容，盗版必究。【本文受版权保护】ant to bypass some p本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。rops, well, pollute operator is a magic【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】. For example, you w【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ant to inject some c转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】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【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】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未经授权，禁止复制转载。【本文受版权保护】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 【本文首发于唐霜的博客】【未经授权禁止转载】project. Depository 【本文首发于唐霜的博客】未经授权，禁止复制转载。is the one to help y【作者：唐霜】转载请注明出处：www.tangshuang.netou 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 a configuration for著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】 data request, and u【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。se the id to get dat【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】a from depository wi【关注微信公众号：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著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】rce ‘some̵【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。7; in the depository【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net ‘depo_name【未经授权禁止转载】转载请注明出处：www.tangshuang.net217;, 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著作权归作者所有，禁止商业用途转载。【本文受版权保护】mediately, it reques【关注微信公众号：wwwtangshuangnet】【作者：唐霜】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.【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。 Because of subscribe to depo, the UI wil【版权所有】唐霜 www.tangshuang.net【本文受版权保护】l rereender automati【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】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未经授权，禁止复制转载。【原创内容，转载请注明出处】 set transform style, you do not n原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】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’【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.nets goals is to build 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netcross-platform appli原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。cations. Currently, 本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】nautil support the f【本文受版权保护】【原创不易，请尊重版权】ollowing platforms: 【本文受版权保护】著作权归作者所有，禁止商业用途转载。web, web-mobile, web【本文受版权保护】【版权所有，侵权必究】-component (h5-app),【原创内容，转载请注明出处】【本文首发于唐霜的博客】 react-native (ios, 【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。andriod), miniapp (w著作权归作者所有，禁止商业用途转载。【转载请注明来源】echat-app, others us【转载请注明来源】转载请注明出处：www.tangshuang.nete antmove to transfo本文作者：唐霜，转载请注明出处。【未经授权禁止转载】rm).

I have create a CLI 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。tool nautil-cli, which can helop de【版权所有】唐霜 www.tangshuang.net【本文受版权保护】velopers to start th【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】eir nautil applicati【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。on 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 event system, Nauit【未经授权禁止转载】【转载请注明来源】l allow developers t【转载请注明来源】本文版权归作者所有，未经授权不得转载。o use rxjs in their 原创内容，盗版必究。【版权所有，侵权必究】event, the events ha本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netndler functions can 【本文受版权保护】【版权所有，侵权必究】be normal handler fu著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】nction to receive ca【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】llback parameters. O转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】r it can be observab著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netle stream pipe opera转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.nettors.

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

In the previous code【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】, the first item is 【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】a rxjs pipe operator【未经授权禁止转载】【未经授权禁止转载】, and the latest ite原创内容，盗版必究。【原创内容，转载请注明出处】m in the array is onHint callback function w【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。hich receive the str本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。eam output.

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

On the other hand, t转载请注明出处：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【本文受版权保护】【原创不易，请尊重版权】s observable too, so【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net you can use it with observe operator in your co【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netmponent.

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

Read more from my bl【本文受版权保护】转载请注明出处：www.tangshuang.netog to taste Model.

10. Props Statement

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

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

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

2019-10-13 3053