react前端框架dva(四)
dva.js 知識導圖
不知大家學 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
相關推薦
react前端框架dva(四)
dva.js 知識導圖不知大家學 react 或 dva 時會不會有這樣的疑惑:es6 特性那麼多,我需要全部學會嗎?react component 有 3 種寫法,我需要全部學會嗎?reducer 的增刪改應該怎麼寫?怎麼做全域性/區域性的錯誤處理?怎麼發非同步請求?怎麼處
react前端框架dva(一)
react前端框架dva 最近正在看dva框架,發現這是一個很好應用於react的框架。 眾所周知,react的學習成本是較高的,而antd推出的這款框架,大大的降低了react的學習成本。dva簡化了 react-redux 的部署的檔案複雜度。使其清晰易
使用React前端框架結合js-ipfs-api實現IPFS的文字資料流傳輸
本文我們將通過React這個js前端框架來實現一個簡易的頁面,通過官方提供的js-ipfs-api,我們可以在頁面的文字框中輸入任意文字,然後提交上傳到IPFS節點網路中,再利用hash引數把上傳的文字資料顯示出來。 React簡介及安裝 React是由
vue.js 對比 angularJS、react 前端框架
React React 和 Vue 有許多相似之處,它們都有: 使用 Virtual DOM提供了響應式(Reactive)和元件化(Composable)的檢視元件。將注意力集中保持在核心庫,而將其他功能如路由和全域性狀態管理交給相關的庫。 由於有著眾多的相似處,我
前端框架React Js入門教程【精】
參考資料 react.js 功夫 入門實例 html 操作 load 通過 每一個 現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS,ReactJs的虛擬DOM(Virtual DOM)和組件化的開發深深的吸引了我,下
React 一個較為完善的前端框架
react 輪播 創建 sem ont 鏡像源 建議 tables 2.0 GitHub地址 預覽地址(已增加響應式,可手機預覽??) 依賴模塊 項目是用create-react-app創建的,主要還是列出新加的功能依賴包 點擊名稱可跳轉相關網站???
主流前端框架對比:Vue.js , React, Angular.js
.cn angular nbsp 入門 react 如果 blog reac 示例 個人認為Vue.js的文檔最懇切。我認為結合文檔和遇到問題Google答案的匹配度來講:Vue.js > ReactJS > AngularJS > Angular 2
基於前端框架react或者vue或者其他其他框架到出資料生成csv檔案,以及匯入csv檔案讀取資料的簡單例子
1.用npm在專案中安裝以下外掛: npm install file-saver --save npm install papaparse --save npm install jschardet --save npm install iconv-lite --save npm install
前端框架Angular與react對比
本文主要討論兩種框架在應用上的特點對比。 Angular Angular 是基於 TypeScript 的 Javascript 框架。提到Angular,就不得不提它的前身AngularJS。AngularJS是Google釋出的第一個MVVM框架,帶來了許多新特性,為
Vue.js秒殺React,成最受歡迎的開源前端框架!
近日,Jaxenter做了一項關於前端人員的問卷調查,根據最新的問卷調查結果顯示:Vue.js秒殺React,成為最受歡迎的前端框架 為什麼要做這次問卷? 為什麼要去比較Vue.js和React呢?這得從它們的發展歷程說起,2016年,React在Web端和移動端都實現了迅速的成長,當時它最
前端框架選型續 && 分享下使用 Backbone、Vue、Angular、React 的經驗
上週,知乎上有幾篇關於 Angular 和 Vue 對比的文章。本來想著的是,這些文章倒是可以指導下新手,作一些技術選型。可遺憾的是,開始的文章失去了一些偏頗,後面的文章則開始了一些攻擊性行為。慢慢的,整個知乎上便是充滿了一些戾氣,開始了無盡的網路暴力。
心得分享:前端框架搭建參考( vue、react )
從工作之初的requirejs,又經歷了nwjs、nodejs,到現在的vue、react-redux、react-native,也走過了一段不長不短的前端開發之路。本篇將分享一下我的前端框架的一點理解。現在最流行的前端框架要數 vue 和 react。按經驗,偏中、小型、要
Angular、React、Vue.js 等 6 大主流前端框架都有什麼優缺點?
Ember.js可能是最固執己見的主流框架,這也是它最大的弱點。雖然社群是開放的並且接受投資,但是仍然需要找到一個正確的方式來擺脫下滑的趨勢,這可能是具有挑戰性的問題。擁有一個豐富的第三方社群也可能具有挑戰性。由於沒有開箱即用的UX元件,這很可能會讓你使用第三方套件。你可能會發現,雖然這些套件並不全面,你將需
如何選擇前端框架:ANGULAR VS EMBER VS REACT
最近一段時間是令前端工程師們非常興奮的時期,因為三大Web框架陸續釋出新版本,讓我們見識到了更強大的Web框架。Ember2.0在2個月之前已經發布,從1.0升級到2.0非常簡單。幾周之前React釋出了0.14版本。還有很多流行的前端框架,像Backbone 、Knocko
前端框架angular, react, Vue區別與特點
框架用來解決什麼的? Angular,React,Vue,這三者其實面對的是同一個領域,那就是Web應用。 這三者中,Angular的適用領域相對窄一些,React可以拓展到服務端,移動端Native部分,而Vue因為比較輕量,還能用於業務場景非常輕的頁面中。 在Web
最受歡迎前端框架之React實戰視訊課程
課程目錄 01 01-React簡介 01-React簡介(24分鐘) 02 02-React起步webpack和babel的配置 02-React起步webpack和babel的配置(26分鐘) 03 03-React起步HelloWorld 03_React起步HelloWorld(19分鐘) 04 04
最火的一款前端框架----React
首先要引進在cdn的幾個檔案 <script src="https://cdn.bootcss.com/react/0.14.7/react.min.js"></script> <script src="https://cdn.bootcss
React 還是 Vue: 你應該選擇哪一個Web前端框架?
2016年,React在Web端和移動端都實現了迅速的成長,穩穩地領先於其主要競爭對手Augular,鞏固了其作為前端框架之王的地位。 但是Vue在這一年裡的表現也可謂同樣的耀眼。Vue.js 2.0 的釋出在整個JavaScript社群都引起了巨大反響,這一點僅從
前端框架天下三分:Angular React 和 Vue的比較
前端這幾年的技術發展很快,細分下來,主要可以分成四個方面: 1.開發語言技術,主要是ES6&7,coffeescript,typescript等; 2.開發框架,如Angular,React,Vue.js,Angular2等; 3.開發工具的豐富和前端工程化
前端框架:Angular React 和 Vue的比較
前端這幾年的技術發展很快,細分下來,主要可以分成四個方面: 1.開發語言技術,主要是ES6&7,coffeescript,typescript等; 2.開發框架,如Angular,React,Vue.js,Angular2等; 3.開發工具的豐富和前端工程化