天天看點
傳回

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>

這是 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

往下傳資料

react前端架構dva(四)

往上傳資料

react前端架構dva(四)

CSS Modules

react前端架構dva(四)

了解 CSS Modules

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

react前端架構dva(四)

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

如果 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

更多詳見：

基于 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 查詢參數

原文釋出時間：2018年03月22日

原文作者：zhangrui_web

本文來源:

CSDN部落格

如需轉載請緊急聯系作者

前端開發 javascript 中間件 api 網絡架構 react前端架構 javascript前端開發css express react前端架構 javascript前端開發檔案 java規則引擎網絡
上一篇: 程式員的十層樓及讀後感
下一篇: 對技術的态度

繼續閱讀