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

However, its not eas【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。y to write applicati【作者：唐霜】【作者：唐霜】on level code with r【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.neteact. Even though we【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】 have redux and many【本文首发于唐霜的博客】【作者：唐霜】 third libraries, we【作者：唐霜】【未经授权禁止转载】 still should have t本文作者：唐霜，转载请注明出处。原创内容，盗版必究。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【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。act development.

Now, follow me to ha【版权所有，侵权必究】【原创不易，请尊重版权】ve a glance of what 【未经授权禁止转载】未经授权，禁止复制转载。Nautil provides.

1. Observer【本文首发于唐霜的博客】

The whole framework 【原创不易，请尊重版权】【本文首发于唐霜的博客】is built on the idea【本文首发于唐霜的博客】原创内容，盗版必究。 of Observer Pattern【本文首发于唐霜的博客】原创内容，盗版必究。. This help develope著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。rs write less code t【本文首发于唐霜的博客】【本文首发于唐霜的博客】o implement reactive本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。 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 【版权所有】唐霜 www.tangshuang.netObserver component to wrap s转载请注明出处：www.tangshuang.net原创内容，盗版必究。ub-components, and w【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。hen its dispatch is invoked, the com【本文受版权保护】未经授权，禁止复制转载。ponent will rerender【原创不易，请尊重版权】【未经授权禁止转载】. By using Observer component, we can w【转载请注明来源】【转载请注明来源】rite reactive code m著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netore interesting, any【本文受版权保护】【关注微信公众号：wwwtangshuangnet】 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著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】y codes which is not本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】 about our business?【本文首发于唐霜的博客】【原创不易，请尊重版权】 Nautil provides a i【原创不易，请尊重版权】原创内容，盗版必究。nner Store which is 著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】very easy to define,原创内容，盗版必究。本文作者：唐霜，转载请注明出处。 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.netse 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【本文受版权保护】【作者：唐霜】ystem. Yes, you can 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。use 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【本文首发于唐霜的博客】【本文首发于唐霜的博客】ntains two item. The原创内容，盗版必究。【作者：唐霜】 second item is a fu【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。nction which is to u【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】pdate the value.

By using 【本文受版权保护】createTwoWayBinding and 【版权所有】唐霜 www.tangshuang.netStore, 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 【访问 www.tangshuang.net 获取更多精彩内容】createTwoWayBinding to create a proxied本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】 object. When we inv本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。oke state.name, we will get a stru【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ctured array.

And it is very easy 未经授权，禁止复制转载。未经授权，禁止复制转载。and interesting to u【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】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 【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】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【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】 functions, just cha本文作者：唐霜，转载请注明出处。原创内容，盗版必究。nge the this.attrs.open. Isn’t it int未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.neteresting?

4. operators【访问 www.tangshuang.net 获取更多精彩内容】

If you have used rea【关注微信公众号：wwwtangshuangnet】【转载请注明来源】ct-redux, you will k【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。now how to use connect function to wrap a 【原创不易，请尊重版权】【原创内容，转载请注明出处】component. In Nautil【未经授权禁止转载】【作者：唐霜】, operators are func【未经授权禁止转载】原创内容，盗版必究。tions to create wrap本文版权归作者所有，未经授权不得转载。【转载请注明来源】 function.

In Nautil, operators未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。 are much more power【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ful than redux conne【本文受版权保护】转载请注明出处：www.tangshuang.netct.

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

– pipe: combin【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。e operators
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。 – multiple: u未经授权，禁止复制转载。【转载请注明来源】se batch operator pa【作者：唐霜】【作者：唐霜】rameters one time

Especially in an app转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】lication, we would w【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netant to bypass some p【作者：唐霜】未经授权，禁止复制转载。rops, well, pollute operator is a magic【本文首发于唐霜的博客】【作者：唐霜】. For example, you w转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ant to inject some c【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netomponent 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著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。e App will auto be p【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】atched with store pr【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netop.

5. Depository【转载请注明来源】

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

One of Nautil’原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】s goals is to build 原创内容，盗版必究。本文作者：唐霜，转载请注明出处。cross-platform appli未经授权，禁止复制转载。【作者：唐霜】cations. Currently, 【未经授权禁止转载】【本文受版权保护】nautil support the f本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ollowing platforms: 【版权所有】唐霜 www.tangshuang.net【转载请注明来源】web, web-mobile, web转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】-component (h5-app),原创内容，盗版必究。【转载请注明来源】 react-native (ios, 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。andriod), miniapp (w【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】echat-app, others us本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。e antmove to transfo【作者：唐霜】转载请注明出处：www.tangshuang.netrm).

I have create a CLI 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.nettool nautil-cli【未经授权禁止转载】, which can helop de著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。velopers to start th原创内容，盗版必究。【本文受版权保护】eir nautil applicati著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.neton more easy.

This is the real tim本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。e to Write one, Run anywh转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ere. Clone 原创内容，盗版必究。nautil-demo著作权归作者所有，禁止商业用途转载。 for playing.本文版权归作者所有，未经授权不得转载。

8. Stream【本文受版权保护】

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

In the component, de【本文受版权保护】【关注微信公众号：wwwtangshuangnet】velopers can use this.onHint$ to operate onHint e本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netvent 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 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。struggling with data转载请注明出处：www.tangshuang.net【转载请注明来源】. Nautil provide a M转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】odel to control data【作者：唐霜】原创内容，盗版必究。 for some necessary 本文作者：唐霜，转载请注明出处。【转载请注明来源】place, for example, 未经授权，禁止复制转载。【转载请注明来源】in a form.

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

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

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

The next step of Nau【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.nettil is to make a UI 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。framework which can 【转载请注明来源】【版权所有】唐霜 www.tangshuang.netrun cross-platform. 原创内容，盗版必究。【未经授权禁止转载】If you a interested 【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。in this project, wel【作者：唐霜】未经授权，禁止复制转载。come to join me on github【转载请注明来源】.本文作者：唐霜，转载请注明出处。

2019-10-13 2777