weixin_44867717的博客

Todos接口重构——批量清空任务- axios.delete(‘todos/’ + item.id)src/store/ActionCreator.jsexport const clearAllActionAsync = () => { return async (dispatch) => { // 清除所有已完成任务 let list = await axios.get('todos') list.data.forEach(item => {

Todos接口重构——状态切换操作接口对接-axios.patch只更新传递数据-patch请求方式需要提供url的id，无法批量更新；axios.put会更新全部控制单个条目的状态更新src/store/ActionCreator.jsexport const toggleItemActionAsync = (id) => { return async (dispatch) => { // 更新单个条目的状态 let todo = await axios.get(

Todos接口重构——更新操作接口对接-通过函数防抖的方式控制接口调用频率输入内容发生变化时调用接口进行更新src/store/ActionCreator.jsexport const editEtitleActionAsync = (id, value) => { return async (dispatch) => { let res = await axios.put('todos/' + id, { etitle: value }) //

Todos接口重构——条件过滤接口对接-根据筛选条件，获取不同的数据列表 & let res = await axios.get(‘todos’ + param)根据路由参数筛选后台列表数据src/views/container/FooterContainer.jstoggleType: (e) => { // 切换筛选条件 let type = ownProps.match.params.filter if (!type) { return } c

Todos接口重构——删除任务接口对接-let res = await axios.delete(‘todos/’ + id)删除异步Actionsrc/store/ActionCreator.jsexport const deleteTaskActionAsync = (id) => { return async (dispatch) => { let res = await axios.delete('todos/' + id) // 刷新列表 let

Todos接口重构——添加任务对接接口-let res = await axios.post(‘todos’, {etitle: etitle })产生一个异步actionsrc/store/ActionCreator.jsexport const addTaskActionAsync = (etitle) => { return async (dispatch) => { // 调用接口，添加任务，调用后台接口添加任务 let res = await axios.

Todos案例对接后台接口——模拟接口-json-server & 配置axios基准地址-axios.defaults.baseURL模拟后台接口安装包：yarn global add json-server自动生成CRUD接口启动服务json-server ./todos.json --port 8888./todos.json——数据文件路径页面模拟数据-效果对接后台接口数据-列表展示src/store/ActionCreator.jsexp

Redux处理异步任务——异步数据流中间件： redux-thunk & action是一个函数，函数内部处理异步任务异步处理介绍-异步数据流中间件： redux-thunk注意：默认情况下，redux自身只会处理同步数据流。但是，如果涉及到异步操作，就应该使用 redux-thunk 这种的中间件，来处理异步数据流！！！// 使用了 redux-thunk 中间件以后，我们需要修改 action// 没有使用 redux-thunk 时候，处理同步数据的action：const

常用中间件——redux-logger包-展示所有数据记录日志中间件：yarn add redux-loggersrc/store/Store.js// 导入日志中间件import logger from 'redux-logger'createStore(reducer, applyMiddleWare(logger))Redux调试中间件redux-devtools-extension为了保证已有中间件依然可以使用，需要安装一个包import { composeWithDe

redux 中间件的基本使用——next表示原始的dispatch & getState表示当前Store中的所有最新数据导入redux中的一个函数：applyMiddleware将创建好的中间件或者第三方的中间件，作为参数传递给 applyMiddleware将 middlewares 传递给 createStore，作为它的第三个参数src/store/Store.jsimport { applyMiddleware } from 'redux'// 定义一个中间件const

Redux中间件——基本概念中间件概念分析redux 中间件采用的是：洋葱模型中间件实际上就是扩展了 store.dispatch注意：使用中间件后，我们调用 store.dispatch 就不再是 redux 默认的dispatch了，而是，中间件包装后的dispatch中间件的执行时机：// 没有中间件： dispatch 直接将 action 传递给 reducerstore.dispatch ----> reducer// 有了中间件： dispatch 没有

组件Todos获取路由信息的两种方式——父组件传递路由参数给容器组件 & 使用 withRouter 高阶组件包装容器组件（通用）方式一：通过父组件 App 来传递路由参数给TodoList容器组件// App 组件：let type = props.match.params.filter<List type={type}/>方式二：使用 withRouter 高阶组件包装 TodoList容器组件（通用）import { withRouter } from '

基于路由进行任务列表过滤——三种路由重定向方式：path="/:filter?" & exact path="/" render={() => <Redirect to="/all" & exact from=’/’ to=’/all’需求：根据当前 URL 路径，来展示不同的任务http://localhost:3000/all 表示：要渲染所有任务http://localhost:3000/will

路由链接高亮——NavLink标签-自带高亮类名 & 通过activeClassName 来修改默认的高亮类名 & 通过activeStyle 来动态添加选中的样式NavLink 相当于 Link 组件，但是，它自带高亮类名可以通过 activeClassName 来修改默认的高亮类名也可以通过activeStyle 来动态添加选中的样式src/views/Footer.js<NavLink activeClassName="todos-active" to="/all"

Redux配合路由使用——路由基本配置-Switch标签和和Redirect标签-路由重定向 & exact-路由精确匹配 & 根据路由参数进行列表筛选路由基本配置安装路由组件yarn add react-router-dom使用Provider包裹Routersrc/App.jsimport { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'<Provider store={s

统一管理Action类型 & Reducer业务方法拆分 & 状态持久化统一管理Action类型新建src/store/ActionTypes.js/* 统一管理Action的类型*/export const TODOS_ADD = 'TODOS_ADD'export const TODOS_DELETE = 'TODOS_DELETE'export const TODOS_TOGGLE_ITEM = 'TODOS_TOGGLE_ITEM'export const TOD

任务列表过滤——清空已完成任务-深拷贝-JSON.parse(JSON.stringify(obj)) & filter()-过滤数组清空已完成任务src/views/Footer.jsclearAll: () => { // 清除已完成任务 let action = Actions.clearAllAction() console.log(action) dispatch(action)}在src/store/ActionCreator.js中/* A

任务列表过滤——实现列表的筛选-从唯一的数据源当中获取状态数据即可 & 过滤当前的列表结果-给data传值state实现列表的筛选src/views/List.jsfunction filterList (state) { // 过滤列表数据 return state.todos.filter(item => { if (state.currentType === 'all') { // 全部列表 return true } else

任务列表过滤——从Store中获取数据并加工处理再传递给组件的Props计算剩余任务总数src/views/Footer.jsrender(){ let {num,currentType} = this.props}// 从Store中获取数据并加工处理再传递给组件的Propsfunction mapStateToProps (state) { let num = 0 state.todos.forEach(item => { if (!item.done)

编辑任务——修改任务名称-onChange-会在域的内容改变时发生 & onBlur-失去焦点时发生编辑第二步：修改任务名称src/views/List.js<input data-id={item.id} value={item.etitle} onChange={editEtitle} onBlur={showEditInput} className="edit" />let {toggleAll,showEditInput,editEtitle} = this.pr

编辑任务——e.currentTarget-当前触发事件的元素（有可能是冒泡事件） & e.target-事件源 & 获取焦点-onBlur & 双击鼠标-onDoubleClick编辑第一步：显示输入框src/views/List.js<div data-id={item.id} className="view" onDoubleClick={showEditInput}><input data-id={item.id} onBlur={showEd

控制全选状态——arr.every()-判断数组中是否所有元素都满足条件，如果都满足就返回true，否则返回false & every()-一假即假 & some()-一真即真src/views/List.jslet {toggleAll} = this.props<label onClick={toggleAll.bind(null, isAll)} htmlFor="toggle-all">全部标记为完成</label>toggleAll: (isAl

单个任务状态切换——根据id把对应done状态取反 & parseInt() 字符串转数字单个条目状态的切换src/views/List.jslet {toggleItem} = this.props <input data-id={item.id} checked={item.done} onChange={toggleItem} className="toggle" type="checkbox"/>toggleItem: (e) => { // 控制

删除任务——事件绑定 & action分发 & 数据变更-根据索引删除数组元素-splice(index, 1)事件绑定；action分发；数据变更在src/views/List.js中事件绑定<button data-id={item.id} className="destroy" onClick={deleteTask}></button>action分发import * as Actions from '../store/ActionC

添加任务——绑定事件 & 发送action-回车键-e.keyCode === 13 & 变更数据-最大值Math.max.apply（）-深拷贝JSON.parse(JSON.stringify(obj)) & 清空表单绑定事件；发送action；变更数据1、绑定事件src/views/Header.jsrender () {//定义添加任务 let { addTask } = this.props return ( <div>

基于Redux重构Todos——准备数据源-store文件 & 将数据源提供给组件-props接收准备数据源src/store/Store.jsimport { createStore } from 'redux' import reducer from './Reducer.js'// todos初始化数据let initValue = { todos: [{ id: 1, etitle: '写代码', done: false, isEdit

Todos案例-单页面-详细代码src/views/Todos.js/* Todos的模板*/import React from 'react'import 'todomvc-common/base.css'import 'todomvc-app-css/index.css'class Todos extends React.Component { constructor (props) { super(props) this.state = { isAl

组件化拆分——Footer底部筛选菜单组件-过滤列表数据src/views/Footer.jsimport React from 'react'class Footer extends React.Component { constructor (props) { super(props) this.state = { currentType: 'all', } } handleFilter = (e) => { // 更新当前的筛选条

组件化拆分——添加任务功能 & 删除和单选功能 & 全选按钮功能 & 编辑任务功能src/views/List.jsimport React from 'react'class List extends React.Component { constructor (props) { super(props) this.state = { isAll: false } } handleDelete = (id) =>

组件化拆分——Header标题组件 & 回车键的数字标识是13-e.keyCode === 13src/views/Header.jsimport React from 'react'class Header extends React.Component { constructor (props) { super(props) this.state = { etitle: '' } } handleEtitle = (e) => {

组件拆分详细代码——入口文件-App.js & TodoApp.js-父组件1、src/App.jsimport React from 'react';import './App.css';import TodoApp from './views/TodoApp.js'function App() { return ( <div> <TodoApp/> </div> );}export default Ap

组件化拆分——react中进行封装组件 & 入口组件 & Header 标题组件 & List内容列表组件 & Footer底部筛选菜单组件把整个复杂的页面拆解为粒度更细的小组件TodoApp 案例入口组件Header 标题组件List 列表组件Footer 筛选菜单组件<section className='todoapp'> <Header/> <List/> <Footer/>&

Footer列表过滤——清除所有已完成任务-重新赋值清除所有已完成任务<button onClick={this.handleClearAll} className="clear-completed">清除所有已完成任务</button> handleClearAll = () => { // 清除所有的已完成任务 let todos = this.state.todos.filter(item => { return !item

Footer列表过滤——打印数据信息-e.target.dataset & 更新当前的筛选条件进行显示过滤不同的任务类型列表<ul onClick={this.handleFilter} className="filters"> <li> <a data-id='all' className={currentType==='all'?'selected': ''} href="#/">全选</a> </li> &

Footer列表过滤——计算剩余的没有完成的任务数量结构<footer className="footer"> <span className="todo-count"> 剩余<strong> { this.handleCount() } </strong>个任务 </span> <ul onClick={ this.handleFilter } className="filters"> <li>&l

修改任务——显示焦点-e.persist() 异步访问事件属性（如在setTimeout内） & 输入框内容根据id同步进行更新变化显示进入编辑状态和离开编辑状态<div className="view" onDoubleClick={this.handleDoubleClick.bind(this, item.id)}>离开编辑状态<input onBlur={this.handleDoubleClick.bind(this, item.id)} classN

切换任务状态——点击每个条目的时候，需要把数据中的状态属性进行取反控制单个条目的选中控制结构 //默认没选中 checked={true}<input checked={item.done} onChange={this.handleCheck.bind(this, item.id)} type="checkbox"/>方法handleCheck = (id) => { // console.log(id) // 点击每个条目的时候，需要把数据中的done

删除任务—— 查找要删除的数据索引-item.id === id & 根据索引删除数组的元素-arr.splice(index, 1)更加id删除数组中的数据结构<button className="destroy" onClick={this.handleDelete.bind(this, item.id)}></button>方法handleDelete = (id) => { // 控制删除操作 let todos = [...this.s

添加任务——回车事件-回车键的数字标识是13 & e.keyCode === 13 & 自带光标定位-autoFocus监听回车事件<input ref={this.titleRef} onKeyUp={this.handleKeyup} value={etitle} onChange={this.handleEtitle} className="new-todo" placeholder="你想做什么?" />处理添加业务handleKeyup = (e) =

Todos案例——业务分析 & 基本布局业务分析todos页面模板下载项目压缩包后，使用时，需要先安装依赖包todomvc-common/base.csstodomvc-app-css/index.cssnpm installyarn intall1、直接打开index.html2、本地启动打开实现基本布局安装依赖包修改模板的相关标签结构，从而符合JSX语法yarn add todomvc-common todomvc-app-css导