Todo-List
這是一個(gè)用來初步了解如何通過 React + Mobx 構(gòu)建應(yīng)用的 DEMO，通過 Webpack 進(jìn)行打包。
技術(shù)棧： React + Mobx + React-Mobx + SCSS。
由于剛接觸 React 不久，寫的不好或者有誤還請(qǐng)指出，萬分感謝。
Webpack
我對(duì) Webpack 了解的很少，甚至要我自己進(jìn)行配置也是非常大的困難，所以這里只進(jìn)行一些最基礎(chǔ)的概述。下面是一個(gè)最基本的 Webpack 配置文件：
module.exports = {
// 這里是 js 代碼的入口文件
// 程序從該文件開始打包
entry: './src/index.js',
// 出口，指出文件如何打包，以及打包后輸出到哪里
output: {
// 打包后的文件名為 bundle.js
// bundle.js 會(huì)輸出到當(dāng)前目錄的 src 路徑下
path: path.join(__dirname, './src'),
filename: './src/bundle.js',
},
// 插件，拓展 Webpack 的功能
// Plugins 都需要通過 npm 安裝
plugins: [
// 該文件會(huì)自動(dòng)引用打包生成的 bundle.js
new htmlWebpackPlugin({
template: './src/index.html'
}),
// Webpack 打包成功后會(huì)自動(dòng)幫你打開一個(gè)瀏覽器標(biāo)簽
new OpenBrowserPlugin({
url: 'http://localhost:3500'
}),
//
new webpack.DefinePlugin({
'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
}),
new ExtractTextPlugin({
filename: "[name].[contenthash].css",
disable: process.env.NODE_ENV === "development"
})
],
module: {
// module.loaders 用來連接加載器
loaders: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loaders: 'babel-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
loader: 'url-loader?limit=8192'
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
// 啟動(dòng)一個(gè)簡(jiǎn)單的 node 服務(wù)器
devServer: {
compress: true,
port: 3500
}
}
React
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 框架，也就是說 React 是一個(gè) UI 框架，他把重點(diǎn)放在了 MVC 中的 V(View) 層上。
聲明組件
React 可以通過 ES6 的 class 來聲明一個(gè)自定義組件，該組件繼承基類 React.Component 的所有屬性和方法。
class MyComponent extends React.Component {
render () {
return (
// jsx
)
}
}
這里有幾點(diǎn)要強(qiáng)調(diào)的地方：
- 1.原生 HTML 標(biāo)簽以小寫開頭，自定義 React 組件的首字母要大寫。
- 2.JSX 語法很類似 XML，它不是必須的，但我覺得用它來編程很方便。
- 3.組件內(nèi)的 render 函數(shù)是必須的，它返回一顆組件樹，最終會(huì)被渲染成 HTML。
掛載虛擬 DOM
實(shí)例化根組件，啟動(dòng)框架，將虛擬的 DOM 節(jié)點(diǎn)掛載到真實(shí)的 DOM 節(jié)點(diǎn)。
ReactDOM.render(jsx, DOM)
React 組件的狀態(tài)
class MyComponent extends React.Component {
constructor (...arg) {
super(...arg)
// 定義組件的初始狀態(tài)
this.state = {
//...
name: 'Couzin'
}
}
handlerClick () {
// 調(diào)用后觸發(fā)重新渲染
this.setState = {
name: 'HUnter'
}
}
render () {
return (
<div>
<button
onClick="this.handlerClick.bind(this)
>click</button>
</div>
)
}
}
state 是組件私有的，可以通過 setState 來修改 state，并且觸發(fā) View 的重新渲染。
傳遞 props
當(dāng)一個(gè)組件依賴父組件中的數(shù)據(jù)時(shí)，就需要用 props 來傳遞數(shù)據(jù)了。
class Father extends React.Component {
render () {
return (
<div>
{/* ... */}
<Child author="HUnter" />
</div>
)
}
}
class Child extends React.Component {
render () {
return (
<div>
<p>{this.props.author}</p>
</div>
)
}
}
子組件中通過 this.props 就可以拿到 props 上的數(shù)據(jù)了，實(shí)現(xiàn)了從 父組件 ------> 子組件的數(shù)據(jù)傳遞。
另外再提及一下 this.props.children：
class Father extends React.Component {
render () {
return (
<div>
{/* ... */}
<Child author="HUnter">
<h1>hello world</h1>
</Child>
</div>
)
}
}
class Child extends React.Component {
render () {
return (
<div>
<p>{this.props.author}</p>
{this.props.children}
{/* 相當(dāng)于<h1>hello world</h1> */}
</div>
)
}
}
也就是說 this.props.children 就是組件內(nèi)嵌套的元素。
了解了上面的這些使用方法，差不多就可以開始簡(jiǎn)單的使用 React 了。
Mobx
Mobx 是一個(gè)狀態(tài)管理工具，它可以把你的應(yīng)用變?yōu)轫憫?yīng)式。
Mobx 提供狀態(tài)給 React 使用，下面有一些概念
observable state （可觀察狀態(tài)）
Mobx 為現(xiàn)有數(shù)據(jù)結(jié)構(gòu)添加了可觀察的功能，只需要通過 @observable 這個(gè)裝飾器就可以使你的屬性變?yōu)榭捎^察的。
class MyStore {
@observable myName = 'hunter'
}
derivation （衍生）
任何源自 state 并且不會(huì)再有進(jìn)一步相互作用的東西就是衍生。Mobx 有兩種類型的衍生：
- computed values 從當(dāng)前可觀察狀態(tài)中衍生出的值。
- reactions 當(dāng)前狀態(tài)改變時(shí)要發(fā)生的副作用。
computed values
當(dāng)相關(guān)數(shù)據(jù)變化時(shí)會(huì)自動(dòng)更新。通過 @computed 裝飾器調(diào)用的 setter／getter 函數(shù)進(jìn)行使用。
class MyStore {
@observable myName = 'HUnter'
@computed get getNameLength () {
return this.myName.length
}
}
reactions
reactions 與 computed values 相比起來使用較少，它是當(dāng)前狀態(tài)改變所觸發(fā)的副作用。
actions （動(dòng)作）
只有在 actions 中，才可以修改 Mobx 中 state 的值。注意當(dāng)你使用裝飾器模式時(shí)，@action 中的 this 沒有綁定在當(dāng)前這個(gè)實(shí)例上，要用過 @action.bound 來綁定 使得 this 綁定在實(shí)例對(duì)象上。
@action.bound setName () {
this.myName = 'HUnter'
}
actions ------> state ------> view
Mobx-React
上面簡(jiǎn)單介紹了 Mobx 的使用，我們知道當(dāng) React 組件中 state 變化后，要通過 setState 來觸發(fā)視圖的更新，Mobx 中定義了 React 組件中的 state 以及如何修改 state，那么怎么在 state 改變后觸發(fā)視圖的更新呢？Mobx-React 提供了 observer 將 React 組件的轉(zhuǎn)變?yōu)轫憫?yīng)式組件，確保 state 改變時(shí)可以強(qiáng)制刷新組件。做法很簡(jiǎn)單：
@observer
class MyComponent extends React.Component {
// ...
}
React + Mobx 使用的步驟
- 1.定義 observable state
class Store {
@observable data = []
// @computed ...
// @action ...
}
- 2.創(chuàng)建視圖
通過 React 創(chuàng)建視圖時(shí)，推薦創(chuàng)建無狀態(tài)組件，即組件內(nèi)沒有內(nèi)部的 state 和 生命周期函數(shù)。理想情況下，大部分組件都應(yīng)該是無狀態(tài)組件，僅通過 props 獲得數(shù)據(jù)。
@observer
class MyComponent extends React.Component {
}
- 3.通過調(diào)用 Mobx 中的 actions 改變狀態(tài)。
@observer
class MyComponent extends React.Component {
render () {
let store = { this.props }
return (
<div>
<input onChange={store.setName} />
</div>
)
}
}
上面大致講了如何簡(jiǎn)單使用 React + Mobx 來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的應(yīng)用，描述的比較淺顯。
