摘要:而函數式編程就不一樣了,這是模仿我們人類的思維方式發明出來的。數據流在中,數據的流動是單向的,即從父節點傳遞到子節點。數據流嚴格的單向數據流是架構的設計核心。
前言
總括: 本文采用react+redux+react-router+less+es6+webpack,以實現一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現一個完整應用的過程。
代碼地址:React全家桶實現一個簡易備忘錄
原文博客地址:React全家桶實現一個簡易備忘錄
知乎專欄&&簡書專題:前端進擊者(知乎)&&前端進擊者(簡書)
博主博客地址:Damonare的個人博客
人生不失意,焉能暴己知。
技術說明功能說明</>復制代碼
技術架構:本備忘錄使用react+react-router+redux+less+ES6+webpack實現;
頁面UI參照:TodoList官網實現;
在線演示地址:Damonare的備忘錄;
支持回車添加新事項;
支持刪除事項(點擊X符號);
支持狀態轉換具體包括:
新建事項->正在進行(點擊checkbox選項)
正在進行->已完成(點擊文字內容本身)
正在進行->新建事項(點擊checkbox選項)
已完成->正在進行(點擊文字本身)
支持判斷輸入空字符,過長字符(20個漢字以內);
支持搜索;
支持本地化存儲;
支持狀態的展開隱藏(點擊標題)
兼容手機端(iPhone6及以上)
支持路由切換
正文 1. React淺談 1.1 組件化? 毫無疑問,當談到React的時候不能避免的會提到組件化思想。React剛開始想解決的問題只是UI這一層面的問題,也就是MVC中view層面的問題,不成想如今越滾越大,從最早的UI引擎變成了一整套前后端通吃的 Web App 解決方案。對于React組件的理解同樣要站在view層面的角度出發,一個完整的頁面是由大大小小的組件堆疊而成,就好像搭積木,每一塊積木都是一個組件,組件套組件組成了用戶所能看到的完整的頁面。
1.2 JSX語法糖? 使用React,不一定非要使用JSX語法,可以使用原生的JS進行開發。但是React作者強烈建議我們使用JSX,因為JSX在定義類似HTML這種樹形結構時,十分的簡單明了。這里簡單的講下JSX的由來。
? 比如,下面一個div元素,我們用HTML語法描述為:
</>復制代碼
Test
如果換做使用javascript描述這個元素呢?最好的方式可以簡單的轉化為json對象,如下:
</>復制代碼
{
type:"div",
props:{
className:"test",
children:{
type:"span",
props:{
children:"Test"
}
}
}
}
這樣我們就可以在javascript中創建一個Virtual DOM(虛擬DOM)了。當然,這樣是沒法復用的,我們再把它封裝一下:
</>復制代碼
const Div=>({text}){
return {
type:"div",
props:{
className:"test",
children:{
type:"span",
props:{
children: text,
},
},
},
}
}
接下來再實現這個div就可以直接調用Div("Test")來創建。但上述結構看起來實在讓人不爽,寫起來也很容易寫混,一旦結構復雜了,很容易讓人找不著北,于是JSX語法應運而生。我們用寫HTML的方式寫這段代碼,再經過翻譯器轉換成javascript后交給瀏覽器執行。上述代碼用JSX重寫:
</>復制代碼
const Div =()=>(
Test
);
多么簡單明了!!!具體的JSX語法不多說了,學習更多戳這:JSX in Depth
1.3 Virtual DOM其實上面已經提到了Virtual DOM,它的存在也是React長久不衰的原因之一,虛擬DOM的概念并不是FB首創卻在FB的手上大火了起來(后臺是多么重要)。
我們知道真實的頁面對應了一個DOM樹,在傳統頁面的開發模式中,每次需要更新頁面時,都需要對DOM進行更新,DOM操作十分昂貴,為減少對于真實DOM的操作,誕生了Virtual DOM的概念,也就是用javascript把真實的DOM樹描述了一遍,使用的也就是我們剛剛說過的JSX語法。對比如下:
每次數據更新之后,重新計算Virtual DOM,并和上一次的Virtual DOM對比,對發生的變化進行批量更新。React也提供了shouldComponentUpdate生命周期回調,來減少數據變化后不必要的Virtual DOM對比過程,提升了性能。
Virtual DOM雖然渲染方式比傳統的DOM操作要好一些,但并不明顯,因為對比DOM節點也是需要計算的,最大的好處在于可以很方便的和其它平臺集成,比如react-native就是基于Virtual DOM渲染出原生控件。具體渲染出的是Web DOM還是Android控件或是iOS控件就由平臺決定了。所以我們說react的出現是一場革命,一次對于native app的宣戰,就像react-native那句口號——Learn Once,Write Anywhere.
1.4 函數式編程? 過去編程方式主要是以命令式編程為主,什么意思呢?簡單說電腦的思維方式和我們人類的思考方式是不一樣的。我們人類的大腦擅長的是分析問題,提出一個解決問題的方案,電腦則是生硬的執行指令,命令式編程就像是給電腦下達命令,讓電腦去執行一樣,現在主要的編程語言(比如:Java,C,C++等)都是由命令式編程構建起來的。
? 而函數式編程就不一樣了,這是模仿我們人類的思維方式發明出來的。例如:操作某個數組的每一個元素然后返回一個新數組,如果是計算機的思考方式,會這樣想:創建一個新數組=>遍歷舊數組=>給新數組賦值。如果是人類的思考方式,會這樣想:創建一個數組方法,作用在舊數組上,返回新數組。這樣此方法可以被重復利用。而這就是函數式編程了。
1.5 數據流在React中,數據的流動是單向的,即從父節點傳遞到子節點。也因此組件是簡單的,他們只需要從父組件獲取props渲染即可。如果頂層的props改變了,React會遞歸的向下遍歷整個組件樹,重新渲染所有使用這個屬性的組件。那么父組件如何獲取子組件數據呢?很簡單,通過回調就可以了,父組件定義某個方法供給子組件調用,子組件調用方法傳遞給父組件數據,Over。
2. React-router這東西我覺得沒啥難度,官方例子都很不錯,跟著官方例子來一遍基本就明白到底是個啥玩意了,官方例子:react-router-tutorial。
完事以后可以再看一下阮一峰老師的教程,主要是對一些API的講解:React Router 使用教程。
還有啥不明白的歡迎評論留言共同探討。
3. Redux 3.1 簡介隨著 JavaScript 單頁應用開發日趨復雜,JavaScript 需要管理比任何時候都要多的 state (狀態)。 這些 state 可能包括服務器響應、緩存數據、本地生成尚未持久化到服務器的數據,也包括 UI 狀態,如激活的路由,被選中的標簽,是否顯示加載動效或者分頁器等等。如果一個 model 的變化會引起另一個 model 變化,那么當 view 變化時,就可能引起對應 model 以及另一個 model 的變化,依次地,可能會引起另一個 view 的變化。亂!
這時候Redux就強勢登場了,現在你可以把React的model看作是一個個的子民,每一個子民都有自己的一個狀態,紛紛擾擾,各自維護著自己狀態,我行我素,那哪行啊!太亂了,我們需要一個King來領導大家,我們就可以把Redux看作是這個King。網羅所有的組件組成一個國家,掌控著一切子民的狀態!防止有人叛亂生事!
這個時候就把組件分成了兩種:容器組件(King或是路由)和展示組件(子民)。
容器組件:即redux或是router,起到了維護狀態,出發action的作用,其實就是King高高在上下達指令。
展示組件:不維護狀態,所有的狀態由容器組件通過props傳給他,所有操作通過回調完成。
展示組件 | 容器組件 | |
---|---|---|
作用 | 描述如何展現(骨架、樣式) | 描述如何運行(數據獲取、狀態更新) |
直接使用 Redux | 否 | 是 |
數據來源 | props | 監聽 Redux state |
數據修改 | 從 props 調用回調函數 | 向 Redux 派發 actions |
調用方式 | 手動 | 通常由 React Redux 生成 |
Redux三大部分:store,action,reducer。相當于King的直系下屬。
那么也可以看出Redux只是一個狀態管理方案,完全可以多帶帶拿出來使用,這個King不僅僅可以是React的,去Angular,Ember那里也是可以做King的。在React中維系King和組件關系的庫叫做?react-redux。
, 它主要有提供兩個東西:Provider 和 connect,具體使用文后說明。
提供幾個Redux的學習地址:官方教程-中文版,Redux 入門教程(一):基本用法
3.2 StoreStore 就是保存數據的地方,它實際上是一個Object tree。整個應用只能有一個 Store。這個Store可以看做是King的首相,掌控一切子民(組件)的活動(state)。
Redux 提供createStore這個函數,用來生成 Store。
</>復制代碼
import { createStore } from "redux";
const store = createStore(func);
createStore接受一個函數作為參數,返回一個Store對象(首相誕生記)
我們來看一下Store(首相)的職責:
維持應用的 state;
提供?getState()?方法獲取 state;
提供?dispatch(action)?方法更新 state;
通過?subscribe(listener)?注冊監聽器;
通過?subscribe(listener)?返回的函數注銷監聽器。
3.3 actionState 的變化,會導致 View 的變化。但是,用戶接觸不到 State,只能接觸到 View。所以,State 的變化必須是 View 導致的。Action 就是 View 發出的通知,表示 State 應該要發生變化了。即store的數據變化來自于用戶操作。action就是一個通知,它可以看作是首相下面的郵遞員,通知子民(組件)改變狀態。它是 store 數據的唯一來源。一般來說會通過?store.dispatch()?將 action 傳到 store。
Action 是一個對象。其中的type屬性是必須的,表示 Action 的名稱。
</>復制代碼
const action = {
type: "ADD_TODO",
payload: "Learn Redux"
};
Action創建函數
Action 創建函數?就是生成 action 的方法。“action” 和 “action 創建函數” 這兩個概念很容易混在一起,使用時最好注意區分。
在 Redux 中的 action 創建函數只是簡單的返回一個 action:
</>復制代碼
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
這樣做將使 action 創建函數更容易被移植和測試。
3.4 reducerAction?只是描述了有事情發生了這一事實,并沒有指明應用如何更新 state。而這正是 reducer 要做的事情。也就是郵遞員(action)只負責通知,具體你(組件)如何去做,他不負責,這事情只能是你們村長(reducer)告訴你如何去做才能符合社會主義核心價值觀,如何做才能對建設共產主義社會有利。
專業解釋: Store 收到 Action 以后,必須給出一個新的 State,這樣 View 才會發生變化。這種 State 的計算過程就叫做 Reducer。
Reducer 是一個函數,它接受 Action 和當前 State 作為參數,返回一個新的 State。
</>復制代碼
const reducer = function (state, action) {
// ...
return new_state;
};
3.5 數據流
嚴格的單向數據流是 Redux 架構的設計核心。
Redux 應用中數據的生命周期遵循下面 4 個步驟:
調用?store.dispatch(action)。
Redux store 調用傳入的 reducer 函數。
根 reducer 應該把多個子 reducer 輸出合并成一個單一的 state 樹。
Redux store 保存了根 reducer 返回的完整 state 樹。
工作流程圖如下:
3.6 Connect這里需要再強調一下:Redux 和 React 之間沒有關系。Redux 支持 React、Angular、Ember、jQuery 甚至純 JavaScript。
盡管如此,Redux 還是和?React?和?Deku?這類框架搭配起來用最好,因為這類框架允許你以 state 函數的形式來描述界面,Redux 通過 action 的形式來發起 state 變化。
Redux 默認并不包含?React 綁定庫,需要多帶帶安裝。
</>復制代碼
npm install --save react-redux
當然,我們這個實例里是不需要的,所有需要的依賴已經在package.json里配置好了。
React-Redux 提供connect方法,用于從 UI 組件生成容器組件。connect的意思,就是將這兩種組件連起來。
</>復制代碼
import { connect } from "react-redux";
const TodoList = connect()(Memos);
上面代碼中Memos是個UI組件,TodoList就是由 React-Redux 通過connect方法自動生成的容器組件。
而只是純粹的這樣把Memos包裹起來毫無意義,完整的connect方法這樣使用:
</>復制代碼
import { connect } from "react-redux"
const TodoList = connect(
mapStateToProps
)(Memos)
上面代碼中,connect方法接受兩個參數:mapStateToProps和mapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯,即將state映射到 UI 組件的參數(props),后者負責輸出邏輯,即將用戶對 UI 組件的操作映射成 Action。
3.7 Provider?這個Provider 其實是一個中間件,它是為了解決讓容器組件拿到King的指令(state對象)而存在的。
</>復制代碼
import { Provider } from "react-redux"
import { createStore } from "redux"
import todoApp from "./reducers"
import App from "./components/App"
let store = createStore(todoApp);
render(
,
document.getElementById("root")
)
上面代碼中,Provider在根組件外面包了一層,這樣一來,App的所有子組件就默認都可以拿到state了。
4.實戰備忘錄講解之前可以先看一下github上的代碼,你可以clone下來學習,也可以在線給我提issue,歡迎戳這:React全家桶實現簡易備忘錄
4.1目錄結構</>復制代碼
.
├── app #開發目錄
| |
| ├──actions #action的文件
| |
| ├──components #展示組件
| |
| ├──containers #容器組件,主頁
| |
| ├──reducers #reducer文件
| |
| |——routes #路由文件,容器組件
| |
| |——static #靜態文件
| |
| ├──stores #store配置文件
| |
| |——main.less #路由樣式
| |
| └──main.js #入口文件
|
├── build #發布目錄
├── node_modules #包文件夾
├── .gitignore
├── .jshintrc
├── webpack.production.config.js #生產環境配置
├── webpack.config.js #webpack配置文件
├── package.json #環境配置
└── README.md #使用說明
接下來,我們只關注app目錄就好了。
4.2入口文件</>復制代碼
import React from "react";
import ReactDOM from "react-dom";
import {Route, IndexRoute, browserHistory, Router} from "react-router";
import {createStore} from "redux";
import {Provider} from "react-redux";
import App from "./container/App";
import AllMemosRoute from "./routes/AllMemosRoute";
import TodoRoute from "./routes/TodoRoute";
import DoingRoute from "./routes/DoingRoute";
import DoneRoute from "./routes/DoneRoute";
import configureStore from "./stores";
import "./main.less";
const store = configureStore();
ReactDOM.render(
,
document.body.appendChild(document.createElement("div")))
這里我們從 react-redux 中獲取到 Provider 組件,我們把它渲染到應用的最外層。
他需要一個屬性 store ,他把這個 store 放在context里,給Router(connect)用。
</>復制代碼
app/store/index.jsx
</>復制代碼
import { createStore } from "redux";
import reducer from "../reducers";
export default function configureStore(initialState) {
const store = createStore(reducer, initialState);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept("../reducers", () => {
const nextReducer = require("../reducers");
store.replaceReducer(nextReducer);
});
}
return store;
}
4.4 Action 創建函數和常量
</>復制代碼
app/action/index.jsx
</>復制代碼
"use strict";
/*
* @author Damonare 2016-12-10
* @version 1.0.0
* action 類型
*/
export const Add_Todo = "Add_Todo";
export const Change_Todo_To_Doing = "Change_Todo_To_Doing";
export const Change_Doing_To_Done = "Change_Doing_To_Done";
export const Change_Done_To_Doing = "Change_Done_To_Doing";
export const Change_Doing_To_Todo = "Change_Doing_To_Todo";
export const Search="Search";
export const Delete_Todo="Delete_Todo";
/*
* action 創建函數
* @method addTodo添加新事項
* @param {String} text 添加事項的內容
*/
export function addTodo(text) {
return {
type: Add_Todo,
text
}
}
/*
* @method search 查找事項
* @param {String} text 查找事項的內容
*/
export function search(text) {
return {
type: Search,
text
}
}
/*
* @method changeTodoToDoing 狀態由todo轉為doing
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeTodoToDoing(index) {
return {
type: Change_Todo_To_Doing,
index
}
}
/*
* @method changeDoneToDoing 狀態由done轉為doing
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeDoneToDoing(index) {
return {
type: Change_Done_To_Doing,
index
}
}
/*
* @method changeDoingToTodo 狀態由doing轉為todo
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeDoingToTodo(index) {
return {
type: Change_Doing_To_Todo,
index
}
}
/*
* @method changeDoingToDone 狀態由doing轉為done
* @param {Number} index 需要改變狀態的事項的下標
*/
export function changeDoingToDone(index) {
return {
type: Change_Doing_To_Done,
index
}
}
/*
* @method deleteTodo 刪除事項
* @param {Number} index 需要刪除的事項的下標
*/
export function deleteTodo(index) {
return {
type: Delete_Todo,
index
}
}
在聲明每一個返回 action 函數的時候,我們需要在頭部聲明這個 action 的 type,以便好組織管理。
每個函數都會返回一個 action 對象,所以在 容器組件里面調用
</>復制代碼
text =>
dispatch(addTodo(text))
就是調用dispatch(action)?。
4.5 Reducers</>復制代碼
app/reducers/index.jsx
</>復制代碼
import { combineReducers } from "redux";
import todolist from "./todos";
// import visibilityFilter from "./visibilityFilter";
const reducer = combineReducers({
todolist
});
export default reducer;
</>復制代碼
app/reducers/todos.jsx
</>復制代碼
import {
Add_Todo,
Delete_Todo,
Change_Todo_To_Doing,
Change_Doing_To_Done,
Change_Doing_To_Todo,
Change_Done_To_Doing,
Search
} from "../actions";
let todos;
(function() {
if (localStorage.todos) {
todos = JSON.parse(localStorage.todos)
} else {
todos = []
}
})();
function todolist(state = todos, action) {
switch (action.type) {
/*
* 添加新的事項
* 并進行本地化存儲
* 使用ES6展開運算符鏈接新事項和舊事項
* JSON.stringify進行對象深拷貝
*/
case Add_Todo:
localStorage.setItem("todos", JSON.stringify([
...state, {
todo: action.text,
istodo: true,
doing: false,
done: false
}
]));
return [
...state, {
todo: action.text,
istodo: true,
doing: false,
done: false
}
];
/*
* 將todo轉為doing狀態,注意action.index的類型轉換
*/
case Change_Todo_To_Doing:
localStorage.setItem("todos", JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 將doing轉為done狀態
*/
case Change_Doing_To_Done:
localStorage.setItem("todos", JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: false,
done: true
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: false,
done: true
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 將done轉為doing狀態
*/
case Change_Done_To_Doing:
localStorage.setItem("todos", JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: false,
doing: true,
done: false
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 將doing轉為todo狀態
*/
case Change_Doing_To_Todo:
localStorage.setItem("todos", JSON.stringify([
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: true,
doing: false,
done: false
},
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
{
todo:state[action.index].todo,
istodo: true,
doing: false,
done: false
},
...state.slice(parseInt(action.index) + 1)
];
/*
* 刪除某個事項
*/
case Delete_Todo:
localStorage.setItem("todos", JSON.stringify([
...state.slice(0, action.index),
...state.slice(parseInt(action.index) + 1)
]));
return [
...state.slice(0, action.index),
...state.slice(parseInt(action.index) + 1)
];
/*
* 搜索
*/
case Search:
let text=action.text;
let reg=eval("/"+text+"/gi");
return state.filter(item=> item.todo.match(reg));
default:
return state;
}
}
export default todolist;
具體的展示組件這里就不羅列代碼了,感興趣的可以戳這:備忘錄展示組件地址
后記嚴格來說,這個備忘錄并不是使用的react全家桶,畢竟還有一部分less代碼,不過這一個應用也算是比較全面的使用了react+react-router+redux,作為react全家桶技術學習的練手的小項目再適合不過了。如果您對這個小東西感興趣,歡迎戳這:React全家桶實現簡易備忘錄給個star。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86577.html
摘要:最近練手開發了一個項目,是一個聊天室應用。由于我們的項目是一個單頁面應用,因此只需要統一打包出一個和一個。而就是基于實現的一套基于事件訂閱與發布的通信庫。比如說,某一個端口了,而如果端口訂閱了,那么在端,對應的回調函數就會被執行。 最近練手開發了一個項目,是一個聊天室應用。項目雖不大,但是使用到了react, react-router, redux, socket.io,后端開發使用了...
摘要:相關配置請參考中文文檔。關于的更多使用方法及理解需要詳細具體講解,涉及篇幅較大,本文暫不涉及,有興趣可以看文檔中文文檔,我會整理后再單獨章節分享接下來我們將編寫路由組件這與有一些差別,原來的方法已經不再使用,在中或組件從中引入。 ??????相信很多剛入坑React的小伙伴們有一個同樣的疑惑,由于React相關庫不斷的再進行版本迭代,網上很多以前的技術分享變得不再適用。比如react-...
摘要:序列文章從項目中由淺入深的學習微信小程序和快應用前言從和原生兩個項目來介紹的使用搞懂這兩個項目上手擼代碼篇效果圖項目歡迎技術棧路由版本狀態管理組件字體適配方案適配技能點分析技能點對應的種定義組件方法函數式定義的無狀態組 showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512); 序列文章 從項目中由淺入深的學習vue,微信小程序...
摘要:更多相關介紹請看這特點僅僅只是虛擬最大限度減少與的交互類似于使用操作單向數據流很大程度減少了重復代碼的使用組件化可組合一個組件易于和其它組件一起使用,或者嵌套在另一個組件內部。在使用后,就變得很容易維護,而且數據流非常清晰,容易解決遇到的。 歡迎移步我的博客閱讀:《React 入門實踐》 在寫這篇文章之前,我已經接觸 React 有大半年了。在初步學習 React 之后就正式應用到項...
摘要:希望大家在這浮夸的前端圈里,保持冷靜,堅持每天花分鐘來學習與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點,受到很多朋友的關注,都強烈要求再出多些React相前的面試題,受到大家的邀請,我又找了20多個React的使用者,他們給出了328道React的面試題,由我整理好發給大家,同時發布在了前端面試每日3+1的React專題,希望對大家有所幫助,同時大...
閱讀 3475·2021-11-25 09:43
閱讀 2618·2021-09-22 15:54
閱讀 595·2019-08-30 15:55
閱讀 978·2019-08-30 15:55
閱讀 2006·2019-08-30 15:55
閱讀 1745·2019-08-30 15:53
閱讀 3474·2019-08-30 15:52
閱讀 2044·2019-08-30 12:55