weixin_44867717的博客

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

编程式导航——通过js方法实现路由跳转 & 获取编程式导航传递的参数-props.location.state & 如果组件不是路由组件-必须使用withRouter包裹原始的组件通过js动态控制路由跳转导入withRouterimport { withRouter } from "react-router-dom";导出时使用withRouter包裹组件export default withRouter(Login);被包裹的组件中可以通过props获取his

动态路由——路由映射的path可以传参进行模糊匹配 & parseInt() 函数可解析一个字符串，并返回一个整数 & filter-返回满足条件的新数组路由的路径可以进行模糊匹配路由映射的path可以是模糊匹配<Route path='/users/:id' exact component={UserInfo}/><Route path='/users/:id/books/:bid' component={BookInfo}/><Link

重定向——Redirect组件必须包裹在Switch组件中 & /-根路径 -需添加exact属性-路径进行精确匹配，不会存在包含关系在JSX中可以直接使用重定向组件实现跳转function Login() { let flag = false; // 如果页面中渲染<Redirect to='/tologin'/> 那么就会重定向到to指定位置 let info = flag? <div>主页信息</div> : <Redirect t

Echarts与后台交互实现真实数据渲染——express模拟后端接口数据 & fetch-更新部分内容 & data数据-json格式-Network/Response中查询实例第一步：在APP.js同层级的component下新建test-echarts.js第二步：在App.js中进行导入import React from "react";import './App.css';import BaseRouter from './component/test-echarts.

http协议put和patch的区别——put推荐更新全部内容，patch推荐更新部分内容 & fetch发送请求基本用法http协议的请求方式：put和patch有什么却别吗get 查询post 添加put（patch） 更新put推荐更新全部内容，patch推荐更新部分内容如果更新的资源不存在，put不会创建一个资源；patch推荐创建一个delete

Switch组件与exact属性——Switch组件-保证中间的路由映射仅仅匹配一个 & exact属性-精确匹配Switch作用：保证中间的路由映射仅仅匹配一个，如果有多个匹配，以最先匹配的为准如果Route组件没有path，会作为默认显示的组件Route组件中exact属性的作用：路径进行精确匹配，不会存在包含关系（比如：/about 路径不会匹配 / 路径）<Switch> <Route path='/' exact component={Home}/>

前端路由（三）-嵌套路由——注意路由跳转和组件嵌套在父路由组件中配置子路由// 父级路由<BrowserRouter> <div> <div>基本路由</div> <ul> <li> <Link to='/home'>主页</Link> </li> </ul> <Route path='/home'

前端路由（二）-基本路由——使用步骤：安包-引包-配置跳转React-router官网：https://reacttraining.com/react-router基本使用步骤路由使用的基本步骤安装依赖包npm install react-router-dom -Dyarn add react-router-dom --dev导入相关组件import { BrowserRouter as Router, Route, Link } from "react-router-d

前端路由（一）——概念 & SPA-页面局部更新 & 前端路由原理-hash 哈希（锚点）变化 & switch()函数-切换执行 & substr() 方法-截取字符串前端路由路由概念如何理解路由？路由器：负责分发消息后端路由（MVC）根据不同的用户请求，响应不同的内容（早期多数都是网页；现在更多的是json数据）前端路由根据不同的用户行为（事件）展示不同的页面效果（组件），组件中需要的数据可能来自于后端，也可能是前端写死的数据

基于后台接口的图书管理案例-（三）-后台接口文档基准路径： http://localhost:3000/获取图书列表数据路径：books请求方式：GET请求参数：无响应结果[{ "id": "4", "name": "红楼梦", "date": 2525609975000}, { "name": "三国演义", "date": 2525609975000, "id": 5}, { "name": "水浒传", "date": 252560997500

基于后台接口的图书管理案例-（二）-全文详解版在前端mydemo文件夹中第一步：在APP.js同层级的component下新建03-grid.js第二步：在App.js中进行导入App.jsimport React from 'react';import './App.css';import TestBox from './component/03-grid.js'function App () { return ( <div> <TestBox

基于后台接口的图书管理案例-（一）-功能解读版数据文件列表界面文件列表图书列表数据加载调用后台接口获取数据，更新state中的数据loadData = async () => { // axios.get('books') // .then(res => { // // 更新状态数据 // this.setState({ // list: res.data // }) // }) let res = a

后台接口调用——几种写法异步编程同步和异步的概念异步的结果需要使用回调函数，不可以使用返回值原生Ajaxfetch api (原生ajax的升级版，支持promise)jQuery的$.ajax()axiosPromisePromise.allPromise.racePromise.resolvePromise.rejectp.thenp.catchp.finallyasync/await...

组件化进阶（四）-02-实例-动态数据优化-基于children属性的弹窗组件封装第一步：在APP.js同层级的component下新建02.js第二步：在App.js中进行导入import React from 'react';import './App.css';import TestBox from './component/02.js'function App () { return ( <div> <TestBox/> <

组件化进阶（四）-01-实例-基于children属性的弹窗组件封装第一步：在APP.js同层级的component下新建01.js第二步：在App.js中进行导入import React from 'react';import './App.css';import TestBox from './component/01.js'function App () { return ( <div> <TestBox/> </div&gt

React基础知识梳理熟悉JSX基础语法本质：在js中写HTML标签JSX基本使用JSX元素可以作为表达式使用JSX元素的本质：不是DOM而是普通对象JSX条件渲染JSX列表渲染JSX样式处理基于JSX的案例实践Tab熟悉脚手架的用法组件化开发如何定义组件函数组件类组件ES6中类的用法ES6中类的继承基于类的组件类组件可以拥有自己的内部状态修改状态必须使用setState方法数据修改是异步的不要频繁调用setStatesetState((

组件props的children属性基本用法——类似于Vue中插槽的用法-组件的props默认有一个children属性，它的值是组件标签中间的内容实例第一步：在APP.js同层级的component下新建07.js第二步：在App.js中进行导入import React from 'react';import './App.css';import BookManager from './component/07.js'function App () { return ( &lt

组件属性的延展操作——…延展操作符-从param对象中解构出若干参数，其余属性赋值给other & react中父子传值实例第一步：在APP.js同层级的component下新建06.js第二步：在App.js中进行导入import React from 'react';import './App.css';import BookManager from './component/06.js'function App () { return ( <div>

点标记的组件用法——类组件可以作为属性的值-写法参考类表达式实例第一步：在APP.js同层级的component下新建05.js第二步：在App.js中进行导入import React from 'react';import './App.css';import BookManager from './component/05.js'function App () { return ( <div> <BookManager/> <

定义类-定义类表达式-定义继承类表达式 extends第一步：新建01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> /* 函数表达式

非受控组件（类似于Vue中ref，实际上就是直接操作DOM）——focus()-把光标定位到uname输入域 & files[0]-第一个上传文件通过ref实例对象current属性可以得到原生DOM对象可以使用defaultValue指定表单的默认值// 构造函数this.textInput = React.createRef();// 标签中<input type="text" ref={this.textInput} />// 使用（current表示DOM元素）

表单详解——…展开运算符-将数组展开指代全数组 & includes-包含 & findIndex-查下标 & splice-删除 & push-添加第一步：在APP.js同层级的component下新建03.js/* 表单操作详解 input、select、textarea三种输入域绑定格式一致*/import React from 'react'class TestForm extends React.Component { construc

表单详解——input、select和textarea处理方式一样& radio & checkbox & 非受控组件-类似于Vue中ref-实际上就是直接操作DOM不同的表单项数据处理（受控组件）input、select和textarea处理方式一样radio <label htmlFor="male">男</label> <input checked={this.state.gender==='male'?true:

综合案例:图书管理（详细版）——setState()-用来更新组件状态，让组件重新渲染&parseInt（）将字符串转换成数据类型&findIndex()当为true时返回索引值&splice() -删除从 index 处开始的n个元素&map-返回处理后的新数组第一步：在APP.js同层级的component下新建02-grid.js和02-grid.css第二步：在App.js中进行导入import React from 'react';import './App

综合案例:图书管理——添加-排重-删除-编辑-禁止修改效果演示静态布局实现表格基本布局通过组件方式实现表格布局效果数据临时填充假数据准备假数据并动态填充页面模拟异步方式获取假数据componentDidMount () { // 一般用于后台接口调用 let list = [{ id: 1, bname: '智能时代' }, { id: 2, bname: '肖申克的救赎' }, { id: 3, bname:

表单基本操作——将状态值绑定到表单输入域中-value & 监听表单输入域的内容变化-onChange受控组件value={this.state.uname}onChange={this.handleUname}<input value={this.state.uname} onChange={this.handleUname} type="text" />handleUname = (e) => { this.setState({ unam

组件间数据传递——父传子-props & 子传父-调用父组件传递过来的函数 & 兄弟间-redux父组件向父子组件传值props子组件向父组件传值组件的函数形式的属性：父组件定义一个函数，通过子组件标签的属性将该函数传递给子组件，子组件接收到该函数后可以进行调用，调用时可以将子组件的数据通过函数实参传递给父组件非父子组件之间传值reduxclass Child extends React.Component { constructor(props) {

基于类组件重构Tab案例并进行完善——控制Tab的切换-修改ID值Tab案例完善基于类方式重构Tab案例并完善业务class Tab extends React.Component { constructor(props) { super(props); this.state = { tabData: [{ id: 1, title: 'tom', content: 'catch jerry' }, {

事件处理——基本用法-onClick & 阻止元素默认行为-e.preventDefault() & 关于事件函数的this处理-使用箭头函数 & 给事件函数传递参数用法-onClick事件绑定方式// handle为函数名称<button onClick={this.handle}>点击</button>class TestEvent extends React.Component { constructor(props) { su

组件状态的修改——componentDidMount组件更新是异步的；setState连续调用，不保证每次调用都会更新页面；通过返回一个新的state的方式来修改原有的状态数据类组件中状态的变化必须使用setState，不可以直接修改状态的修改操作是异步的不建议频繁调用setStateclass AboutState extends React.Component { constructor(props) { super(props); this.state = {

react生命周期——componentDidUpdate-组件更新 & componentDidMount-组件载入–修改状态的值-不可以直接修改，必须使用setState方法 & componentWillUnmount-组件卸载组件的生命周期图解componentDidMount完成组件挂载后触发，类似于Vue中mounted一般用于调用后台接口获取数据并更新state中的数据组件内部状态的修改必须使用setState方法componentWillUnmount

组件的数据来源包含两部分：内部状态state-可修改；父组件传值props-只读组件状态state状态是组件私有的并且完全被组件控制（只有类组件有状态，函数组件没有状态）组件内部状态,state名称固定class TestClass extends React.Component { constructor(props) { // 建议始终添加如下一行代码 super(props); // 组件内部状态,state名称固定 this.state = {

类组件用法——必须使用render方法渲染模板& render方法名称必须固定基于类定义组件类组件必须使用render方法渲染模板；render方法名称必须固定类组件与函数组件的唯一差异：类组件可以拥有自己的状态（数据）类组件也是通过props获取父组件传递的数据class TestClass extends React.Component { // 类组件必须使用render方法渲染模板 // render方法名称必须固定 render () { // let i

类的继承——必须在构造函数的第一行调用super， super函数的作用：调用父类构造函数初始化父类的数据类的继承super表示父类的构造函数，用于向父类传递参数必须在第一行调用super class TypeStudent extends Student { constructor (uname, age, type) { // super表示父类的构造函数，用于向父类传递参数 // 必须在第一行调用super super(