前言

MVC 是 Nautil 的核心理念。区【作者：唐霜】未经授权，禁止复制转载。别于其他前端框架，Nautil 强调前端著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】分层：数据层、表现层、逻辑层。用 Nau【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.nettil 开发，需要抱着强烈的分层思想进行【作者：唐霜】未经授权，禁止复制转载。开发，从而能够让我们的项目代码实现高内聚转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。低耦合，以便我们在长期迭代中，即使升级【转载请注明来源】【未经授权禁止转载】react 的版本，也仍然能使我们最早的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net设计符合当下的业务需求。在 Nautil著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。中，你会用到 Model, Contr【本文受版权保护】【转载请注明来源】oller, Component, Se【转载请注明来源】转载请注明出处：www.tangshuang.netrvice 去构建一套 MVC 的开发模本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。式。当你只是完成简单的 UI 开发时，你【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】只会用到 Component。但是当你需转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】要灵活的处理用户输入与操作交互时，你就需原创内容，盗版必究。未经授权，禁止复制转载。要引入 Controller 来整合 C未经授权，禁止复制转载。原创内容，盗版必究。omponent 和状态管理、事件管理等【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】。而当你需要对业务对象进行更好的数据控制【原创不易，请尊重版权】【原创不易，请尊重版权】时，你就需要再引入 Model，用以创建本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。领域模型，以理清楚业务实体与应用系统的联【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。系。最后，如果你需要从应用整体层面处理好【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】数据流或业务流，你就会借助 Servic本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。e 来处理系统层面的控制。传统的 rea【本文受版权保护】【原创内容，转载请注明出处】ct 应用开发基本上全部集中在视图层开发【转载请注明来源】【作者：唐霜】，也就是只有 Component 的体系本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，而 Nautil 整合了业务系统的行业【转载请注明来源】原创内容，盗版必究。共性，完善了 Controller, M著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。odel, Service 的体系，是一【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net个完备的 MVC 体系。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net

基于 react 的应用开发非常灵活，是本文作者：唐霜，转载请注明出处。【本文受版权保护】现代前端开发的利器。然而，由于 reac【未经授权禁止转载】本文作者：唐霜，转载请注明出处。t 仅仅是一个 UI 库，它不提供框架级【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。别的解决方案，所以当你使用它开发应用时，未经授权，禁止复制转载。【转载请注明来源】非常麻烦。虽然有一个庞大的生态支持 re原创内容，盗版必究。【原创不易，请尊重版权】act 成为一个应用开发的基础，但是由于转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。太过复杂，导致实际开发中，各种解决方案杂【版权所有】唐霜 www.tangshuang.net【作者：唐霜】糅到一起，使得应用非常庞大臃肿，且不好维原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。护，依赖的变化也给后期应用维护提升了成本【作者：唐霜】【本文受版权保护】。特别是 redux，虽然是基于非常优秀【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。的思想开发，却由于太过复杂的样板，在实际【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】应用中不仅不能带来开发的便捷性，而且会增【转载请注明来源】原创内容，盗版必究。加代码体积。

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

而 Nautil 是一个新的工程性框架，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。她主要要解决的是，抛弃在生态中挑选的纠结本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。过程，向开发者提供一揽子工程思路解决方案转载请注明出处：www.tangshuang.net【作者：唐霜】。它虽然基于 react，但是并没有一味未经授权，禁止复制转载。【本文首发于唐霜的博客】的去迎合 react 社区，它独树一帜，本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net提出自己的 MVC 模式、状态管理、数据转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net管理、观察者模式响应等等，通过这些新的东转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net西，再结合 react 的优秀之处，它完【原创不易，请尊重版权】【转载请注明来源】美的实现了新一代框架应该具备的特性。基于【原创不易，请尊重版权】【作者：唐霜】更多的选择，Nautil 打破原有的 r原创内容，盗版必究。【未经授权禁止转载】eact 范式，融入我们认为更有利于开发【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】者快速开发的新方法。我们不应该拘泥于编程【转载请注明来源】【作者：唐霜】范式，应该尝试打破范式之争，勇于尝试。

Nautil 这个单词取自 Nautil原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】us 的前面部分。Nautilus（鹦鹉【原创不易，请尊重版权】【作者：唐霜】螺）是一种海洋生物，有数亿年的进化历程，【作者：唐霜】【本文受版权保护】被成为海洋中的“活化石”。鹦鹉螺身上藏着【转载请注明来源】本文作者：唐霜，转载请注明出处。非常多令人不可思议的秘密。鹦鹉螺外壳切面【原创不易，请尊重版权】【原创内容，转载请注明出处】所呈现优美的螺线，暗含了斐波拉契数列，而【转载请注明来源】【转载请注明来源】斐波拉契数列的两项间比值也是无限接近黄金【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】分割数。Nautil 希望在前端开发领域未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net打破传统开发思维，创立独特的开发方式。

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【转载请注明来源】

安装

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

兼容性

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】

当前版本

最新稳定版本：v0.29
【作者：唐霜】稳定版本对应分支：master
本文版权归作者所有，未经授权不得转载。开发中分支：dev

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】

NPM

npm i nautil

起步

本章开始详细讲解 Nautil 的使用。

你是怎样的开发者？

Nautil 的开发有一定的门槛，作为前本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。端开发者，我们希望你可以使用 Nauti【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】l 完成自己的应用开发，但是，我们也不希【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。望你在基础能力不足的情况下，勉强的去使用【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。它。Nautil 需要开发者拥有以下基础原创内容，盗版必究。【本文受版权保护】能力：

未经授权，禁止复制转载。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

对 react 开发有一定经验（必须）

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

未经授权，禁止复制转载。

有 webpack、babel 等编译构【未经授权禁止转载】【未经授权禁止转载】建工具经验（可选）

未经授权，禁止复制转载。

理解观察者模式

【原创内容，转载请注明出处】

【转载请注明来源】

【原创内容，转载请注明出处】

在前端领域对 MVC 有一定的认知

【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

适用场景

我们做开发，应该选择适合的语言、适合的工转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。具，对于简单 web 需求，使用 jQu未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ery 和一个样式库就可以马上开始撸，但【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】是对于工程应用级别的项目，则需要较为完备转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。的体系。如果你面对如下项目，那么选择 N未经授权，禁止复制转载。【本文首发于唐霜的博客】autil 将会令你事半功倍：

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

应用开发，而非库、模块、组件开发

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

原创内容，盗版必究。

【原创内容，转载请注明出处】

多客户端开发，特别是手机端跨平台开发

【关注微信公众号：wwwtangshuangnet】

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

厌倦了 react 繁杂的生态体系，但是【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】又喜欢 react 本身

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

为什么选择 Nautil？

当你打算写一个项目的时候，如果你选择 r著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。eact 来写，你会特别麻烦，你需要在市原创内容，盗版必究。原创内容，盗版必究。面上选择、学习一大堆生态链库，让你特别烦未经授权，禁止复制转载。原创内容，盗版必究。躁。而这只是第一步，接下来，你需要配置编本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】译环境，也是烦得不得了。最后，你还要忍受【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。 react 默认的数据流行为。Naut转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。il 的目标，就是让开发者学习的少，但是【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。又可以随心所欲。

原创内容，盗版必究。原创内容，盗版必究。

我提供了一揽子的解决方案，不需要开发者自本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】己去选择（虽然你可以自己去选择）：

MVC：工程开发范式

本文作者：唐霜，转载请注明出处。

【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】

状态管理：极其极其简单的 Store

未经授权，禁止复制转载。

原创内容，盗版必究。

数据流：双向绑定

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

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

路由：兼容各种环境的 Navigatio【本文受版权保护】【关注微信公众号：wwwtangshuangnet】n

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

【转载请注明来源】

【原创不易，请尊重版权】

国际化：渐进式内置 I18n

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

数据请求：没有请求！用 Deposito【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。ry 实现和后端交互

【本文受版权保护】

【未经授权禁止转载】

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

原创内容，盗版必究。

跨端开发：极其方便的一套代码输出多端应用

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

未经授权，禁止复制转载。

这些东西都是你所需要的，但是很抱歉，它们【原创不易，请尊重版权】【转载请注明来源】都不是 react 生态里面最流行的，然本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net而，它们一定是最方便的。我并不觉得使用【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。redux 有多酷，相反，我觉得它太麻烦【原创不易，请尊重版权】【版权所有，侵权必究】了，虽然它确实很酷，但是对于开发者而言，【关注微信公众号：wwwtangshuangnet】【转载请注明来源】写那么多和写应用本身无关的代码逻辑，以及【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】所衍生出来的问题，让人很烦恼。最后，我内【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】置了一个极其简单的 Store 来使用，原创内容，盗版必究。原创内容，盗版必究。下文会有详细的介绍。

Nautil 的核心理念就是“为应用开发【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】设计最简单的工程性解决方案”，而非为技术原创内容，盗版必究。未经授权，禁止复制转载。而设计。包括 react 官方本身，很多本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】人都在一套被虚拟出来的技术体系中炫技，但【本文首发于唐霜的博客】【原创不易，请尊重版权】是本质上，如果没有 react 本身所产【未经授权禁止转载】本文作者：唐霜，转载请注明出处。生的一系列问题，也就没有这些炫技的机会。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。这些自嗨中，似乎忘却了，使用框架的目的最【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。核心最重要的是做应用开发。如何做好应用开【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】发？简单，易懂。这两个单词，是我近来最喜欢的词。而 Na著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】util 除了在一开始要理解“观察者模式著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】”的核心之外，一切都很简单。

本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【原创不易，请尊重版权】【原创内容，转载请注明出处】

观察者模式

观察者模式（Observer Patte【原创内容，转载请注明出处】原创内容，盗版必究。rn），定义对象间的一种一对多依赖关系，【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】使得每当一个对象状态发生改变时，其相关依本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net赖对象皆得到通知并被自动更新。在编程意义【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。上，首先有两个对象，一个对象被称为观察者原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，另一个对象被称为被观察者。观察者（例如【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net O）将自己的一个方法（例如 O.dis原创内容，盗版必究。【原创不易，请尊重版权】patch）交给被观察者（例如 T）暂时【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】保管，这个过程被称为“订阅”。当被观察者本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】对应的部分发生变化时，会调用该方法（T 【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net调用 O.dispatch），这个过程被【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。称为“分发”或“发布”。此时，该方法会使原创内容，盗版必究。【本文首发于唐霜的博客】观察者随之发生变化（O.dispatch转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。会修改 O 的内部状态，从而让 O 发原创内容，盗版必究。未经授权，禁止复制转载。生变化）。

【原创不易，请尊重版权】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

【作者：唐霜】本文作者：唐霜，转载请注明出处。

import { React, Component, Text, observe, inject, pipe } from 'nautil'
import store from './store'

export class ObservedComponent extends Component {
  render() {
    const { state } = this.attrs
    return (
      <Text>{state.age}</Text>
    )
  }
}

export default pipe([
  observe(store), // 对 store 进行观察，当 store 中的 state 发生变化时，触发组件更新渲染
  inject('state', store.state), // 将 store.state 以 'state' 作为名字注入到组件的 props 中
])(ObservedComponent)

这是最便捷的在 Nautil 中使用观察【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】者模式的方法之一。observe 指令通【转载请注明来源】【转载请注明来源】过识别 store，自动对其进行观察，并【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。在 store 发生变化时更新组件。有了【未经授权禁止转载】【原创内容，转载请注明出处】这个利器，store 可以与其他组件共享【转载请注明来源】【原创不易，请尊重版权】，在其他组件中更新 store 也会触发原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。 ObservedComponent 的【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】更新。

我们通过订阅一个被观察对象的变动，来触发【本文受版权保护】著作权归作者所有，禁止商业用途转载。整个页面的变化，没有变动，就不会有界面的【作者：唐霜】未经授权，禁止复制转载。变化。因此，如果不理解观察者模式，无法在【作者：唐霜】著作权归作者所有，禁止商业用途转载。 Nautil 中编程。其实这非常好理解本文作者：唐霜，转载请注明出处。【本文受版权保护】，通过变动触发变动，这不是很好理解吗？通【本文受版权保护】著作权归作者所有，禁止商业用途转载。常的，我们通过订阅某些容器里面的数据的变未经授权，禁止复制转载。【原创内容，转载请注明出处】动，来触发变动。但是如何触发变动这个过程【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】你不用关心，你只需要调用 Observe【本文首发于唐霜的博客】【版权所有，侵权必究】r 组件或使用 observe 指令就可【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。以完成这个过程，而不需要关心它是怎么实现本文版权归作者所有，未经授权不得转载。【作者：唐霜】的。

本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】

Store 和 State

状态（State）是用于控制组件 UI 【本文受版权保护】【原创内容，转载请注明出处】界面的对象型数据。一旦一个组件的状态是某【原创不易，请尊重版权】【本文受版权保护】个值，那么它对应的 UI 界面就是确定的原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】。Nautil 提供的 State 和著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netvue.js 中的数据更新方式相似，直接原创内容，盗版必究。转载请注明出处：www.tangshuang.net修改对象属性，就会触发 Store 进行本文版权归作者所有，未经授权不得转载。【作者：唐霜】响应。

仓库（Store）是用于保存 State著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。的容器。一个 Store 内只保管一份【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。 State，同时，Store 提供了一【作者：唐霜】【版权所有】唐霜 www.tangshuang.net些接口，用于更新数据、获取数据、监听数据【关注微信公众号：wwwtangshuangnet】【作者：唐霜】变化。

import { Component } from 'nautil'

class MyComponent extends Component {
  state = {
    name: 'tom',
    age: 10,
  }

  render() {
    return (
      <div>
        <span>{this.state.name}: {this.state.age}</span>
        <button onClick={() => this.$state.age ++}>grow</button> {/* 注意，这里使用 this.$state 而非 this.state */}
      </div>
    )
  }
}

Nautil 仍然遵循了 react 所未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】提出的 immutable 数据流的理念本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】，在 Nautil 中的视图编程（Com著作权归作者所有，禁止商业用途转载。【本文受版权保护】ponent, Store）都遵循这一理【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】念，直接修改 state 是不被允许的，【原创不易，请尊重版权】【本文首发于唐霜的博客】但是通过 this.$state 却可以【原创内容，转载请注明出处】【原创内容，转载请注明出处】像 vue 中一样，直接操作 state【本文受版权保护】【版权所有】唐霜 www.tangshuang.net（内部使用了 Proxy 进行代理，实际【转载请注明来源】【关注微信公众号：wwwtangshuangnet】产生的仍然是 immutable 的 s著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。tate）。

接下来，我们看下同样的理念在 Store【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】中的运用：

import { React, Store, inject } from 'nautil'

const store = new Store({
  name: 'tomy',
  age: 10,
})

export function FuncComponent() {
  return (
    <div>
      <span>{store.state.name}: {store.state.age}</span>
      <button onClick={() => store.dispatch(state => state.age ++)}>age ++</button>
  )
}
export default obseve(store)(FuncComponent)

上面的代码并非最佳实践，但它说明了如何去未经授权，禁止复制转载。原创内容，盗版必究。使用一个具有响应式效果的 Store。结【原创不易，请尊重版权】【本文首发于唐霜的博客】合上一节“观察者模式”中的演示代码，本例【本文首发于唐霜的博客】【本文受版权保护】中执行 state.age ++ 时，会更新 store 中的 stat【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nete。而 ObservedComponen【转载请注明来源】【版权所有】唐霜 www.tangshuang.nett 会因为 store 的变化而更新渲染本文作者：唐霜，转载请注明出处。【本文受版权保护】，所以，FuncComponent 中的【作者：唐霜】转载请注明出处：www.tangshuang.net按钮通过这种方式，实现了更新 Obser【版权所有，侵权必究】转载请注明出处：www.tangshuang.netvedComponent。

另外，redux 中整个应用只有一个 s转载请注明出处：www.tangshuang.net【作者：唐霜】tore，这个 store 实际上被作为【转载请注明来源】【版权所有】唐霜 www.tangshuang.net redux 这个包内部的一部分。它的思【本文受版权保护】【原创内容，转载请注明出处】想局限于一个 web 应用中只会有一个【原创不易，请尊重版权】原创内容，盗版必究。react 应用。但实际上，我们可能在一【本文受版权保护】【本文受版权保护】个 web 应用中同时运行多个 reac【原创不易，请尊重版权】原创内容，盗版必究。t 应用。Nautil 的 Store 未经授权，禁止复制转载。原创内容，盗版必究。不限制个数，当然，为了同一管理，我们也建本文作者：唐霜，转载请注明出处。【作者：唐霜】议开发者，对于一个应用而言，只创建 1-【本文受版权保护】本文版权归作者所有，未经授权不得转载。3 个 Store，方便你更好的对整个应【作者：唐霜】【转载请注明来源】用的总体状态进行观察。

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】

响应式

Nautil 应用基于观察者模式实现数据原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。变化带来的界面响应。虽然 Nautil 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net支持 react 的 setState 未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。方法，但是我们并不这么推荐，因为我们不提原创内容，盗版必究。【作者：唐霜】倡一个组件内内置自己的 state，而应转载请注明出处：www.tangshuang.net【未经授权禁止转载】该更多的考虑使用外部数据来驱动组件本身的【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】渲染。

未经授权，禁止复制转载。【作者：唐霜】

Nautil 依然遵循单向数据流模式（但【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】同时支持双向数据流），但是在组件内更新外【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】部传入的数据时稍有不同。传统 react【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。组件更新外部通过 props 传入的数【原创不易，请尊重版权】【原创内容，转载请注明出处】据时，需要通过一个 onClick 这样【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net的回调函数将更新信号返回给组件的外部，再【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net由外部来更新数据后，将更新后的数据通过【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。props 再次传入。虽然这样做逻辑上没【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。有问题，保证了数据干净和组件干净。但是，【版权所有，侵权必究】【未经授权禁止转载】这样的写法，开发体验实在是太差了。

出于改善这种开发体验的目的。Nautil原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net 借鉴了 mobx 的观察者模式思路。我【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。们在组件内更新 props 传入的对象时【转载请注明来源】【原创不易，请尊重版权】，直接修改该对象的某个属性即可。上述的回转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。调再传入过程，通过观察者模式和 stor【未经授权禁止转载】【版权所有，侵权必究】e 的内部管道完成。如果你熟悉 redu本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】x 的话，一定知道 react-redu【转载请注明来源】著作权归作者所有，禁止商业用途转载。x 的 connect 函数，Nauti未经授权，禁止复制转载。【作者：唐霜】l 基于观察者模式解决相同的问题。

我们用真实的代码来体验一下：

// store.js
const store = new Store({ count: 0, })
export default store

// some.js
import { React, Component, Section, Text, Button, observe } from 'nautil/components'
import store from './store'

// 对于 Some 组件本身而言，store 中 state 的变化，不会触发 Some 的更新。
// 更新将交给上层组件去做。
export default class Some extends Component {
  render() {
    return <Section>
      <Text>{store.state.count}</Text>
      <Button onHit={() => store.dispatch(state => state.count ++)}>+</Button>
    </Section>
  }
}

// app.js
import { Component, Store, Observer } from 'nautil/components'
import Some from './some'
import store from './store'

export default class App extends Component {
  render() {
    return <Observer 
      subscribe={dispatch => store.subscribe(dispatch)} 
      unsubscribe={dispatch => store.unsubscribe(dispatch)} 
      dispatch={this.weakUpdate}
    >
      <Some />
    </Observer>
  }
}

store 在多个组件之间共享，这些组件未经授权，禁止复制转载。【本文首发于唐霜的博客】都被一个顶层组件使用（上面的 APP），【版权所有，侵权必究】【原创不易，请尊重版权】并且在该顶层组件中使用观察者模式订阅 s【原创不易，请尊重版权】【本文受版权保护】tore 的变化，来触发更新界面，这样，本文版权归作者所有，未经授权不得转载。【本文受版权保护】在任何组件中更新了 store 中的数据本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，就可以触发整个应用的更新。

双向绑定

Nautil 支持属性级别的双向绑定。双原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】向绑定时，使用 $ 符合作为属性前缀。一【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。个用于双向绑定的属性的值，是一个可被用于原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。监听的观察者模式参数。双向绑定完全打破了【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。 react 生态单向数据流的主流思想，【本文受版权保护】本文作者：唐霜，转载请注明出处。但带来的好处不言而喻，它可以避免复杂的回本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】调地狱，最好的例子就是一个简单的显示和隐【关注微信公众号：wwwtangshuangnet】【本文受版权保护】藏效果。

class Modal extends Component {
  static props = {
    $show: Boolean, // 声明这是一个需要双向绑定的属性，外部传入时必须传入特定结构的值
  }
  render() {
    return (
      <If is={this.attrs.show}>
        <Section>
          <Button onHint={() => this.$attrs.show = false}>close</Button>
        </Section>
      </If>
    )
  }
}

function Some() {
  const $show = useState(false)
  const [, setShow] = $show
  return (
    <Section>
      <Button onHint={() => setShow(true)}></Button>
      <Modal $show={$show} /> {/* $show={[show, setShow]} */}
    </Section>
  )
}

上面代码中的红色部分是个神奇的操作。虽然转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】从语言上，你看不出什么不同之处，但是你回【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】想一下 react 的原生操作，就会发现【转载请注明来源】【原创内容，转载请注明出处】，这样的操作在 react 生态中是不被【原创不易，请尊重版权】原创内容，盗版必究。允许的，而在 nautil 却可以实现双【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。向绑定，触发界面更新。（需要注意的是，这【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。里的 this.$attrs 虽然是响应转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】式的，但它不是所有属性都是响应式的，只有【转载请注明来源】【作者：唐霜】以 $ 开头传入的属性是响应式的，而且依【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net赖于外部逻辑完成响应，因此，和 vue 未经授权，禁止复制转载。原创内容，盗版必究。的 this 还是有非常大的不同）。需要【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net注意，虽然在声明时要求传入的 prop 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net为 $age，但是在 this.attr【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】s 上，却要使用 this.attrs.【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。age 读取。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

蓝色部分需要被注意，它是一个特定结构，一本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net个含有两个元素的数组。第一个元素是作为传【转载请注明来源】本文作者：唐霜，转载请注明出处。入 prop 的值，第二个元素是响应内部转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。发生变化时的函数 reactive。当【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】Sub 中执行了 this.$attrs.show = false 时，show 变化后的值作为参数，传给著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net reactive 函数，并执行 rea【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ctive 函数，在 reactive 【本文受版权保护】本文版权归作者所有，未经授权不得转载。函数中去更新当前组件的状态，从而触发界面【未经授权禁止转载】本文作者：唐霜，转载请注明出处。变化。

【本文首发于唐霜的博客】【未经授权禁止转载】

必须声明为双向绑定的属性，才能直接在 t著作权归作者所有，禁止商业用途转载。【作者：唐霜】his.$attrs 上进行操作，否则不著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】会有任何效果。另外，对 this.$at著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】trs 的操作，不会改写 this.at转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。trs 的值，而是仅调用外部传入的 re原创内容，盗版必究。【版权所有，侵权必究】active。如果外部传入的 react原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。ive 没有修改传入的值，那么也不会有界【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】面的更新。例如，上面的 setShow 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】没有带来 show 的变化，那么 Mod未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。al 也不会有任何变化。

此外，如果你希望使用更优雅的写法，你可以【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。使用内置的 createTwoWayBi【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。nding 函数：

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

import { createTwoWayBinding } from 'nautil/utils'
class Some extends Component {
  state = {
    show: false,
  }
  render() {
    const $state = createTwoWayBinding(this.state, state => this.setState(state))
    return <Model $show={$state.show} />
  }
}

这样看上去更优雅，不需要传入数组，也不需【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net要传入 state（直接传入 state本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。像是传入 state 整个值作为 sh【原创内容，转载请注明出处】原创内容，盗版必究。ow 的属性值一样，不是很好）。而通过本文版权归作者所有，未经授权不得转载。【本文受版权保护】createTwoWayBinding 原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。函数，就可以将一个对象转化为可读取属性的【本文首发于唐霜的博客】【未经授权禁止转载】对象，实际上 $state.show 的【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。返回值也是一个符合双向绑定的数组，但是在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。阅读和理解上更容易理解一些。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

跨平台开发

【本文受版权保护】【作者：唐霜】本文作者：唐霜，转载请注明出处。

只能使用 Nautil 内置组件，或基于【原创不易，请尊重版权】【转载请注明来源】内置组件封装的新组件

【作者：唐霜】

只能使用 Nautil 内置封装的接口，【未经授权禁止转载】【作者：唐霜】不能使用特定平台独有的接口（例如相机、陀转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】螺仪、支付等）

【关注微信公众号：wwwtangshuangnet】

原创内容，盗版必究。

开发时，应该关注：

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

开发业务本身时，不要考虑运行平台，基于【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】Nautil 内置模块开发业务功能

【未经授权禁止转载】

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

本文作者：唐霜，转载请注明出处。

不同平台使用不同的入口文件，应用的入口文著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net件中使用对应的渲染模块

原创内容，盗版必究。

【未经授权禁止转载】

针对不同的平台，选择适合的构建工具和配置原创内容，盗版必究。本文作者：唐霜，转载请注明出处。选项

本文版权归作者所有，未经授权不得转载。

JSX 渲染语法

在 Nautil 的理念中，存在这样的一【本文受版权保护】著作权归作者所有，禁止商业用途转载。条有象征意义的 slogan：

Nautil is React, Nau【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】til is more than Rea【作者：唐霜】【本文首发于唐霜的博客】ct.
【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net

Nautil 和 react 几乎是完全【本文首发于唐霜的博客】【本文首发于唐霜的博客】兼容的（16.8+ 版本的 react）【原创内容，转载请注明出处】【原创不易，请尊重版权】，你可以把以前写的 react 组件直接【原创内容，转载请注明出处】【本文首发于唐霜的博客】拿到 Nautil 中使用（不考虑跨平台【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。，只想使用更新的写作方式），也可以把基于【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net Nautil 写的代码放到其他 rea本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ct 应用中使用，相互之间不会造成任何兼本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net容性问题（但是打包的代码量可能会比直接使【转载请注明来源】【版权所有，侵权必究】用 react 写的代码大一点）。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

生命周期函数

我们简化生命周期函数，因此，在开发 Na著作权归作者所有，禁止商业用途转载。【转载请注明来源】util 时，你可以忘记有关 react本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。生命周期函数的一切，使用更简短的生命周著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】期钩子函数。

init -> construct【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】or

转载请注明出处：www.tangshuang.net

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

转载请注明出处：www.tangshuang.net

onMounted -> comp转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】onentDidMount

【未经授权禁止转载】

本文版权归作者所有，未经授权不得转载。

shouldUpdate -> c【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。omponentShouldUpdate

本文作者：唐霜，转载请注明出处。

【本文受版权保护】

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

原创内容，盗版必究。

onUpdated -> comp【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。onentDidUpdate

【未经授权禁止转载】

【本文受版权保护】

著作权归作者所有，禁止商业用途转载。

onUnmount -> comp【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】onentWillUnmount

【原创内容，转载请注明出处】

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

onCatch -> compon本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netentDidCatch

【未经授权禁止转载】

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

内置组件

使用 Nautil 进行开发时，必须使用【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net内置的组件进行开发。和原生 react 本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。开发 web 应用不同，我们不能使用 d【未经授权禁止转载】未经授权，禁止复制转载。iv/span 这种 HTML 标签作为【版权所有，侵权必究】转载请注明出处：www.tangshuang.net基础组件，而是要使用 Nautil 的内【作者：唐霜】本文版权归作者所有，未经授权不得转载。置组件（如 Section, Text 【转载请注明来源】【转载请注明来源】等）代替。这是为跨平台准备的，只有使用内原创内容，盗版必究。【原创不易，请尊重版权】置组件构建起来的 nautil 应用才能本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】构建出跨平台的应用。

内置组件包含如下几类：

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【作者：唐霜】

接口组件
- 布局组件：Section 等
- 对象组件：Text、Input 等
- 驱动组件：用于调用设备硬件接口

【关注微信公众号：wwwtangshuangnet】

未经授权，禁止复制转载。

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

逻辑组件
- 条件逻辑组件：If、Switch 等
- 循环遍历组件：For、Each 等
- 渲染控制组件：Fragment、Obse【原创内容，转载请注明出处】【原创内容，转载请注明出处】rver、Static 等

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

【转载请注明来源】

交互组件：内置常用交互的组件，例如右滑回【本文首发于唐霜的博客】【未经授权禁止转载】退、幻灯片等

著作权归作者所有，禁止商业用途转载。

这些组件都是由 Nautil 默认导出的【原创不易，请尊重版权】原创内容，盗版必究。，你可以在下文详细了解。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【本文受版权保护】

跨平台构建

不同的平台，使用不同的入口文件，使用不同【关注微信公众号：wwwtangshuangnet】【转载请注明来源】的构建配置。例如，我们在 web 上：

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【转载请注明来源】

import { mount } from 'nautil/dom'
import App from './app.jsx'

mount('#app', App)

而在 react-native 上：

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

import { register } from 'nautil/native'
import App from './app.jsx'

register('ProjectName', App)

在小程序上：

import { createApp } from 'nautil/miniapp'
import App from './app.jsx'

export default createApp(App)

虽然它们看上去非常相似，但是背后的平台不本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】同，所要求的构建工具也不同。

【原创不易，请尊重版权】未经授权，禁止复制转载。

组件

虽然 Nautil 的组件本质上就是 r【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】eact 组件，但是在具体细节上和 re【本文首发于唐霜的博客】【原创不易，请尊重版权】act 组件还是有所不同。本章将详细讲解【本文受版权保护】【版权所有】唐霜 www.tangshuang.net Nautil 组件在 react 组件著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】之外还具备的新特征。

import { Component } from 'nautil'

Props 声明和检查

【本文受版权保护】【未经授权禁止转载】【作者：唐霜】

props 声明

通过 static props 属性，你原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】可以要求组件所传入的 props 必须包转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】含哪些属性。nautil 的属性包含三种著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】：

未经授权，禁止复制转载。原创内容，盗版必究。

普通属性

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

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

$ 开头的双向绑定属性

转载请注明出处：www.tangshuang.net

【本文受版权保护】

on 开头的事件属性

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

【作者：唐霜】

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

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

普通属性和 react 属性一样，没有差【转载请注明来源】本文作者：唐霜，转载请注明出处。别。双向绑定属性用 $ 开头进行声明。o【作者：唐霜】【本文受版权保护】n 开头的属性被认为是一个 handle【原创内容，转载请注明出处】未经授权，禁止复制转载。r 属性，用于类似 react 中 on【本文受版权保护】【作者：唐霜】Click 这类属性。

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】

props 校验

通过 static props 的属性值【原创不易，请尊重版权】【版权所有，侵权必究】，我们可以对传入的 props 的值进行【作者：唐霜】【原创内容，转载请注明出处】校验。nautil 中的类型校验遵循 t未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。yshemo 的类型校验方法。在撰写一个转载请注明出处：www.tangshuang.net【本文受版权保护】类型时，你需要从 nautil 中引入已【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】支持的类型规则。

import { Dict, Component } from 'nautil'

class SomeComponent extends Component {
  static props = {
    person: new Dict({
      head: Object,
      body: Object,
      foot: Object,
    }),
  }
}

对于三种不同的属性，其校验规则也稍有不同【作者：唐霜】【关注微信公众号：wwwtangshuangnet】：

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

普通属性：按规定的类型进行校验

【作者：唐霜】

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

转载请注明出处：www.tangshuang.net

双向绑定属性：先检查传入值是否符合双向绑【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。定要求的传入值，然后再按普通属性进行类型【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】检查

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

【本文受版权保护】

本文作者：唐霜，转载请注明出处。

事件属性：true 表示必须传入，fal【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。se 表示可以省略。只检查传入值是否符合本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】事件属性要求（Function，或 [&著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】#8230;StreamOperator【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】,Function]）

著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

著作权归作者所有，禁止商业用途转载。

其中，双向绑定属性、事件属性，无论在 p转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】rops 中有无声明，在运行时都会进行基【未经授权禁止转载】未经授权，禁止复制转载。本类型校验。

【转载请注明来源】本文作者：唐霜，转载请注明出处。

削减代码

在 process.env.NODE_E【原创内容，转载请注明出处】【作者：唐霜】NV === ‘produc【原创内容，转载请注明出处】未经授权，禁止复制转载。ition’ 时，校验会被禁著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。用。也就是说，在正式环境中，组件 pro【本文首发于唐霜的博客】【作者：唐霜】ps 的结构、类型校验是禁用掉的，不会执【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。行，并且通过 webpack 的 tre转载请注明出处：www.tangshuang.net【作者：唐霜】e-shaking，可以将部分代码削减掉本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。。

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】

Attrs 属性

Nautil 组件继承自 react 组原创内容，盗版必究。【原创不易，请尊重版权】件，也包含了 props 属性，可以通过【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net this.props 属性读取原始的本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。props。但是，由于我们 Nautil【原创内容，转载请注明出处】【原创不易，请尊重版权】组件的特性，双向绑定属性和事件属性，所【未经授权禁止转载】【未经授权禁止转载】以原始 props 没有意义，无法正常发【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。挥 nautil 的特性。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

Attrs 值

普通属性

【作者：唐霜】

原创内容，盗版必究。

【本文受版权保护】

双向绑定属性

本文作者：唐霜，转载请注明出处。

【作者：唐霜】

对于 this.props 上的 cla【原创不易，请尊重版权】【未经授权禁止转载】ssName, style, child转载请注明出处：www.tangshuang.net【作者：唐霜】ren 属性，并不在 attrs 中，o【转载请注明来源】【关注微信公众号：wwwtangshuangnet】n 开头的事件属性也不在其中。

双向绑定

reneder() {
  return <Button onHint={() => this.$attrs.age ++}></Button>
}

双向绑定的用法在前文已经详细解释过。需要【转载请注明来源】未经授权，禁止复制转载。注意的是，只有外部传入时以 $ 开头的属转载请注明出处：www.tangshuang.net【本文受版权保护】性才会触发双向绑定。比如外部传入 age本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net 属性，则不会触发双向绑定操作 this【原创内容，转载请注明出处】【原创不易，请尊重版权】.$attrs.age ++ 操作不会产【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】生任何作用（甚至不会修改 this.at【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。trs）。

【原创不易，请尊重版权】【本文首发于唐霜的博客】【本文受版权保护】

在 static props 中未声明属未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net性为双向绑定属性，但是在传入时使用了双向未经授权，禁止复制转载。原创内容，盗版必究。属性标记 $，那么该属性在内部仍然是一个【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。双向绑定属性。在 static prop著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。s 中声明了这个属性为双向绑定属性，那么转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】外部传入时，只允许传入双向绑定结构，而不未经授权，禁止复制转载。【本文受版权保护】允许传入普通属性值。

转载请注明出处：www.tangshuang.net【未经授权禁止转载】【作者：唐霜】【未经授权禁止转载】

stylesheet

和 react 组件不同，nautil 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net传入样式时，不需要区分 classNam【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】e 和 style，直接通过独立的 st【本文受版权保护】本文作者：唐霜，转载请注明出处。ylesheet 属性传入。组件内部会自原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net动进行识别，当值为 object 时自动【原创不易，请尊重版权】【本文受版权保护】识别为 style 或一个 classN本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】ame 的 mapping，传入 str【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】ing 时自动识别为 className【本文受版权保护】【版权所有，侵权必究】。

【转载请注明来源】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

通过处理之后，this 上会多出 thi本文作者：唐霜，转载请注明出处。【作者：唐霜】s.className 和 this.s【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。tyle，你可以在 render 中使用原创内容，盗版必究。未经授权，禁止复制转载。这两个属性。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。

chidlren

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

on:streams

Nautil 的事件属性可以像 reac【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.nett 的事件属性一样使用，但是名称会有不同著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。，例如 nautil 中不会有 onCl本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】ick 属性，而是采用 onHit 作为【原创不易，请尊重版权】【转载请注明来源】替代。这是因为在跨平台开发时，我们将通过【本文受版权保护】著作权归作者所有，禁止商业用途转载。新的名字统一不同平台的事件名字。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

<Button onHit={e => console.log(e)}>click</Button>

但同时，nautil 基于 rxjs 开【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】发了一套更丰富的事件流机制。在开发中，可本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。以让抽象的事件更加独立完成某些操作。我们【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】先来看一个例子：

【未经授权禁止转载】转载请注明出处：www.tangshuang.net

class Some extends Component {
  static props = {
    onHit: false, // on 开头的事件属性在校验时会被忽略其值，使用内部的规则自动进行校验
    $age: Number,
    $weight: Number,
  }
  
  init() {
    // 通过 on 来为事件流绑定新的动作。
    // on 绑定的动作，不会影响外部传入的 onHit 已经生效的回调动作
    this.on('Hit', () => this.$attrs.age ++)
    this.on('Hit', () => this.$attrs.weight = this.attrs.age * 10)
  }
  render() {
    return (
      <Button onHit={this.Hit$}>grow</Button>
    )
  }
}

上面这个组件，在没有蓝色部分的情况下，也转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。可以正常运行。蓝色的部分，在此基础上，对【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。 onHit 事件新增了订阅。也就是说，【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】当用户点击 Button 的时候，不仅会原创内容，盗版必究。转载请注明出处：www.tangshuang.net触发组件外部传入的 onHit 回调，而【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。且还会触发新增的两个订阅，这使得关于事件【本文受版权保护】【版权所有】唐霜 www.tangshuang.net的管理可分离后进行。

未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

对于事件的传入，有 3 种形式：

函数，和 react 事件没有任何差别

【未经授权禁止转载】

本文版权归作者所有，未经授权不得转载。

【转载请注明来源】

数组，传入 pipe 处理器和订阅函数，【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。即 […operators,著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 subscribe]，数组的最后一个是本文作者：唐霜，转载请注明出处。【作者：唐霜】原始订阅函数，前面所有函数为 rxjs 【作者：唐霜】本文版权归作者所有，未经授权不得转载。的操作符，经过 pipe 处理得到的最终【未经授权禁止转载】未经授权，禁止复制转载。 stream 被作为 this.onH【作者：唐霜】未经授权，禁止复制转载。it$。

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

Stream，直接传入一个 Stream未经授权，禁止复制转载。【作者：唐霜】的实例，例如上面代码中绿色的部分 onHit={this.Hit$} 其中 this.Hit$ 本身就是一个【版权所有，侵权必究】原创内容，盗版必究。 stream，可以被传入到 onHit著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。中。

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

这也就是 onHit$ 的魔力所在。我们原创内容，盗版必究。【转载请注明来源】用代码来演示怎么使用：

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

import { map } from 'rxjs/operators'

class App extends Component {
  render() {
    return <Some onHint={[map(x => x * x), x => console.log(x)]} />
  }
}

这种情况下必须注意，订阅函数必须被传入（【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】放在数组最后一个位置）。实际上，只传入一【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】个函数的情况，在内部实际上处理成数组对待【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。，只不过该数组只有一个元素，即该订阅函数【本文受版权保护】【作者：唐霜】。有关事件流、管道操作符等，请详细阅读 rxjs 的文档了解如何使用。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

update

转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【作者：唐霜】

this.update() -> 【本文受版权保护】本文作者：唐霜，转载请注明出处。相当于调用 this.weakUpdat本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】e()

著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

this.update(true) -&【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netgt; 相当于调用 this.force【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】Update()

【原创不易，请尊重版权】

this.update({ a: 1 }【转载请注明来源】转载请注明出处：www.tangshuang.net) -> 相当于调用 this.s原创内容，盗版必究。【作者：唐霜】etState({ a: 1 })

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

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

this.update(state =&【版权所有，侵权必究】转载请注明出处：www.tangshuang.netgt; state.a ++) ->未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。; 特殊用法，以 mutable 的方式本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。生成新的 immutable 的 sta【未经授权禁止转载】【版权所有，侵权必究】te 并调用 this.setState本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】完成更新

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

原创内容，盗版必究。

组件上同时存在如下四个方法用于更新：

this.setState(next, 著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netcallback) -> reac本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】t 原生方法

【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】

this.forceUpdate() -【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net> 在 react 原生 forc【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。eUpdate 基础上进行了封装，返回一本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net个 Promise

this.weakUpdate() -&【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。gt; 相当于 this.setStat【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。e({})，返回一个 Promise

【未经授权禁止转载】

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

转载请注明出处：www.tangshuang.net

this.update() -> 未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。返回一个 Promise

【原创内容，转载请注明出处】

未经授权，禁止复制转载。

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

在使用时，不需要使用 this.upda【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】te.bind(this) 这种方法进行转载请注明出处：www.tangshuang.net【未经授权禁止转载】绑定，直接使用 this.update,【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 this.forceUpdate, t著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】his.weakUpdate 即可，它自转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net己已经经过绑定了。

【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

生命周期

Nautil 组件的生命周期和 reac【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】t 组件一致，在前文已经介绍过。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

init: 实例化时调用，此时，this本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。.attrs 还未生成

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

onDigested: nautil内的原创内容，盗版必究。【作者：唐霜】特殊阶段，此时，this.attrs 刚著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】刚生成

【作者：唐霜】

未经授权，禁止复制转载。

onInit: 组件实例化完成后

【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。

onMounted: 已经挂载完毕

未经授权，禁止复制转载。

【未经授权禁止转载】

【作者：唐霜】

未经授权，禁止复制转载。

onAffected: 渲染完毕时

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

———未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。;——-

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

shouldUpdate: 是否允许更新

本文版权归作者所有，未经授权不得转载。

【关注微信公众号：wwwtangshuangnet】

onUpdate: 准备更新组件

未经授权，禁止复制转载。

【转载请注明来源】

转载请注明出处：www.tangshuang.net

未经授权，禁止复制转载。

onNotUpdate: 不会更新组件，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】shouldUpdate 返回 fals【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】e 时被调用

【原创不易，请尊重版权】

onDigested

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

本文版权归作者所有，未经授权不得转载。

onUpdated: 已经更新完毕

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

onAffected: 在挂载和更新结束未经授权，禁止复制转载。【本文首发于唐霜的博客】时都会被调用，方便再渲染完成时使用该方法

未经授权，禁止复制转载。

———转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。;——-

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

未经授权，禁止复制转载。

onUnmount: 准备进行卸载

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

本文作者：唐霜，转载请注明出处。

———本文作者：唐霜，转载请注明出处。原创内容，盗版必究。;——-

本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net

onCatch: 当内部组件渲染发生错误【原创内容，转载请注明出处】未经授权，禁止复制转载。时

【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。

【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

具体不同阶段的调用如下图演示：

【原创不易，请尊重版权】未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。

【未经授权禁止转载】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

可以看到，所有生命周期钩子函数比 rea原创内容，盗版必究。【原创不易，请尊重版权】ct 原生的生命周期钩子函数简化且丰富了本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net不少。其中 onDigested 是比较【本文受版权保护】【未经授权禁止转载】特殊的一个生命周期函数，在原生 reac【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.nett 中你找不到对应的处理时间点，这是 N【本文首发于唐霜的博客】【作者：唐霜】autil 新增的。在 Nautil 中【版权所有】唐霜 www.tangshuang.net【转载请注明来源】，组件需要在 props 或 state【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net 变化时进行处理，以生成新的 this.【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netattrs 或完成类型校验等其他工作，这【本文受版权保护】著作权归作者所有，禁止商业用途转载。个过程叫 digest。另外，onAff【原创内容，转载请注明出处】【未经授权禁止转载】ected 则在挂载和更新阶段都会调用，【原创内容，转载请注明出处】【未经授权禁止转载】非常有助于处理一些需要在两个阶段都处理的【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】一些任务。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

Render

在 nautil 中，你可以在 clas转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。s 组件中写 hooks 了，区别在于，转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】你需要用 Render(props) 代替 render()。在 Render 中你仍然可以使用 t【转载请注明来源】【作者：唐霜】his 来调用组件 class 上写的方转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】法。例如：

转载请注明出处：www.tangshuang.net【未经授权禁止转载】

class MyComponent extends Component {
  Render(props) {
    const [state, setState] = useState(0)
    const some = this.getSome() // 可以调用 this 上的方法
    ...
  }
}

虽然使用 class 组件可以很好的组织著作权归作者所有，禁止商业用途转载。【本文受版权保护】代码，但是，有的时候，hooks 可以起【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】到非常大的缓存作用。hooks 函数的第本文版权归作者所有，未经授权不得转载。【作者：唐霜】二个参数可以解决很多复杂的场景。通过 R未经授权，禁止复制转载。【版权所有，侵权必究】ender 你可以同时发挥 class 【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net组件和 hooks 的威力。

【作者：唐霜】【本文受版权保护】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

状态管理

现在，你需要忘掉 redux，它实在是太【本文受版权保护】未经授权，禁止复制转载。冗余了，像一个笨拙的大象，匍匐在 rea【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netct 这个汗血宝马身上。我们在 reac【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。t 开发中为什么需要一个可全局使用的数据原创内容，盗版必究。【原创内容，转载请注明出处】存储器，这个问题相信你已经很清楚了吧。N【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】autil 提供了极其轻便的 Store本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】用于管理全局数据。

原创内容，盗版必究。未经授权，禁止复制转载。【未经授权禁止转载】

import { Store, Provider, Consumer, useStore, connect, applyStore } from 'nautil'

Store

Nautil 中的 Store 是一个轻未经授权，禁止复制转载。未经授权，禁止复制转载。便的状态管理工具，它提供了 dispat本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ch 方法，可以用 immutable 【原创内容，转载请注明出处】原创内容，盗版必究。的写法来修改状态。和 vue 不同，st【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netore 中的数据是动态的，不需要你提前规未经授权，禁止复制转载。【未经授权禁止转载】定都有哪些属性，store 中的数据是原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。immutable 的，可被观察，可恢复著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。，可随时添加新属性。

【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

const store = new Store({
  a: 1,
})

// 获取状态
const state = store.getState()

// 修改状态
store.setState({ a: 2 })
store.dispatch(state => state.a ++)

// 重置状态为第一次实例化时传入的值
store.resetState()

// 订阅状态变化
store.subscribe((next, prev) => { .. })
// 取消订阅
store.unsubscribe(fn)

以上就是 Store 的所有能力，极其简本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】单（源码），且拥有魔法。

结合组件使用

在 Nautil 中你必须结合组件使用未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。Store，以发挥它的效果。这里面涉及到【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。监听 Store 变化和重新渲染。实际上【未经授权禁止转载】【本文首发于唐霜的博客】操作非常简单：

import { React, Component, Store, Provider, Consumer } from 'nautil'

const store = new Store({
  a: 1,
})

class App extends Component {
  return (
    <Provider store={store}>
      <Some />
      <Trigger />
    </Provider>
  )
}

class Some extends Component {
  render() {
    return (
      <Consumer>
        {store => <span>{store.state.a}</span>}
      </Consumer>
    )
  }
}

class Trigger extends Component {
  render() { 
    return (
      <Consumer>
        {store => <button onClick={() => store.dispatch(state => state.a ++)}>grow</button>}
      </Consumer>
    )
  }
}

在上面的代码中，我们在 Some 和 T【未经授权禁止转载】【本文受版权保护】rigger 之间共享了同一个 stor【转载请注明来源】【转载请注明来源】e，它们都能够根据 store 中 st转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ate 的变化来重新渲染界面。

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【作者：唐霜】

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

const Trigger = connect(store => ({ a: store.state.a, grow: () => store.dispatch(state => state.a ++) }))(class extends Component {
  render() {
    const { a, grow } = this.props
    ...
  }
})

connect 的第一个参数是一个 ma【作者：唐霜】原创内容，盗版必究。p 函数，用以接收 store，并返回一【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net个对象，这个对象将被增加到 props 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。上传给被封装的组件。而实际上，这个 ma【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netp 也可以传给 Consumer 组件，【版权所有】唐霜 www.tangshuang.net【本文受版权保护】例如：

<Consumer map={store => ({ ... })}>
  ...
</Consumer>

connect 的第二个参数是一个 wa未经授权，禁止复制转载。未经授权，禁止复制转载。tch 数组，用以决定当发现 store【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。中 state 的哪些属性发生变化时，本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net才对内部进行重新渲染。同样，这个 wat【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ch 也可以传给 Consumer:

【转载请注明来源】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【原创内容，转载请注明出处】

<Consumer map={store => ({ ... })} watch={['a']}>
   ...
</Consumer>

局部状态共享

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

第一种，使用 useStore hooks 函数：

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

import { useStore } from 'nautil'

function MyComponent() {
  const { state, setState } = useStore(store, ['a'])
  ...
}

useStore 用于作为 hooks 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net函数监听 store 中 state 的转载请注明出处：www.tangshuang.net【转载请注明来源】变化，并触发更新。它直接返回传入的 st转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】ore，但是由于 store 上的 st【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ate, setState, dispa【未经授权禁止转载】本文作者：唐霜，转载请注明出处。tch 可以直接解构出来使用，所以上面的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】这段代码看上去非常优雅。它的第二个参数是【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。上文提到的 watch 列表，有助于我们【版权所有，侵权必究】【版权所有，侵权必究】缩小观察的范围，提升性能。

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。

【转载请注明来源】【原创不易，请尊重版权】【未经授权禁止转载】【原创不易，请尊重版权】

import { applyStore } from 'nautil'

const { useStore, connect } = applyStore(store)

这里的 useStore 和上面的 useStore 异曲同工之【版权所有，侵权必究】未经授权，禁止复制转载。妙，只是不再传入 store 作为参数。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】而 connect 也是一样的，观察的是本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。这里传入的 store，而非 Provi著作权归作者所有，禁止商业用途转载。【转载请注明来源】der 提供的 store。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

通过上面两种方法，我们非常灵活的在几个组原创内容，盗版必究。原创内容，盗版必究。件小范围内的共享一个 store 来控制【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。状态变化。

导航/路由

对于一个框架而言，路由是必须要解决的。r【本文首发于唐霜的博客】【本文受版权保护】eact 虽然是一个优秀的 UI 库，却【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】无法满足开发者对应用开发的所有需求。包括著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。路由在内的其他应用部件它都没有提供。为了本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。解决这个痛点，Nautil 并没有直接采【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】纳 react-router 等第三方组【本文受版权保护】【版权所有】唐霜 www.tangshuang.net件，而是将提供一个路由方案。

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】

导航器（Navigation）：用于创建【作者：唐霜】著作权归作者所有，禁止商业用途转载。一个带状态的导航装置

【作者：唐霜】

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

【关注微信公众号：wwwtangshuangnet】

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

导航者（Navigator）：用于创建一转载请注明出处：www.tangshuang.net【未经授权禁止转载】个基于导航器的视图区域

原创内容，盗版必究。

路由（Route）：用于规定具体的导航线著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】路，确定每一个状态要展示怎样的内容

【本文受版权保护】

未经授权，禁止复制转载。

原创内容，盗版必究。

导航（Navigate）：用于在路由之间【转载请注明来源】【本文受版权保护】进行切换，实现页面跳转

【关注微信公众号：wwwtangshuangnet】

Navigation

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

然而，react-router 提供了一【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】种将路由组件化的开发方式，这种方式值得学【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。习。但和 redux 一样，由于它默认认【原创不易，请尊重版权】【本文首发于唐霜的博客】为一个应用只会有一个 react 应用实【版权所有，侵权必究】转载请注明出处：www.tangshuang.net例。另外，不同的平台上，也需要不同的路由著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。管理来解决问题。为此，我们提供了统一的导未经授权，禁止复制转载。【原创内容，转载请注明出处】航器。

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

import { Navigation } from 'nautil'

const navigation = new Navigation(config)

配置

我们来看下如何进行配置。对于不同的平台，【本文首发于唐霜的博客】【本文首发于唐霜的博客】配置几乎是一样的，有些选项，在 web 本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】平台上生效，在其他平台不生效。

{
  mode: 'history', // 可选
  searchQuery: '_url', // 可选，当 mode 为 search 时生效
  base: '/', // 可选
  routes: [ // 必须
    {
      name: 'home',
      path: '/home',
      children: [ // 子路由，可选
        {
          name: 'sub', // 实际名字为 home.sub
          path: '/sub', // 实际路径为 /home/sub
          params: {}, // 可选，默认传入什么 params
        },
      ],
    },
  ],
  maxHistoryLength: 20, // 可选，最多保存多少个历史记录
  defaultRoute: 'home', // 可选，默认路由，没传的时候使用第一个 route
}

none: 内存模式，默认，界面刷新就没【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。了

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

storage: 本地持久化存储模式，刷本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。新界面仍然保留当前路由状态

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

著作权归作者所有，禁止商业用途转载。

history: /path

【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。

【本文受版权保护】

hash: url#/path

【未经授权禁止转载】

search: url#?_url=ur著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。lencode(/path)

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

原创内容，盗版必究。

在配置选项中，你可以直接将对应的页面组件著作权归作者所有，禁止商业用途转载。【转载请注明来源】配置到路由中。这个部分会在下文 Navi转载请注明出处：www.tangshuang.net原创内容，盗版必究。gator 中讲解。

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。

state 和 status

在 Navigation 实例上也有一个【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 state，它上面收集了当前的 rou著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。te, url 等信息，用来在某些情况下【转载请注明来源】【本文首发于唐霜的博客】做判定使用。但是，我们要面临一个情况，就【转载请注明来源】本文版权归作者所有，未经授权不得转载。是当我们导航到一个不存在的路由时，导航器本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】会返回给我一个 $onNotFound 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的事件，这时，state 不会被更新或置【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】空，而是保留上一个正确的路由信息。那么怎【版权所有，侵权必究】【本文首发于唐霜的博客】么区分这种情况呢？实例上会有一个 sta【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】tus 属性，它的值为 0 或 1. 0原创内容，盗版必究。【原创内容，转载请注明出处】表示 not found，而 1 表示转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】正常进入某个页面，因此，在做判定时，一定【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net要通过这两个属性同时来进行判定。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

监听导航变化

【本文受版权保护】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【作者：唐霜】

navigation.on('home', state => console.log(state), exact)

监听的对象有：

*: 导航器有任何变动都被触发

本文版权归作者所有，未经授权不得转载。

!: 未找到路由（路由没有声明）时被触发

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

name: 当进入对应名字的路由时触发，本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】当进入其子路由时也会被触发

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

原创内容，盗版必究。

name && exac【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.nett: 当进入同名路由时被触发，进入其子路【本文首发于唐霜的博客】【转载请注明来源】由时，不会被触发

【本文受版权保护】

未经授权，禁止复制转载。

原创内容，盗版必究。

url: 当当前访问的 URL 以 ur著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。l 开头（或相等）时也会触发

【原创不易，请尊重版权】

【作者：唐霜】

url && exact【未经授权禁止转载】原创内容，盗版必究。: 当当前访问到的 URL 等于 url【版权所有，侵权必究】【作者：唐霜】时被触发

【原创不易，请尊重版权】

【未经授权禁止转载】

【本文受版权保护】

转载请注明出处：www.tangshuang.net

path: 当通过 path 找到一个本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】route 时，该 route 和当前被【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。访问的路由相同时被触发（含子路由）

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

【未经授权禁止转载】

path && exac本文版权归作者所有，未经授权不得转载。【转载请注明来源】t: 不含子路由

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

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

转载请注明出处：www.tangshuang.net

regexp: 正则表达式，当当前 UR【原创不易，请尊重版权】【本文首发于唐霜的博客】L 与之匹配时触发

【转载请注明来源】

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

著作权归作者所有，禁止商业用途转载。

function: 接收当前 state本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】返回 true 时触发

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

navigation.on(/book\/[0-9]+/, callback) // 通过正则监听对应的 URL
navigation.on('parent.child', callback, true) // 通过 name 精确监听 parent.child 这个路由
navigation.on('/book/:id', callback) // 通过 path 监听

结合观察者模式，在 Nautil 中使用转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。导航器的监听功能，可以实现根据导航的变化本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net而切换页面。

事件

【本文受版权保护】【原创内容，转载请注明出处】

$onEnter 进入页面后

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

$onLeave 离开页面前

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

【未经授权禁止转载】

【本文受版权保护】

著作权归作者所有，禁止商业用途转载。

$onForword 进入下一个页面，之【版权所有，侵权必究】原创内容，盗版必究。后一般还会触发 $onLeave, $o本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】nEnter

【作者：唐霜】

著作权归作者所有，禁止商业用途转载。

$onBack 返回，之后一般还会触发【转载请注明来源】【原创不易，请尊重版权】$onLeave, $onEnter

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

$onBackEmpty 当返回时，已经未经授权，禁止复制转载。【本文首发于唐霜的博客】没有历史记录了，这个事件会被触发，同时，本文作者：唐霜，转载请注明出处。【本文受版权保护】如果设置了 defaultRoute 还本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。会跳至该路由，否则页面不会发生跳转

本文版权归作者所有，未经授权不得转载。

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

【关注微信公众号：wwwtangshuangnet】

is

在 Navigation 实例上存在一个原创内容，盗版必究。【作者：唐霜】 is 方法，用于判定当前的导航器状态是本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。否和传入的参数匹配。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【原创不易，请尊重版权】

if (navigation.is(match, exact)) {}

判定当前的导航器状态是否和传入的 mat【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ch 匹配。

著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【本文受版权保护】

!: 当前是否为 not found 状著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】态

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

*: 当前是否为任意非 not foun著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。d 状态

未经授权，禁止复制转载。

name: 当前是否为 name 的同名【转载请注明来源】【版权所有，侵权必究】路由

本文版权归作者所有，未经授权不得转载。

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

【作者：唐霜】

name && !exa【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ct: 当前是否为 name 的子路由

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

【本文受版权保护】

url: 当前 URL 是否为 url

【未经授权禁止转载】

【转载请注明来源】

【本文受版权保护】

url && !exac【作者：唐霜】【未经授权禁止转载】t: 当前 URL 是否以 url 开头

【转载请注明来源】

未经授权，禁止复制转载。

path: 当前状态是否为 path 对转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net应的路由

【本文受版权保护】

著作权归作者所有，禁止商业用途转载。

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

path && !exa【原创不易，请尊重版权】【本文首发于唐霜的博客】ct: 当前状态是否为 path 对应的【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】子路由

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

regexp: 当前 URL 是否和该正【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net则表达式匹配

【转载请注明来源】

转载请注明出处：www.tangshuang.net

function: 当前状态传入 fun【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ction 之后是否返回 true

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

这个判定逻辑，会被 Route 使用。另【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。外，需要注意，这里的判定逻辑和 on 的【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】监听绑定稍有不同。* 在监听绑定中，表示【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】任何变动都会被监听，而 * 在 is 中【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。仅表示匹配非 not found 状态。

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

Navigator

在 Nautil 中你可以使用 Obse【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netrver 组件来使用观察者模式，通过订阅【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。 navigation 实例来达到根据路转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】由切换页面的目的，但是，实践起来会非常麻本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】烦。Nautil 内置了导航相关的组件：【转载请注明来源】【作者：唐霜】Navigator, Route, Na【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】vigate，从而让你更方便的使用。

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【未经授权禁止转载】

【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

import { Navigator } from 'nautil/components'

这个组件的作用是创建一个区域，这个区域内本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net按照路由规则来进行。

【本文受版权保护】本文作者：唐霜，转载请注明出处。【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

配置式渲染

当开启 inside 属性时，它会去读取未经授权，禁止复制转载。未经授权，禁止复制转载。 navigation 配置上的 rou本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】te.component，使用该配置进行【未经授权禁止转载】【原创内容，转载请注明出处】渲染，并忽略掉内部元素。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

<Navigator navigation={navigation} inside />

此时不需要传入 dispatch 属性。

const navigation = new Navigation({
  routes: [
    {
      name: 'home',
      path: '/home',
      component: Home, // 使用哪个组件渲染 home 这个 route
      props: { title: 'Home' }, // 渲染时给 component 传入什么 props
      animation: 600,
    },
  ],
  notFound: NotFound, // 未匹配路径时渲染哪一个组件
})

这种配置方法，有点像 vue-route【本文首发于唐霜的博客】未经授权，禁止复制转载。r 或 ui-router 的做法，即转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】navigation 本身已经包含了路由【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】渲染。配置式渲染时，这些组件会在 pro【本文首发于唐霜的博客】【版权所有，侵权必究】ps 中接收一个 navigation。

未经授权，禁止复制转载。原创内容，盗版必究。【原创不易，请尊重版权】

函数式渲染

当 Navigator 的 childr本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】en 是一个函数时，使用该函数渲染界面。【作者：唐霜】【本文首发于唐霜的博客】该函数将接收 navigation.

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

<Navigator navigation={navigation}>
  {Navi}
</Navigator>

function Navi(props) {
  const { navigaition } = props
  return <Text>{navigation.status ? navigation.state.name : 'not found'}</Text>
}

这里创建了一个函数 Navi 用以在 N【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netavigator 中使用。由于函数接收一本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。个对象，里面包含 navigation，原创内容，盗版必究。【未经授权禁止转载】因此，可以对那些只接收 navigati【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】on 的函数组件实现复用。

【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

元素式渲染

当 Navigator 里面有独立的 j转载请注明出处：www.tangshuang.net【转载请注明来源】sx 片段时，会被直接采用。

<Navigator navigation={navigation} dispatch={this.update}>
   <Route match="home" component={Home} />
   <Route match="page1" component={Page1} />
   <Route match="!" component={NotFound} />
</Navigator>

此时的 Navigator 仅仅像是一个本文作者：唐霜，转载请注明出处。【转载请注明来源】简写版的 Observer，它内部展示什本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。么内容完全没有约束，你不一定要使用 Ro【未经授权禁止转载】转载请注明出处：www.tangshuang.netute 来进行路由，甚至可以使用 Swi【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】tch-Case 组件来完成路由。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

此时，必须传入 dispatch 属性，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】用以更新界面。

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

【作者：唐霜】未经授权，禁止复制转载。【未经授权禁止转载】【转载请注明来源】

自动污染

在 Navigator 内部使用 Rou【转载请注明来源】转载请注明出处：www.tangshuang.nette 和 Navigate 组件时，会被本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】自动注入 navigation 属性。对于应用级别的开发，为了方便写作转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，可以直接不向 Route 和 Navi【转载请注明来源】原创内容，盗版必究。gate 传 navigation 属性转载请注明出处：www.tangshuang.net【作者：唐霜】。但是为了复用方便，或提高阅读性，建议最【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。好还是传 navigation，这样对于【未经授权禁止转载】【转载请注明来源】在其他 nautil 应用中使用该组件也【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】可以正常且准确的使用。

Route

路由组件，用以根据 navigation【未经授权禁止转载】【原创不易，请尊重版权】的当前状态，决定使用什么内容进行渲染。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

import { Route } from 'nautil/components'

参数

它接收如下属性：

navigation: 根据哪一个导航器未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的状态进行处理

本文版权归作者所有，未经授权不得转载。

match: 当导航器的状态与该值匹配时【版权所有，侵权必究】【本文受版权保护】，该路由将进行渲染，否则不渲染内容，使用【本文受版权保护】【原创内容，转载请注明出处】 navigation.is 进行匹配

【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net

exact: 可选，是否进行精确匹配

转载请注明出处：www.tangshuang.net

【本文受版权保护】

<Route navigation={navigation} match={/book\/[0-9]+/}>
  <Book id={navigation.state.params.id} />
</Route>

组件式渲染

<Route navigation={navigation} match="some" component={Some} props={{ title: 'Some' }}>
  <Text>children</Text>
</Route>

props 是可选的，需要的时候才传入。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】同时 Some 会接收到一个 navig转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netation 的 props，Some 组【未经授权禁止转载】本文作者：唐霜，转载请注明出处。件可以利用该实例做一些判断。另外，还能接【版权所有，侵权必究】【未经授权禁止转载】收内部的 children 到 comp【转载请注明来源】未经授权，禁止复制转载。onent 中使用。

【转载请注明来源】本文作者：唐霜，转载请注明出处。

函数式渲染

<Route navigation={navigation} match="home">
  {Home}
</Route>

function Home(props) {
  const { navigation } = porps
  const { state } = navigation
  const { params } = state
  const { title } = params
  return <Text>{title}</Text>
}

元素式渲染

内部包含想要使用的 jsx 元素。

<Route navigation={navigation} match="some">
  <Text>some</Text>
</Route>

配置式渲染

【原创不易，请尊重版权】【本文受版权保护】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

<Route navigation={navigation} match="some" />

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。

{
  routes: [
    {
      name: 'some',
      patch: '/some',
      component: Some,
      props: { title: 'some' },
    },
  ],
}

Some 组件也会被注入一个名为 nav【未经授权禁止转载】【作者：唐霜】igation 的 props。

【作者：唐霜】原创内容，盗版必究。

动画

在大部分应用中，切换界面时，有动画转场的未经授权，禁止复制转载。【作者：唐霜】需求。此时，我们可以通过 Route 的 animation 属性搭配内部动画组件来实现。

未经授权，禁止复制转载。【原创内容，转载请注明出处】

<Route navigation={navigation} match="some" animation={600} />

animation 属性的作用有两个：

未经授权，禁止复制转载。未经授权，禁止复制转载。原创内容，盗版必究。

延时卸载内部组件，当导航离开该路由时，不【作者：唐霜】本文作者：唐霜，转载请注明出处。会立即卸载内部元素，而是会有一个延时，传未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】入的 animation 值即延时卸载的本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。时长

【原创不易，请尊重版权】

像 component 组件注入 sho【原创不易，请尊重版权】未经授权，禁止复制转载。w 属性（仅组件式和配置式，函数式可在函【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】数参数中收取 show 属性）

本文作者：唐霜，转载请注明出处。

【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net

再结合下文要讲的 Animation 组【本文首发于唐霜的博客】【本文受版权保护】件，我们可以实现我们自己的动画转场效果：

<Route navigation={navigation} match="some" animation={600} component={Animation} props={{
  enter: '600 fade:in',
  leave: '600 fade:out',
}}>
  <Text>content</Text>
</Route>

上面这这段代码，实现了进入到某个路由和从【未经授权禁止转载】【本文首发于唐霜的博客】该路由离开时的动画效果，虽然很简单，但是【作者：唐霜】【转载请注明来源】开发者可以根据这个思路，实现更复杂的动画转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。效果。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net

可移植性

和 react-router 不同，na本文作者：唐霜，转载请注明出处。原创内容，盗版必究。util 中的 Route 组件具有高可未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。移植性。它是可以独立使用的，而非必须依赖【原创不易，请尊重版权】未经授权，禁止复制转载。 Navigator 组件。当你在使用【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netRoute 组件时，如果是被包含在 Na【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】vigator 内部，可以不传入 nav原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。igation，但是这样的坏处是不可移植转载请注明出处：www.tangshuang.net【未经授权禁止转载】，在其他应用中使用组件时，必须再在外部使【转载请注明来源】【转载请注明来源】用同一个 Navigator。但是假如你【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】传入了 navigation 属性，那么【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】这个组件可以在任何 react 应用中使本文作者：唐霜，转载请注明出处。【未经授权禁止转载】用。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

Navigate

导航组件，用于在应用中切换路由，实现页面【本文首发于唐霜的博客】【本文受版权保护】的跳转。

import { Navigate } from 'nautil/components'

它接收如下参数：

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

navigation: 要在哪个导航器上【作者：唐霜】本文作者：唐霜，转载请注明出处。进行导航，在 Navigator 内部使本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】用时可不传，会被自动污染

著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

params: 对象，当 to 为 na著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】me 时，作为参数传入进行跳转

著作权归作者所有，禁止商业用途转载。

【未经授权禁止转载】

open: 是否在新窗口打开，此时 to原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。应该是一个在新窗口打开的 url

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

component: 用什么组件包含内部著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net元素，下文详细解释

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

<Navigate to={-1}>back</Navigate>
<Navigate to="some" params={{ title: 'Some' }} replace>some</Navigate>
<Navigate to="app:some/page1" open>app</Naviagate>

导航组件会有一个问题，就是当我们希望触发【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】的元素不同时，会有一些差异。例如：

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

<Navigate to="some">
  <Section><Text>Title</Text></Section>
  <Section><Text>content</Text></Section>
</Navigate>

此时，由于内部存在多个元素，所以 Nav【作者：唐霜】转载请注明出处：www.tangshuang.netigate 会自动添加一个 Sectio【作者：唐霜】【原创不易，请尊重版权】n 作为包裹。如果像前面的代码一样，内部著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。是直接的文字，那么它会选择用 Text 【本文首发于唐霜的博客】原创内容，盗版必究。进行包裹。而如果里面只有一个元素，则它不【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。自己创建包裹，而是直接将触发事件绑定到该【未经授权禁止转载】【版权所有，侵权必究】元素上。

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】

你可以通过传入 component 属性【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。来控制使用什么元素进行添加包裹。例如：

<Navigate to="some" component={Button}>some</Navigate>

则会用一个 Button 包裹文本。只要转载请注明出处：www.tangshuang.net【作者：唐霜】你传入了 component，那么内部元【转载请注明来源】著作权归作者所有，禁止商业用途转载。素就会被作为子元素包裹在该组件内。传入未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】component 时，支持传入 pro【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netps 属性，用于向 component 本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。传入属性。

原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

Storage

Nautil 内置了一个 Storage【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】对象，用于提供持久化存储。由于 Nau【未经授权禁止转载】未经授权，禁止复制转载。til 的一个目标是实现跨平台开发，但是【版权所有】唐霜 www.tangshuang.net【转载请注明来源】在不同平台上，所提供的持久化存储工具并不【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】相同，因此，我们通过内置的 Storag【版权所有】唐霜 www.tangshuang.net【作者：唐霜】e 抹平这些差异，让开发者在自己的代码中转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。无需去适配不同平台。

【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

Web: localStorage

【作者：唐霜】

原创内容，盗版必究。

react-native: Ansync【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netStorage

原创内容，盗版必究。

【原创内容，转载请注明出处】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

小程序: 小程序提供的 getStora原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ge 等接口

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

import { Storage } from 'nautil'

async function init() {
  const data = await Storage.getItem('key')
  await Storage.setItem('key', 2)
  await Storage.removeItem('key')
}

该对象仅提供上述 3 个接口使用。

【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

多语言国际化

在我多年的项目经验中发现，所有的中文项目【版权所有，侵权必究】原创内容，盗版必究。，但凡运营超过 2 年，一定会有多语言国未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。际化需求。但是由于早期开发的时候抱着“到【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。时候再说”的心态，导致真正要开始实施的时【本文受版权保护】转载请注明出处：www.tangshuang.net候，改动极其大，完全不知道该如何下手，甚原创内容，盗版必究。未经授权，禁止复制转载。至带来整个前端代码结构的变化。而实际上，【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】在一个项目中加入国际化功能其实比较容易，【转载请注明来源】转载请注明出处：www.tangshuang.net只是在一开始设计上，就要尊从一些写法规则【原创内容，转载请注明出处】【本文首发于唐霜的博客】。“到时候再说”的心态应该改改，应该在一转载请注明出处：www.tangshuang.net【作者：唐霜】开始的时候就加入国际化接口，按照多语言的本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net方式去实施，虽然实际产品上线的时候可能只【未经授权禁止转载】未经授权，禁止复制转载。会有一门语言，但是，后期要上线其他语言的未经授权，禁止复制转载。【原创不易，请尊重版权】时候，便利程度难以用言语表达。

import { I18n, Language, T, Locale } from 'nautil/i18n'

I18n

通过 I18n 我们可以得到一个多语言控转载请注明出处：www.tangshuang.net【本文受版权保护】制器示例。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

const i18n = new I18n(config)

其中，config 完全遵循 i18ne本文作者：唐霜，转载请注明出处。原创内容，盗版必究。xt 的配置。但是 i18n 的接口经过处理，比 i未经授权，禁止复制转载。【未经授权禁止转载】18next 更好用：

getLang(): 获取当前语言

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

著作权归作者所有，禁止商业用途转载。

setLang(lang): 切换语言到【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】另外一个语言

本文版权归作者所有，未经授权不得转载。

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

【原创内容，转载请注明出处】

【关注微信公众号：wwwtangshuangnet】

off(event, callback)【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。: 解绑事件

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

has(key, params): i1著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。8next.exists

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

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

【原创不易，请尊重版权】

【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。

number(num, options)【作者：唐霜】【作者：唐霜】: 本地化数字 Intl.NumberF【本文受版权保护】原创内容，盗版必究。ormat

【转载请注明来源】

转载请注明出处：www.tangshuang.net

【转载请注明来源】

原创内容，盗版必究。

currency(num, curren【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。cy, options): 本地化货币【转载请注明来源】本文作者：唐霜，转载请注明出处。Intl.NumberFormat

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】未经授权，禁止复制转载。【转载请注明来源】

Language

和 Navigator 的功能差不多，当未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net一个应用需要对某个区域实行多语言时，需要【未经授权禁止转载】【本文受版权保护】通过 Language 组件将其包起来。

<Language i18n={i18n} dispatch={this.update}>
  <SomeComponent />
</Language>

只有这样，当语言发生切换的时候，内部的所未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。有本地化处理，才会更新。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

另外，Language 和 Naviga【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。tor 一样，也会对其内部的 T, Lo转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netcale 组件自动污染 i18n 属性，【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】因此，其内部的 T, Locale 组件本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】不需要传 i18n. 但是还是那句老话，本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。为了组件的复用性，建议仍然传入 i18n【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】属性。

T

该组件用于翻译和显示语言文本。

本文版权归作者所有，未经授权不得转载。【作者：唐霜】未经授权，禁止复制转载。未经授权，禁止复制转载。

<T i18n={i18n} t="myHome">my home</T>

属性

可接受的属性包含：

【原创内容，转载请注明出处】

【本文受版权保护】

t: 用于指定翻译的 key，或是一个函【本文受版权保护】原创内容，盗版必究。数

原创内容，盗版必究。

【转载请注明来源】

原创内容，盗版必究。

渲染

T 组件的渲染按照如下顺序逻辑进行渲染：

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

存在 t 属性，是一个函数，那么接收 i【原创不易，请尊重版权】【原创内容，转载请注明出处】18n 实例，返回结果将作为输出结果

【本文受版权保护】

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

存在 t 属性，是一个字符串，判断 s:著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。t 是否可以被翻译，可以被翻译的情况下，本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】将翻译结果输出

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

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

【转载请注明来源】

【本文受版权保护】

children 为文本，判断 s:ch【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】ildren 是否可以被翻译，可以被翻译本文版权归作者所有，未经授权不得转载。【作者：唐霜】的情况下，输出

【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。

children 不能被翻译的情况下，直【未经授权禁止转载】原创内容，盗版必究。接输出 children

【作者：唐霜】

转载请注明出处：www.tangshuang.net

<T t={i18n => i18n.t('my_home')} />
<T t="my_home" s="worker" /> ## i18n.t('worker:my_home')
<T>{i18n => i18n.t('my_home')}</T>
<T>My Home</T>

Locale

该组件用于创建一个可切换语言的区域。

<Locale i18n={i18n} to="zh-CN"><Button>切换至中文</Button></Locale>

它的渲染规则和 Navigate 非常像【原创不易，请尊重版权】【作者：唐霜】。

原创内容，盗版必究。未经授权，禁止复制转载。

内置逻辑组件

在前文我们已经指出 Nautil 包含了【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】 4 类内置组件。本章主要讲解其中的“逻原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】辑组件”。逻辑组件的主要作用是进行逻辑控转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。制，根据不同的条件来决定是否渲染或如何渲本文作者：唐霜，转载请注明出处。【未经授权禁止转载】染其内部子组件。

【本文受版权保护】【本文受版权保护】

条件逻辑组件

通过条件判断来决定组件的显示与隐藏。

If/ElseIf/Else

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

import { If, ElseIf, Else } from 'nautil/components'

<If is={boolean} render={() => 
  <Section><Text>if</Text></Section>
}>
  <ElseIf is={boolean} render={() =>
    <Section><Text>else if</Text></Section>
  } />
  <Else render={() => 
    <Section><Text>else</Text></Section>
  } />
</If>

通过上述演示代码，你可以很好的了解这三个本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。组件具体怎么使用了吧。

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

内部支持函数，以方便在某些情况下不应该对本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。组件实例化时进行处理。

【原创不易，请尊重版权】【本文受版权保护】

<If is={bool}>
  {() => <Text>should not init when loaded</Text}
</If>

Swich/Case

也是用于条件控制的组件。

【原创不易，请尊重版权】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

<Switch of={value}>
  <Case is={target} render={() => 
    <Text>target</Text>
  } />
  <Case defualt render={() =>
    <Text>default</Text>
  } />
</Switch>

Case 内部支持函数，用以避免组件实例【作者：唐霜】【转载请注明来源】化时，被立即执行。

Show

和 If 不同，Show 会立即渲染其内原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】部自组件，但会通过 is 控制其显示或隐【本文受版权保护】著作权归作者所有，禁止商业用途转载。藏。

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

<Show is={bool}>
  <Text>show me</Text>
</Show>

本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

循环遍历组件

下面的组件帮助你实现循环和遍历。

【转载请注明来源】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。

For

一个数字循环迭代组件。

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

<For start={0} end={10} step={1} render={i => 
  <Text>{i}</Text>
} />

它也支持内部是一个普通元素，而非函数，这【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。样就可以重复显示该内部子元素。

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

Each

一个对象遍历迭代组件。

【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

<Each of={data} render={(value, key) => 
  <Text>{key}: {value}</Text>
} />

of 中可以传入对象或数组。

渲染控制组件

下面将介绍用于渲染控制的组件。

Fragment

空内容组件。一般用于占位置。由于 rea原创内容，盗版必究。原创内容，盗版必究。ct 里面不能一次返回多个组件（reac【本文受版权保护】【关注微信公众号：wwwtangshuangnet】t 升级之后可放在一个数组中），因此，可转载请注明出处：www.tangshuang.net原创内容，盗版必究。以通过 Fragment 组件将这些组件原创内容，盗版必究。本文作者：唐霜，转载请注明出处。包起来，达到返回一组平行的组件的目的。

【原创内容，转载请注明出处】未经授权，禁止复制转载。

Static

静态渲染组件。内部必须是一个函数。接收原创内容，盗版必究。【原创不易，请尊重版权】shouldUpdate 属性。

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】

<Static shouldUpdate={bool} render={() => 
  <Text>{Date.now()}</Text>
} />

只有当 shouldUpdate 为 t著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。rue 时，内部才会被更新，否则永远都不【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。会被更新。在一些特定场景下的交互非常有用转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net。

Prepare

著作权归作者所有，禁止商业用途转载。【本文受版权保护】

<Prepare isReady={bool} loading={<Text>loading</Text>} render={() => 
  <Text>loaded</Text>
} />

它的内部支持函数和普通组件，但是函数仅在【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。 isReady 为 true 的情况下【本文首发于唐霜的博客】原创内容，盗版必究。才执行，有助于我们拿到数据后进行渲染。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net

Observer

用于监听变动的组件，该组件是 Nauti【本文受版权保护】【原创不易，请尊重版权】l 中非常重要且核心的组件，因为它是实现【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。 Nautil 中观察者模式的最主要助手【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】。它需要三个属性：

转载请注明出处：www.tangshuang.net【本文受版权保护】【原创内容，转载请注明出处】未经授权，禁止复制转载。

subscribe: 订阅变化

本文版权归作者所有，未经授权不得转载。

unsubscribe: 解除订阅

【未经授权禁止转载】

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

dispatch: 分发

转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

<Observer
  subscribe={dispatch => store.watch('*', dispatch)}
  unsubscribe={dispatch => store.unwatch('*', dispatch)}
  dispatch={this.update}
>
  <Text>{store.get('some')}</Text>
</Observer>

上面这个代码，演示了如何观察 store著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。变化，并且更新视图渲染的过程。

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】

指令

和 vue 中指令的概念不同。Nauti【作者：唐霜】【关注微信公众号：wwwtangshuangnet】l 中的指令是用于修改 Componen【本文首发于唐霜的博客】未经授权，禁止复制转载。t 默认行为方式的函数生成器。

【作者：唐霜】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

import { inject, observe, pollute, connect, pipe } from 'nautil/operators'

observe

用于简化 Observer 操作的一个指【本文首发于唐霜的博客】原创内容，盗版必究。令。它接收两个参数：subscribe 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。和 unsubscribe。

【转载请注明来源】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

用法一：两个函数

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】

const observeByStore = observer(
  dispatch => store.watch('*', dispatch), 
  dispatch => store.unwatch('*', dispatch)
)
const ObservedComponent = observeByStore(Component)

通过这种方式，你就不需要再在组件内写 O【作者：唐霜】原创内容，盗版必究。bserver 操作了。

【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。原创内容，盗版必究。

用法二：store/model

【原创内容，转载请注明出处】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

const observeByStore = observe(store)

这个时候，第二个参数可接收一个字符串，用本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。于表示具体监听 store/model 【转载请注明来源】【本文首发于唐霜的博客】上的哪一个属性。

本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】【本文首发于唐霜的博客】

observe(store, 'age') // 监听 store 上的 age 属性

这样可以减小监听范围，但是，如果要监听多转载请注明出处：www.tangshuang.net【本文受版权保护】个属性，就必须写多个 observe 指本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net令语句。

原创内容，盗版必究。【本文受版权保护】

用法三：prop

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【转载请注明来源】

const observeByStore = observe('store')

而在这种情况下，也可以和用法二一样，传入本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net第二个参数为字符串，表示具体监听某个属性【转载请注明来源】【转载请注明来源】，例如：

【转载请注明来源】【未经授权禁止转载】【本文受版权保护】【本文首发于唐霜的博客】

observe('store', 'age')

传入字符串的形式不推荐，一般只和其他指令【未经授权禁止转载】转载请注明出处：www.tangshuang.net一起使用的时候才这样使用，例如：

const wrap = pipe([
  initialize('model', Model),
  observe('model'), // 在已知 model 属性为 Model 实例的情况下使用，其他情况下不要使用
])

inject

像组件 props 中注入新的属性。

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【本文受版权保护】

const injectState = inject('state', store.state)
const InjectedComponent = injectState(Component)

这样，组件将自动带上 state={st本文作者：唐霜，转载请注明出处。【转载请注明来源】ore.state} 这个属性。

【作者：唐霜】未经授权，禁止复制转载。

inject 第二个参数支持函数，该函数转载请注明出处：www.tangshuang.net【转载请注明来源】接收组件本身的 props，你可以在该函转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】数中决定新增的 prop 值。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

pollute

污染组件内指定内嵌组件的 default【转载请注明来源】著作权归作者所有，禁止商业用途转载。Props。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

const polluteWithI18n = pollute(T, { i18n }) // 内部的所有 T 组件都会 defaultProps.i18n = i18n

【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【本文首发于唐霜的博客】

initialize

实例化一个类，并将该类作为对应的 pro本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。p 传递给被包裹的组件。

【作者：唐霜】【作者：唐霜】

const wrap = initialize('some', Some, ...args) // Some 是一个 js 类，在内部，它会被实例化。第 3 个参数开始，会作为实例化时的默认参数传入
// 被包裹的组件将会有一个名字为 some 的 prop

之所以提供一个 initialize 指【未经授权禁止转载】【原创不易，请尊重版权】令，是为了在某些情况下，我们希望只在组件【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net实例化的时候同时实例化这个类，得到一个在【本文受版权保护】【作者：唐霜】组件内可用的实例，而非一个外部传入的公用【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net的实例。

比如说，我们希望组件在自己的生命周期里使【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。用一个独立的 store，我们可以这样子【原创不易，请尊重版权】原创内容，盗版必究。：

【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

const defaultData = { ... }
export default pipe([
  initialize('store', Store, defaultData),
  observe('store'),
])(SomeComponent)

class SomeComponent extends Component {
  static props = {
    store: Store,
  }
}

pipe

对组件的包裹可能会一次性进行多指令操作。【未经授权禁止转载】未经授权，禁止复制转载。比如我们既想观察 store，又想将 s【原创不易，请尊重版权】【本文首发于唐霜的博客】tore.state 注入到组件中，这时【本文受版权保护】转载请注明出处：www.tangshuang.net我们不可能在函数外在包一层函数。pipe【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net 指令用于解决这种问题。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。

const WrapperedComponent = pipe([
  observe(store),
  inject('state', store.state),
])(Component)

注意，pipe 的参数是一个数组。

MVC

前文一直都是在阐述有关视图层编程的东西，【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。都是在丰富 react 开发的范式。而本未经授权，禁止复制转载。【转载请注明来源】章将带领你进入应用开发更高一层的设计，即原创内容，盗版必究。【原创内容，转载请注明出处】以 MVC 的“设计模式”实现应用开发。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】虽然 MVC 不算是一种设计模式，但是它著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。却深远影响了现代应用开发的架构设计。用【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】Nautil 开发应用，你可以根据自己的【本文受版权保护】著作权归作者所有，禁止商业用途转载。实际场景，渐进式地遵循 MVC。当你只是未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。完成简单的 UI 开发时，你只会用到 C本文作者：唐霜，转载请注明出处。【作者：唐霜】omponent。但是当你需要灵活的处理转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。用户输入与操作交互时，你就需要引入 Co【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。ntroller 来整合 Compone【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。nt 和状态管理、事件管理等。而当你需要【转载请注明来源】【版权所有】唐霜 www.tangshuang.net对业务对象进行更好的数据控制时，你就需要【转载请注明来源】本文作者：唐霜，转载请注明出处。再引入 Model，用以创建领域模型，以【版权所有，侵权必究】未经授权，禁止复制转载。理清楚业务实体与应用系统的联系。最后，如原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net果你需要从应用整体层面处理好数据流或业务【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。流，你就会借助 Service 来处理系未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】统层面的控制。

【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【本文受版权保护】原创内容，盗版必究。

Controller

后端框架中 Controller 往往是【版权所有】唐霜 www.tangshuang.net【作者：唐霜】用户输入的入口，编写一个业务模块可以没有原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。模型和视图，但是必须先编写它的 Cont本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】roller 来处理用户输入。和后端应用转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。的 Controller 不同，前端领域本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。的 View 才是必不可少的，一个业务模【转载请注明来源】原创内容，盗版必究。块，可以没有用户输入，但是绝对不能没有用本文作者：唐霜，转载请注明出处。【未经授权禁止转载】来展示的界面。所以，在前端中，Contr著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】oller 的地位要低于 View。那么【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】，在前端中，Controller 到底控【版权所有，侵权必究】转载请注明出处：www.tangshuang.net制什么呢？在 Nautil 中，Cont原创内容，盗版必究。【本文首发于唐霜的博客】roller 是用于控制一个业务在处理用【转载请注明来源】【版权所有，侵权必究】户输入时的枢纽。它上承模型、服务，下接视【版权所有，侵权必究】【原创内容，转载请注明出处】图、状态管理。在简单的业务模块编写时，我原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】们可能用不上 Controller，只需【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】要借助 Component 及状态管理即【本文受版权保护】【本文受版权保护】可完成。但是当遇到复杂（并非代码量多，而【本文首发于唐霜的博客】【本文受版权保护】是指需要合理组织代码才能清晰的表达每一个【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。需求点）业务时，将复杂的业务逻辑杂糅在本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。View 层代码中，就导致该业务的代码混著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net杂一片，视图和逻辑相互交织，难以在长期的著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】维护中清晰的展示一个业务点是怎么工作的。【原创不易，请尊重版权】原创内容，盗版必究。而一个 Controller 通过把该业【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。务点所涉及的模型、服务、视图放在一起，经【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。过拆分组合，有效的组织起该业务的代码管理本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】原创内容，盗版必究。

在 Nautil 中，我们定义一个 Co本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netntroller，它将拥有一些特殊的能力【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】，基于这些能力，我们可以在 Contro本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】ller 中比较好的处理用户的输入/交互【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】所带来的数据影响，同时，又响应数据的变化【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】更新视图界面。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net

import { Controller } from 'nautil'

class CarController extends Controller {
  // CarModel 是一个关于 car 的领域模型，当 CarController 进行实例化时，会自动实例化 CarModel，你可以通过 this.car 读取该模型实例。
  // 当模型数据发生变化时，Controller 会自动更新自己所管理的视图
  static car = CarModel 
  
  // Controller 中通过  Rxjs 来管理事件流，通过 static sell$ 来提前定义一个名为 sell 的事件流，之后你可以使用 this.sell$ 来读取这个流
  static sell$(stream) {
    ...
  }

  // 和 CarModel 一样，Store 也会自动实例化，通过 this.store 来读取，并且在其 state 发生变化时，Controller 会自动更新自己所管理的视图
  static store = Store
 
  // Controller 会在实例化时，获取服务的单例，该单例是一个全局单例，可在任何 Controller 之间共享
  static service = CarService

  // 以大写开头的方法将被视为 Controller 管理的一个组件，该组件内部可以读取 Controller 实例上的属性和方法，并且在模型或 Store 变化时自动更新界面
  CarBasicInfo(props) {
    const { car } = this // 读取了模型实例
    return (
      <>
        <span>型号: {car.type}</span>
        <span>价格：{car.price}</span>
      </>
    )
  }

  // Controller 上的一个普通方法
  loadCarData(carId) {
    this.service.getCarDetail(carId).then(data => this.car.fromJSON(data))
  }
}

一个 Controller 自身其实并不【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】完成各种逻辑的决定，它更多的是调用自己控本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】制着的模型、服务等其他实体的方法，完成数著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。据和视图的调配。有关业务实体的逻辑，放在著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net Model 中定义，并以方法的形式暴露【转载请注明来源】【本文受版权保护】出来给 Controller 用。有关业【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】务流的逻辑，放在 Serivce 中定义【本文首发于唐霜的博客】【原创内容，转载请注明出处】，也是暴露方法给 Controller 【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。用。Controller 的方法，是对其【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】他实体的方法在具体语境下的一个二次封装，著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。从而达到上下游数据流转的通顺。

我们来看一个例子：

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

import { React, Controller, Component, Store, Section, Input, Text } from 'nautil'

class MyController extends Controller {
  // Controller will initialize this.store of Store, and subscribe the changes to trigger rerendering
  static store = Store

  // Controller will initialize this.price$ of Stream (Rxjs Subject)
  // the initialized stream is passed into the function to be subscribed
  static price$(stream) {
    stream.pipe(e => +e.target.value)
      .pipe((price) => {
        const { count } = this.store.getState()
        return { count, price }
      })
      // a Rxjs Subject can be used as an observer
      .subscribe(this.total$)
  }
  static count$(stream) {
    stream.pipe(e => +e.target.value)
      .pipe((count) => {
        const { price } = this.store.getState()
        return { count, price }
      })
      .subscribe(this.total$)
  }
  static total$(stream) {
    stream.subscribe(({ count, price }) => {
      const total = price * count
      this.store.setState({ price, count, total })
    })
  }

  // a method whose name begins with uppercase will be treated as a component
  InputPrice() {
    const { price } = this.store.getState()
    return (
      <Section>
        <Text>Price:</Text>
        <Input value={price} onChange={this.price$} />
      </Section>
    )
  }

  InputCount() {
    const { count } = this.store.getState()
    return (
      <Section>
        <Text>Count:</Text>
        <Input value={count} onChange={this.count$} />
      </Section>
    )
  }

  ShowTotal() {
    const { total } = this.store.getState()
    return (
      <Section>
        <Text>Total: {total}</Text>
      </Section>
    )
  }
}

class MyComponent extends Component {
  controller = new MyController()

  render() {
    // components defined by controller can be destructed
    const { InputPrice, InputCount, ShowTotal } = this.controller

    return (
      <Section className="foo">
        <InputPrice className="price" />
        <InputCount className="count" />
        <ShowTotal className="total" />
      </Section>
    )
  }
}

在这段代码中，整个业务模块的入口，是 M【作者：唐霜】未经授权，禁止复制转载。yComponent 这个组件，它是视图本文作者：唐霜，转载请注明出处。【本文受版权保护】层的东西，因此，我说前端领域和后端完全不著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】同，视图才是入口。但你可以发现，在入口组【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net件中，内容非常少，它只是从 this.c【版权所有，侵权必究】未经授权，禁止复制转载。ontroller 上读取预定义好的组件未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，并进行布局安排（布局，样式等处理）。而【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】在 MyController 中，我定义【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】了这些被用到的组件，但是，这些组件，完全本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】不考虑布局/样式，而只考虑了用户输入和业转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net务展示（交互层面）。也就是说，我们在组织著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。一个业务模块的代码的时候，我们可以抛开界本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net面的布局和样式，从需求文档的业务交互层面转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】进行代码管理。

而再来看 MyController，它虽【未经授权禁止转载】【原创内容，转载请注明出处】然把各种交互逻辑拆分成比较小的碎片，但是【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。，一个完整的 Controller，可以原创内容，盗版必究。转载请注明出处：www.tangshuang.net完整描述这一个业务模块所拥有的几乎全部交转载请注明出处：www.tangshuang.net原创内容，盗版必究。互逻辑。Controller 自己做到了著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】自洽，再没有 MyComponent 作转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】为入口时，它虽然不工作，但是同样为我们描未经授权，禁止复制转载。未经授权，禁止复制转载。述了有关该业务模块的所有逻辑。这为我们撰【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。写跨端的业务逻辑提供了可能，以前，我们把转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net业务逻辑写在组件或状态管理中，当我们同一本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】个业务既有 PC 端又有移动端时，我们很本文作者：唐霜，转载请注明出处。【作者：唐霜】难从代码中分离出可以复用的部分（或者可以【作者：唐霜】【未经授权禁止转载】分离，但是代码组织很麻烦）。而在 MVC【转载请注明来源】未经授权，禁止复制转载。驱动下，这种分离或复用变得很自然，因为著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net Controller 自管理了一个业务【作者：唐霜】著作权归作者所有，禁止商业用途转载。模块的所有（模型、服务、状态、交互），所【本文首发于唐霜的博客】【版权所有，侵权必究】以，到不同端，就是用不同端的视图组件去进转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】行布局和处理即可。这就是 Nautil 【版权所有，侵权必究】未经授权，禁止复制转载。中有关 Controller 的思想，有【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。关 MVC 的具体实践之一。

【原创不易，请尊重版权】原创内容，盗版必究。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

结语

本文详细的讲解了如何使用 Nautil。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net虽然在某些细节上尚未做到细致，我会在今后【原创不易，请尊重版权】原创内容，盗版必究。慢慢弥补这些未完成的细节。Nautil 【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。是立足解决 react 开发痛点的新框架著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。。它和 react 做到兼容，从而避免开【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net发者以前写过的 react 应用完全不可【版权所有，侵权必究】【本文首发于唐霜的博客】用。这一点我认为是非常重要的。在我的开发【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】理念中，“简单好用”永远是我认为最重要的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】一条原则。如果不简单不好用，即使这门技术【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net非常强大，仍然无法吸引我的眼球。

在开发者使用 Nautil 的过程中，一本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】定要时刻记住，观察者模式贯穿始终。如果有【转载请注明来源】【关注微信公众号：wwwtangshuangnet】兴趣更多的去研究 rxjs，你可能会惊喜【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】的发现，原来 nautil 是如此的先进【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。和了不起。它融合了所有 react 生态【关注微信公众号：wwwtangshuangnet】【作者：唐霜】中的非主流，非 redux，非单向数据流转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】，非 immutable，非 react【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。-router，甚至，我们提供了新的表单著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。模型（这一块我们还在想办法解决表单模型和【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】视图如何更统一的尝试）而放弃了所谓业界流【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net行的几大表单库。

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。

另外，我们的一个重要目标，是建立跨平台的【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】前端开发框架。真正做到在代码层面实现一处【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】撰写，多平台运行的目标。但是本质上，我们未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】没有改变 react 开发的有趣性，我们本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。在它的基础上进行了扩展。如果你认为其中一【未经授权禁止转载】未经授权，禁止复制转载。部分好，另一部分不好，你可以尝试不使用其【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net中的某些部分，而只是用其中的一部分。现在本文作者：唐霜，转载请注明出处。【本文受版权保护】的构建工具已经足够丰富，可以帮我们把那些【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】不需要的部分从最终的代码中删除而不影响应【关注微信公众号：wwwtangshuangnet】【转载请注明来源】用的运行。

我还在继续开发 nautil 的细节功能【转载请注明来源】本文作者：唐霜，转载请注明出处。，本文中的思想、原则部分不会在发生变化，【未经授权禁止转载】【未经授权禁止转载】但具体的一些细节（例如某些组件的用法）还著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。可能会有调整。如果你对这个项目感兴趣，加入我们吧。

【本文受版权保护】【作者：唐霜】未经授权，禁止复制转载。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【作者：唐霜】【原创内容，转载请注明出处】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【本文受版权保护】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【作者：唐霜】转载请注明出处：www.tangshuang.net

唐霜

Nautil 开发文档

前言

安装

兼容性

当前版本

NPM

起步

你是怎样的开发者？

适用场景

为什么选择 Nautil？

观察者模式

Store 和 State

响应式

双向绑定

跨平台开发

JSX 渲染语法

生命周期函数

内置组件

跨平台构建

组件

Props 声明和检查

props 声明

props 校验

削减代码

Attrs 属性

Attrs 值

双向绑定

stylesheet

chidlren

on:streams

update

生命周期

Render

状态管理

Store

结合组件使用

局部状态共享

导航/路由

Navigation

配置

state 和 status

监听导航变化

事件

is

Navigator

配置式渲染

函数式渲染

元素式渲染

自动污染

Route

参数

组件式渲染

函数式渲染

元素式渲染

配置式渲染

动画

可移植性

Navigate

Storage

多语言国际化

I18n

Language

T

属性

渲染

Locale

内置逻辑组件

条件逻辑组件

If/ElseIf/Else

Swich/Case

Show

循环遍历组件

For

Each

渲染控制组件

Fragment

Static

Prepare

Observer