微信小程序 仿网易云音乐 (源码).zip

# 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_ [](https://circleci.com/gh/mobxjs/mobx/tree/mobx4-master) [](https://coveralls.io/github/mobxjs/mobx?branch=master) [](https://gitter.im/mobxjs/mobx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://hashnode.com/n/mobx) [](#backers) [](#sponsors) [](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