实例讲解react+react-router+redux
前言总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程。
人生不失意,焉能暴己知。 技术说明
功能说明
正文1. React浅谈1.1 组件化? 毫无疑问,当谈到 1.2 JSX语法糖? 使用 ? 比如,下面一个div元素,我们用HTML语法描述为: <div class="test"> <span>Test</span> </div> 如果换做使用javascript描述这个元素呢?最好的方式可以简单的转化为 { type:"div",props:{ className:"test",children:{ type:"span",props:{ children:"Test" } } } } 这样我们就可以在javascript中创建一个 const Div=>({text}){ return { type:"div",props:{ className:"test",children:{ type:"span",props:{ children: text,},} } 接下来再实现这个div就可以直接调用Div('Test')来创建。但上述结构看起来实在让人不爽,写起来也很容易写混,一旦结构复杂了,很容易让人找不着北,于是 const Div =()=>( <div className="test"> <span>Test</span> </div> ); 多么简单明了!!!具体的 1.3 Virtual DOM其实上面已经提到了 我们知道真实的页面对应了一个DOM树,在传统页面的开发模式中,每次需要更新页面时,都需要对DOM进行更新,DOM操作十分昂贵,为减少对于真实DOM的操作,诞生了
每次数据更新之后,重新计算
1.4 函数式编程? 过去编程方式主要是以命令式编程为主,什么意思呢?简单说电脑的思维方式和我们人类的思考方式是不一样的。我们人类的大脑擅长的是分析问题,提出一个解决问题的方案,电脑则是生硬的执行指令,命令式编程就像是给电脑下达命令,让电脑去执行一样,现在主要的编程语言(比如:Java,C,C++等)都是由命令式编程构建起来的。 ? 而函数式编程就不一样了,这是模仿我们人类的思维方式发明出来的。例如:操作某个数组的每一个元素然后返回一个新数组,如果是计算机的思考方式,会这样想:创建一个新数组=>遍历旧数组=>给新数组赋值。如果是人类的思考方式,会这样想:创建一个数组方法,作用在旧数组上,返回新数组。这样此方法可以被重复利用。而这就是函数式编程了。 1.5 数据流在React中,数据的流动是单向的,即从父节点传递到子节点。也因此组件是简单的,他们只需要从父组件获取props渲染即可。如果顶层的props改变了,React会递归的向下遍历整个组件树,重新渲染所有使用这个属性的组件。那么父组件如何获取子组件数据呢?很简单,通过回调就可以了,父组件定义某个方法供给子组件调用,子组件调用方法传递给父组件数据,Over。 2. React-router这东西我觉得没啥难度,官方例子都很不错,跟着官方例子来一遍基本就明白到底是个啥玩意了,官方例子:react-router-tutorial。 完事以后可以再看一下阮一峰老师的教程,主要是对一些API的讲解:React Router 使用教程。 还有啥不明白的欢迎评论留言共同探讨。 3. Redux3.1 简介随着 JavaScript 单页应用开发日趋复杂,JavaScript 需要管理比任何时候都要多的 state (状态)。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据,也包括 UI 状态,如激活的路由,被选中的标签,是否显示加载动效或者分页器等等。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。乱! 这时候 这个时候就把组件分成了两种:容器组件(King或是路由)和展示组件(子民)。
Redux三大部分: 那么也可以看出 , 它主要有提供两个东西: 提供几个Redux的学习地址:官方教程-中文版,Redux 入门教程(一):基本用法 3.2 StoreStore 就是保存数据的地方,它实际上是一个 Redux 提供 import { createStore } from 'redux'; const store = createStore(func); createStore接受一个函数作为参数,返回一个Store对象(首相诞生记) 我们来看一下Store(首相)的职责:
3.3 actionState 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。即store的数据变化来自于用户操作。action就是一个通知,它可以看作是首相下面的邮递员,通知子民(组件)改变状态。它是 store 数据的唯一来源。一般来说会通过 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 个步骤:
工作流程图如下:
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里配置好了。
import { connect } from 'react-redux'; const TodoList = connect()(Memos); 上面代码中 而只是纯粹的这样把Memos包裹起来毫无意义,完整的connect方法这样使用: import { connect } from 'react-redux' const TodoList = connect( mapStateToProps )(Memos) 上面代码中, 3.7 Provider这个Provider 其实是一个中间件,它是为了解决让容器组件拿到King的指令( import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers' import App from './components/App' let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>,document.getElementById('root') ) 上面代码中, 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( <Provider store={store}> <Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={AllMemosRoute}/> <Route path="/todo" component={TodoRoute}/> <Route path="/doing" component={DoingRoute}/> <Route path="/done" component={DoneRoute}/> </Route> </Router> </Provider>,document.body.appendChild(document.createElement('div'))) 这里我们从 4.3 Store
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 创建函数和常量
'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,以便好组织管理。 text => dispatch(addTodo(text)) 就是调用 4.5 Reducers
import { combineReducers } from 'redux'; import todolist from './todos'; // import visibilityFilter from './visibilityFilter'; const reducer = combineReducers({ todolist }); export default reducer;
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,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,...state.slice(parseInt(action.index) + 1) ]; /* * 将doing转为done状态 */ case Change_Doing_To_Done: localStorage.setItem('todos',done: true },...state.slice(parseInt(action.index) + 1) ]; /* * 将done转为doing状态 */ case Change_Done_To_Doing: localStorage.setItem('todos',...state.slice(parseInt(action.index) + 1) ]; /* * 将doing转为todo状态 */ case Change_Doing_To_Todo: localStorage.setItem('todos',...state.slice(parseInt(action.index) + 1) ]; /* * 删除某个事项 */ case Delete_Todo: localStorage.setItem('todos',...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。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |