# mobx-miniprogram
可用于小程序的 MobX 构建版本。基于 MobX 4 (因为 iOS 9 不支持 MobX 5 )。
`npm install mobx-miniprogram --save`
以下是 MobX 原本的 README 。
<img src="docs/mobx.png" alt="logo" height="120" align="right" />
# MobX
_Simple, scalable state management_
[![CircleCI](https://circleci.com/gh/mobxjs/mobx/tree/mobx4-master.svg?style=svg)](https://circleci.com/gh/mobxjs/mobx/tree/mobx4-master)
[![Coverage Status](https://coveralls.io/repos/mobxjs/mobx/badge.svg?branch=master&service=github)](https://coveralls.io/github/mobxjs/mobx?branch=master)
[![Join the chat at https://gitter.im/mobxjs/mobx](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mobxjs/mobx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![Discuss MobX on Hashnode](https://hashnode.github.io/badges/mobx.svg)](https://hashnode.com/n/mobx)
[![OpenCollective](https://opencollective.com/mobx/backers/badge.svg)](#backers)
[![OpenCollective](https://opencollective.com/mobx/sponsors/badge.svg)](#sponsors)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
MobX is proudly sponsored by Mendix, Coinbase, Facebook Open Source and many [individual sponsors](#backers)
<img src="docs/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /> <img src="docs/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /> <img src="docs/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" />
# Installation
* Installation: `npm install mobx --save`. React bindings: `npm install mobx-react --save`. To enable ESNext decorators (optional), see below.
* CDN:
- https://unpkg.com/mobx/lib/mobx.umd.js
- https://cdnjs.com/libraries/mobx
## Translations
* [中文](http://cn.mobx.js.org)
## Getting started
* <i><a style="color: white; background:green;padding:5px;margin:5px;border-radius:2px" href="https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx">Egghead.io course</a></i>
* [Ten minute, interactive MobX + React tutorial](https://mobxjs.github.io/mobx/getting-started.html)
* [Official MobX 4 documentation and API overview](https://mobxjs.github.io/mobx/refguide/api.html) ([MobX 3](https://github.com/mobxjs/mobx/blob/54557dc319b04e92e31cb87427bef194ec1c549c/docs/refguide/api.md), [MobX 2](https://github.com/mobxjs/mobx/blob/7c9e7c86e0c6ead141bb0539d33143d0e1f576dd/docs/refguide/api.md))
* Videos:
* [ReactNext 2016: Real World MobX](https://www.youtube.com/watch?v=Aws40KOx90U) - 40m [slides](https://docs.google.com/presentation/d/1DrI6Hc2xIPTLBkfNH8YczOcPXQTOaCIcDESdyVfG_bE/edit?usp=sharing)
* [Practical React with MobX](https://www.youtube.com/watch?v=XGwuM_u7UeQ). In depth introduction and explanation to MobX and React by Matt Ruby on OpenSourceNorth (ES5 only) - 42m.
* LearnCode.academy MobX tutorial [Part I: MobX + React is AWESOME (7m)](https://www.youtube.com/watch?v=_q50BXqkAfI) [Part II: Computed Values and Nested/Referenced Observables (12m.)](https://www.youtube.com/watch?v=nYvNqKrl69s)
* [Screencast: intro to MobX](https://www.youtube.com/watch?v=K8dr8BMU7-8) - 8m
* [Talk: State Management Is Easy, React Amsterdam 2016 conf](https://www.youtube.com/watch?v=ApmSsu3qnf0&feature=youtu.be) ([slides](https://speakerdeck.com/mweststrate/state-management-is-easy-introduction-to-mobx))
* [Boilerplates and related projects](http://mobxjs.github.io/mobx/faq/boilerplates.html)
* More tutorials, blogs, videos, and other helpful resources can be found on the [MobX awesome list](https://github.com/mobxjs/awesome-mobx#awesome-mobx)
## Introduction
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP).
The philosophy behind MobX is very simple:
_Anything that can be derived from the application state, should be derived. Automatically._
which includes the UI, data serialization, server communication, etc.
<img alt="MobX unidirectional flow" src="docs/flow.png" align="center" />
React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Both React and MobX provide optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale.
## Core concepts
MobX has only a few core concepts. The following snippets can be tried online using [codesandbox example](https://codesandbox.io/s/v3v0my2370).
### Observable state
<i><a style="color: white; background:green;padding:5px;margin:5px;border-radius:2px" href="https://egghead.io/lessons/javascript-sync-the-ui-with-the-app-state-using-mobx-observable-and-observer-in-react">Egghead.io lesson 1: observable & observer</a></i>
MobX adds observable capabilities to existing data structures like objects, arrays and class instances.
This can simply be done by annotating your class properties with the [@observable](http://mobxjs.github.io/mobx/refguide/observable-decorator.html) decorator (ES.Next).
```javascript
import { observable } from "mobx"
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}
```
Using `observable` is like turning a property of an object into a spreadsheet cell.
But unlike spreadsheets, these values can be not only primitive values, but also references, objects and arrays.
If your environment doesn't support decorator syntax, don't worry.
You can read [here](http://mobxjs.github.io/mobx/best/decorators.html) about how to set them up.
Or you can skip them altoghether, as MobX can be used fine without decorator _syntax_, by leveraging the _decorate_ utility.
Many MobX users do prefer the decorator syntax though, as it is slightly more concise.
```javascript
import { decorate, observable } from "mobx"
class Todo {
id = Math.random();
title = "";
finished = false;
}
decorate(Todo, {
title: observable,
finished: observable
})
```
### Computed values
<i><a style="color: white; background:green;padding:5px;margin:5px;border-radius:2px" href="https://egghead.io/lessons/javascript-derive-computed-values-and-manage-side-effects-with-mobx-reactions">Egghead.io lesson 3: computed values</a></i>
With MobX you can define values that will be derived automatically when relevant data is modified.
By using the [`@computed`](http://mobxjs.github.io/mobx/refguide/computed-decorator.html) decorator or by using getter / setter functions when using `(extend)Observable` (Of course, you can use `decorate` here again as alternative to the `@` syntax).
```javascript
class TodoList {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
```
MobX will ensure that `unfinishedTodoCount` is updated automatically when a todo is added or when one of the `finished` properties is modified.
Computations like these resemble formulas in spreadsheet programs like MS Excel. They update automatically and only when required.
### Reactions
<i><a style="color: white; background:green;padding:5px;margin:5px;border-radius:2px" href="https://egghead.io/lessons/react-write-custom-mobx-reactions-with-when-and-autorun">Egghead.io lesson 9: custom reactions</a></i>
Reactions are similar to a computed value, but instead of producing a new value, a reaction produces a side effect for things like printing to the console, making network requests, incrementally up
没有合适的资源?快使用搜索试试~ 我知道了~
自定义微信底部导航栏,示例代码
共92个文件
ts:46个
js:14个
json:12个
需积分: 20 20 下载量 149 浏览量
2022-07-27
09:33:40
上传
评论 1
收藏 136KB ZIP 举报
温馨提示
自定义微信小程序底部导航栏,自定义微信小程序动态底部导航栏,自定义 tabBar,微信小程序自定义 tabBar,自定义 tabBar
资源详情
资源评论
资源推荐
收起资源包目录
微信小程序自定义tabBar.zip (92个子文件)
demo
package.json 105B
image
icon_component_HL.png 688B
icon_API.png 1KB
icon_component.png 653B
icon_API_HL.png 1KB
custom-tab-bar
index.js 932B
index.json 23B
index.wxss 586B
index.wxml 504B
node_modules
mobx-miniprogram
package.json 4KB
LICENSE 1KB
CHANGELOG.md 70KB
lib
mobx.js.flow 15KB
core
atom.d.ts 2KB
reaction.d.ts 3KB
derivation.d.ts 3KB
action.d.ts 580B
computedvalue.d.ts 4KB
globalstate.d.ts 3KB
observable.d.ts 2KB
spy.d.ts 326B
internal.d.ts 1KB
api
extras.d.ts 357B
intercept.d.ts 1KB
become-observed.d.ts 741B
isobservable.d.ts 140B
decorate.d.ts 382B
object-api.d.ts 2KB
trace.d.ts 233B
tojs.d.ts 431B
extendobservable.d.ts 417B
observabledecorator.d.ts 307B
observe.d.ts 1KB
actiondecorator.d.ts 677B
configure.d.ts 353B
computed.d.ts 739B
action.d.ts 2KB
iscomputed.d.ts 213B
when.d.ts 398B
autorun.d.ts 973B
flow.d.ts 665B
transaction.d.ts 357B
intercept-read.d.ts 812B
observable.d.ts 3KB
types
observableobject.d.ts 2KB
listen-utils.d.ts 464B
observablevalue.d.ts 1KB
observablearray.d.ts 3KB
observableset.d.ts 2KB
modifiers.d.ts 384B
observablemap.d.ts 3KB
type-utils.d.ts 278B
intercept-utils.d.ts 553B
utils
iterable.d.ts 353B
comparer.d.ts 414B
decorators2.d.ts 525B
eq.d.ts 60B
utils.d.ts 2KB
mobx.d.ts 2KB
README.md 36KB
miniprogram_dist
index.js 67KB
.package-lock.json 754B
mobx-miniprogram-bindings
.babelrc 202B
package.json 2KB
gulpfile.js 1KB
LICENSE 1KB
src
index.js 5KB
.eslintrc.js 2KB
README.md 6KB
miniprogram_dist
index.js 9KB
index.js.map 5KB
app.json 487B
package-lock.json 1KB
.eslintrc.js 587B
pages
index
index.js 1KB
index.json 27B
index.wxss 264B
index.wxml 952B
logs
logs.js 305B
logs.json 77B
logs.wxml 197B
logs.wxss 106B
project.private.config.json 332B
common
store.js 784B
sitemap.json 191B
app.wxss 194B
app.js 364B
project.config.json 1KB
utils
util.js 460B
miniprogram_npm
mobx-miniprogram
index.js 67KB
mobx-miniprogram-bindings
index.js 9KB
index.js.map 5KB
共 92 条
- 1
EOPG
- 粉丝: 1w+
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0