[React源碼剖析系列 － 生命周期的管理藝術(shù)] (https://www.w3ctech.com/topic/1596)
MobX 相關(guān)
http://www.tuicool.com/articles/UZVZJnY
Redux 對(duì) action / event 作出反應(yīng)两蟀，而 MobX 對(duì) state 變化作出反應(yīng)萨惑。在更新邏輯方面，MobX 是在 store 內(nèi)進(jìn)行相應(yīng)封裝逃沿，假設(shè)一個(gè) UI 操作需要更新多個(gè) store 內(nèi)的值時(shí)透揣，那么我們需要多次觸發(fā)對(duì)應(yīng) action济炎，或者在多個(gè) store 上再添加一個(gè) store 去進(jìn)行控制，這都不如 Redux 來得優(yōu)雅辐真，Redux 只需要觸發(fā)一個(gè) action须尚，多個(gè) reducer 可響應(yīng)相同的 action type崖堤，即可完成更新。
首先耐床，讓我們來回顧一下mobx的核心概念：
可觀測(cè)狀態(tài)
狀態(tài)是指任何可以改變并且會(huì)引發(fā)計(jì)算屬性變化的值密幔。mobx可以把大多數(shù)類型的值(基礎(chǔ)類型、數(shù)組撩轰、各種對(duì)象)胯甩，都轉(zhuǎn)化成可觀測(cè)的。而且針對(duì)堪嫂，數(shù)組或?qū)ο蟮鹊慕Y(jié)構(gòu)化的數(shù)據(jù)類型偎箫，這種轉(zhuǎn)化是遞歸的，數(shù)組或?qū)ο蟮乃凶庸?jié)點(diǎn)都會(huì)被轉(zhuǎn)化皆串。
計(jì)算屬性
計(jì)算屬性是一個(gè)函數(shù)淹办。這個(gè)函數(shù)不接收參數(shù)，只單純的依賴的其他可觀測(cè)狀態(tài)恶复。依賴的可觀測(cè)狀態(tài)發(fā)生變化怜森，它的運(yùn)行結(jié)果才會(huì)發(fā)生變化。
雖然和定義有一定出入谤牡，但是從輸入輸出保持一致這點(diǎn)來看副硅，計(jì)算屬性應(yīng)該算是一種純函數(shù)。
很多場(chǎng)景都能用到計(jì)算屬性翅萤，比如字符串的連接恐疲，或者生成復(fù)雜結(jié)構(gòu)的對(duì)象。因?yàn)橛?jì)算屬性自身也是可觀測(cè)的断序，所以甚至可以使用它從可觀測(cè)狀態(tài)導(dǎo)出完整的用戶界面流纹。計(jì)算屬性還可以在惰性和活躍兩種狀態(tài)之間切換糜烹。
反應(yīng)
反應(yīng)和計(jì)算屬性有點(diǎn)類似违诗，不同點(diǎn)在于，計(jì)算屬性的函數(shù)是產(chǎn)生一個(gè)新的值疮蹦，而反應(yīng)是產(chǎn)生一個(gè)副作用诸迟。所謂副作用愕乎，就是指一些跟計(jì)算無關(guān)的動(dòng)作阵苇，比如打印日志，網(wǎng)絡(luò)請(qǐng)求感论，更新界面之類的绅项。總之使用反應(yīng)可以把數(shù)據(jù)變化和其他流程關(guān)聯(lián)起來比肄。
動(dòng)作
動(dòng)作是修改狀態(tài)的主要方法快耿。動(dòng)作本身并不對(duì)狀態(tài)更改做響應(yīng)囊陡，而是修改可觀測(cè)狀態(tài)。（如用戶觸發(fā)的事件掀亥、web-socket傳入消息撞反、或直接對(duì)可觀測(cè)狀態(tài)的修改）
這四個(gè)核心概念對(duì)應(yīng)mobx中最常用的4個(gè)api，observable搪花、computed遏片、reaction（autorun）、action撮竿。
React 單元測(cè)試
React+Redux單元測(cè)試一小時(shí)入門
要測(cè)試 ajax 請(qǐng)求吮便，可以用 sinon 的 fake XMLHttpRequest, 不用為了測(cè)試改動(dòng) action 任何代碼:
Unit testing react component that makes ajax calls using JEST
How to implement testing + code coverage on React with Karma, Babel, and Webpack
最近陸續(xù)用 Redux 做了一些 projects，想要把一些心得整理出來倚聚。
目前預(yù)計(jì)整理三篇：
Hello Redux: 關(guān)於 Redux 的一些基本介紹线衫，包括我認(rèn)知的 redux 的一些概念，和我覺得他設(shè)計(jì)得很棒的地方惑折。
Server Rendering: 介紹如何使用 Redux 和 react-router 做 server rendering (ya! 寫好惹授账！)
Unit Test: 在測(cè) Redux 的 code 的時(shí)候我遇到的問題和解決的方法，還有怎麼在測(cè)試的時(shí)候和 webpack loaders 和平共處惨驶。
這篇文章是這個(gè)系列的第三部份白热，Unit Test。
再看看Coverage粗卜，臥槽屋确。。居然不是百分之百了续扔。攻臀。。
原因很簡(jiǎn)單纱昧，webpack會(huì)加入一些代碼刨啸，影響了代碼的Coverage。如果我們引入了一些其它的庫(kù)识脆，比如jquery之類的设联，將源代碼和庫(kù)代碼打包在一起后，覆蓋率會(huì)更難看灼捂。离例。這樣的Coverage就沒有了參考的價(jià)值。
typescriptのunit test(webpack2, karma, jasmine, chai)
karma.conf.js
// Karma configuration
// Generated on Sat Jan 21 2017 10:54:02 GMT+0900 (JST)
const webpackConfig = require('./test.webpack.conf');
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine', 'karma-typescript'],
// list of files / patterns to load in the browser
files: [
'src/**/*.ts',
'test/unit/index.spec.ts',
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'test/unit/index.spec.ts': ['webpack', 'sourcemap'],
'src/**/*.ts': ['webpack', 'karma-typescript'],
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha', 'karma-typescript'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity,
// phantomjs configuration
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
exitOnResourceError: true
},
// webpack configuration
webpack: webpackConfig,
// webpack-dev-middleware configuration
webpackMiddleware: {
stats: 'errors-only'
},
coverageReporter: {
reporters: [
{ type: 'text-summary' },
]
},
})
}
