react前端框架dva(四)

不知大家學 react 或 dva 時會不會有這樣的疑惑：

• es6 特性那麼多，我需要全部學會嗎?
• react component 有 3 種寫法，我需要全部學會嗎?
• reducer 的增刪改應該怎麼寫?
• 怎麼做全域性/區域性的錯誤處理?
• 怎麼發非同步請求?
• 怎麼處理複雜的非同步業務邏輯?
• 怎麼配置路由?
• …

這篇文件梳理了基於 dva-cli 使用 dva 的最小知識集，讓你可以用最少的時間掌握建立類似 dva-hackernews 的全部知識，並且不需要掌握額外的冗餘知識。

JavaScript 語言

變數宣告

const 和 let

不要用 var，而是用 const 和 let，分別表示常量和變數。不同於 var 的函式作用域，const 和 let 都是塊級作用域。

const DELAY = 1000;

let count = 0;
count = count + 1;

模板字串

模板字串提供了另一種做字串組合的方法。

const user = `world`;
console.log(`hello ${user}`); // hello world // 多行 const content = `  Hello ${firstName},  Thanks for ordering ${qty} tickets to ${event}. `;

預設引數

function logActivity(activity = `skiing`) {
 console.log(activity);
}

logActivity(); // skiing

箭頭函式

函式的快捷寫法，不需要通過 function 關鍵字建立函式，並且還可以省略 return 關鍵字。

同時，箭頭函式還會繼承當前上下文的 this 關鍵字。

比如：

[1, 2, 3].map(x => x + 1); // [2, 3, 4]

等同於：

[1, 2, 3].map((function(x) {
 return x + 1;
}).bind(this));

模組的 Import 和 Export

import 用於引入模組，export 用於匯出模組。

比如：

// 引入全部 import dva from `dva`;

// 引入部分 import { connect } from `dva`;
import { Link, Route } from `dva/router`;

// 引入全部並作為 github 物件 import * as github from `./services/github`;

// 匯出預設 export default App;
// 部分匯出，需 import { App } from `./file`; 引入 export class App extend Component {};

ES6 物件和陣列

析構賦值

析構賦值讓我們從 Object 或 Array 裡取部分資料存為變數。

// 物件 const user = { name: `guanguan`, age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`); // guanguan : 2 // 陣列 const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo); // 1

我們也可以析構傳入的函式引數。

const add = (state, { payload }) => {
 return state.concat(payload);
};

析構時還可以配 alias，讓程式碼更具有語義。

const add = (state, { payload: todo }) => {
 return state.concat(todo);
};

物件字面量改進

這是析構的反向操作，用於重新組織一個 Object 。

const name = `duoduo`;
const age = 8;

const user = { name, age }; // { name: `duoduo`, age: 8 }

定義物件方法時，還可以省去 function 關鍵字。

app.model({
 reducers: {
 add() {} // 等同於 add: function() {}
 },
 effects: {
 *addRemote() {} // 等同於 addRemote: function*() {}
 },
});

Spread Operator

Spread Operator 即 3 個點 ...，有幾種不同的使用方法。

可用於組裝陣列。

const todos = [`Learn dva`];
[...todos, `Learn antd`]; // [`Learn dva`, `Learn antd`]

也可用於獲取陣列的部分項。

const arr = [`a`, `b`, `c`];
const [first, ...rest] = arr;
rest; // [`b`, `c`] // With ignore const [first, , ...rest] = arr;
rest; // [`c`]

還可收集函式引數為陣列。

function directions(first, ...rest) {
 console.log(rest);
}
directions(`a`, `b`, `c`); // [`b`, `c`];

代替 apply。

function foo(x, y, z) {}
const args = [1,2,3];

// 下面兩句效果相同 foo.apply(null, args);
foo(...args);

對於 Object 而言，用於組合成新的 Object 。(ES2017 stage-2 proposal)

const foo = {
 a: 1,
 b: 2,
};
const bar = {
 b: 3,
 c: 2,
};
const d = 4;

const ret = { ...foo, ...bar, d }; // { a:1, b:3, c:2, d:4 }

此外，在 JSX 中 Spread Operator 還可用於擴充套件 props，詳見 Spread Attributes。

Promises

Promise 用於更優雅地處理非同步請求。比如發起非同步請求：

fetch(`/api/todos`)
 .then(res => res.json())
 .then(data => ({ data }))
 .catch(err => ({ err }));

定義 Promise 。

const delay = (timeout) => {
 return new Promise(resolve => {
 setTimeout(resolve, timeout);
 });
};

delay(1000).then(_ => {
 console.log(`executed`);
});

Generators

dva 的 effects 是通過 generator 組織的。Generator 返回的是迭代器，通過 yield 關鍵字實現暫停功能。

這是一個典型的 dva effect，通過 yield 把非同步邏輯通過同步的方式組織起來。

app.model({
 namespace: `todos`,
 effects: {
 *addRemote({ payload: todo }, { put, call }) {
 yield call(addTodo, todo);
 yield put({ type: `add`, payload: todo });
 },
 },
});

React Component

Stateless Functional Components

React Component 有 3 種定義方式，分別是 React.createClass, class 和 Stateless Functional Component。推薦儘量使用最後一種，保持簡潔和無狀態。這是函式，不是 Object，沒有 this 作用域，是 pure function。

比如定義 App Component 。

function App(props) {
 function handleClick() {
 props.dispatch({ type: `app/create` });
 }
 return <div onClick={handleClick}>${props.name}</div>
}

等同於：

class App extends React.Component {
 handleClick() {
 this.props.dispatch({ type: `app/create` });
 }
 render() {
 return <div onClick={this.handleClick.bind(this)}>${this.props.name}</div>
 }
}

JSX

Component 巢狀

類似 HTML，JSX 裡可以給元件新增子元件。

<App>
 <Header />
 <MainContent />
 <Footer />
</App>

className

class 是保留詞，所以新增樣式時，需用 className 代替 class 。

<h1 className="fancy">Hello dva</h1>

JavaScript 表示式

JavaScript 表示式需要用 {} 括起來，會執行並返回結果。

比如：

<h1>{ this.props.title }</h1>

Mapping Arrays to JSX

可以把陣列對映為 JSX 元素列表。

<ul>
 { this.props.todos.map((todo, i) => <li key={i}>{todo}</li>) }
</ul>

註釋

儘量別用 // 做單行註釋。

<h1>
 {/* multiline comment */}
 {/*  multi  line  comment  */}
 {
 // single line
 }
 Hello
</h1>

Spread Attributes

這是 JSX 從 ECMAScript6 借鑑過來的很有用的特性，用於擴充元件 props 。

比如：

const attrs = {
 href: `http://example.org`,
 target: `_blank`,
};
<a {...attrs}>Hello</a>

等同於

const attrs = {
 href: `http://example.org`,
 target: `_blank`,
};
<a href={attrs.href} target={attrs.target}>Hello</a>

Props

資料處理在 React 中是非常重要的概念之一，分別可以通過 props, state 和 context 來處理資料。而在 dva 應用裡，你只需關心 props 。

propTypes

JavaScript 是弱型別語言，所以請儘量宣告 propTypes 對 props 進行校驗，以減少不必要的問題。

function App(props) {
 return <div>{props.name}</div>;
}
App.propTypes = {
 name: React.PropTypes.string.isRequired,
};

內建的 prop type 有：

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string

往下傳資料

往上傳資料

CSS Modules

理解 CSS Modules

一張圖理解 CSS Modules 的工作原理：

button class 在構建之後會被重新命名為 ProductList_button_1FU0u 。button 是 local name，而 ProductList_button_1FU0u是 global name 。你可以用簡短的描述性名字，而不需要關心命名衝突問題。

然後你要做的全部事情就是在 css/less 檔案裡寫 .button {...}，並在元件裡通過 styles.button 來引用他。

定義全域性 CSS

CSS Modules 預設是區域性作用域的，想要宣告一個全域性規則，可用 :global 語法。

比如：

.title {
 color: red;
}
:global(.title) {
 color: green;
}

然後在引用的時候：

<App className={styles.title} /> // red <App className="title" /> // green

classnames Package

在一些複雜的場景中，一個元素可能對應多個 className，而每個 className 又基於一些條件來決定是否出現。這時，classnames 這個庫就非常有用。

import classnames from `classnames`;
const App = (props) => {
 const cls = classnames({
 btn: true,
 btnLarge: props.type === `submit`,
 btnSmall: props.type === `edit`,
 });
 return <div className={ cls } />;
}

這樣，傳入不同的 type 給 App 元件，就會返回不同的 className 組合：

<App type="submit" /> // btn btnLarge <App type="edit" /> // btn btnSmall

Reducer

reducer 是一個函式，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state

增刪改

以 todos 為例。

app.model({
 namespace: `todos`,
 state: [],
 reducers: {
 add(state, { payload: todo }) {
 return state.concat(todo);
 },
 remove(state, { payload: id }) {
 return state.filter(todo => todo.id !== id);
 },
 update(state, { payload: updatedTodo }) {
 return state.map(todo => {
 if (todo.id === updatedTodo.id) {
 return { ...todo, ...updatedTodo };
 } else {
 return todo;
 }
 });
 },
 },
};

巢狀資料的增刪改

建議最多一層巢狀，以保持 state 的扁平化，深層巢狀會讓 reducer 很難寫和難以維護。

app.model({
 namespace: `app`,
 state: {
 todos: [],
 loading: false,
 },
 reducers: {
 add(state, { payload: todo }) {
 const todos = state.todos.concat(todo);
 return { ...state, todos };
 },
 },
});

下面是深層巢狀的例子，應儘量避免。

app.model({
 namespace: `app`,
 state: {
 a: {
 b: {
 todos: [],
 loading: false,
 },
 },
 },
 reducers: {
 add(state, { payload: todo }) {
 const todos = state.a.b.todos.concat(todo);
 const b = { ...state.a.b, todos };
 const a = { ...state.a, b };
 return { ...state, a };
 },
 },
});

Effect

示例：

app.model({
 namespace: `todos`,
 effects: {
 *addRemote({ payload: todo }, { put, call }) {
 yield call(addTodo, todo);
 yield put({ type: `add`, payload: todo });
 },
 },
});

Effects

put

用於觸發 action 。

yield put({ type: `todos/add`, payload: `Learn Dva` });

call

用於呼叫非同步邏輯，支援 promise 。

const result = yield call(fetch, `/todos`);

select

用於從 state 裡獲取資料。

const todos = yield select(state => state.todos);

錯誤處理

全域性錯誤處理

dva 裡，effects 和 subscriptions 的拋錯全部會走 onError hook，所以可以在 onError 裡統一處理錯誤。

const app = dva({
 onError(e, dispatch) {
 console.log(e.message);
 },
});

然後 effects 裡的拋錯和 reject 的 promise 就都會被捕獲到了。

本地錯誤處理

如果需要對某些 effects 的錯誤進行特殊處理，需要在 effect 內部加 try catch 。

app.model({
 effects: {
 *addRemote() {
 try {
 // Your Code Here
 } catch(e) {
 console.log(e.message);
 }
 },
 },
});

非同步請求

非同步請求基於 whatwg-fetch，API 詳見：https://github.com/github/fetch

GET 和 POST

import request from `../util/request`;

// GET request(`/api/todos`);

// POST request(`/api/todos`, {
 method: `POST`,
 body: JSON.stringify({ a: 1 }),
});

統一錯誤處理

假如約定後臺返回以下格式時，做統一的錯誤處理。

{
 status: `error`,
 message: ``,
}

編輯 utils/request.js，加入以下中介軟體：

function parseErrorMessage({ data }) {
 const { status, message } = data;
 if (status === `error`) {
 throw new Error(message);
 }
 return { data };
}

然後，這類錯誤就會走到 onError hook 裡。

Subscription

subscriptions 是訂閱，用於訂閱一個資料來源，然後根據需要 dispatch 相應的 action。資料來源可以是當前的時間、伺服器的 websocket 連線、keyboard 輸入、geolocation 變化、history 路由變化等等。格式為 ({ dispatch, history }) => unsubscribe 。

非同步資料初始化

比如：當使用者進入 /users 頁面時，觸發 action users/fetch 載入使用者資料。

app.model({
 subscriptions: {
 setup({ dispatch, history }) {
 history.listen(({ pathname }) => {
 if (pathname === `/users`) {
 dispatch({
 type: `users/fetch`,
 });
 }
 });
 },
 },
});

path-to-regexp Package

如果 url 規則比較複雜，比如 /users/:userId/search，那麼匹配和 userId 的獲取都會比較麻煩。這是推薦用 path-to-regexp簡化這部分邏輯。

import pathToRegexp from `path-to-regexp`;

// in subscription const match = pathToRegexp(`/users/:userId/search`).exec(pathname);
if (match) {
 const userId = match[1];
 // dispatch action with userId
}

Router

Config with JSX Element (router.js)

<Route path="/" component={App}> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route>

詳見：react-router

Route Components

Route Components 是指 ./src/routes/ 目錄下的檔案，他們是 ./src/router.js 裡匹配的 Component。

通過 connect 繫結資料

比如：

import { connect } from `dva`;
function App() {}

function mapStateToProps(state, ownProps) {
 return {
 users: state.users,
 };
}
export default connect(mapStateToProps)(App);

然後在 App 裡就有了 dispatch 和 users 兩個屬性。

Injected Props (e.g. location)

Route Component 會有額外的 props 用以獲取路由資訊。

• location
• params
• children

更多詳見：react-router

基於 action 進行頁面跳轉

import { routerRedux } from `dva/router`;

// Inside Effects yield put(routerRedux.push(`/logout`));

// Outside Effects dispatch(routerRedux.push(`/logout`));

// With query routerRedux.push({
 pathname: `/logout`,
 query: {
 page: 2,
 },
});

除 push(location) 外還有更多方法，詳見 react-router-redux

dva 配置

Redux Middleware

比如要新增 redux-logger 中介軟體：

import createLogger from `redux-logger`;
const app = dva({
 onAction: createLogger(),
});

注：onAction 支援陣列，可同時傳入多箇中介軟體。

history

切換 history 為 browserHistory

import { browserHistory } from `dva/router`;
const app = dva({
 history: browserHistory,
});

去除 hashHistory 下的 _k 查詢引數