![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 53
YaaLee_
逝者如斯夫,不舍昼夜
展开
-
React-redux-dom解决页面跳转刷新后传值失败的问题
params传值会丢失,可以考虑用state传值// 调制详情 pushDetail = (id) => { // {} pathname // params 刷新会丢失 // state 刷新不会丢失 this.props.history.push({ pathname: "/detail", state: { id原创 2021-08-24 17:54:17 · 217 阅读 · 0 评论 -
React中路由组件及路由表(优化react-router-dom)
路由表文件 RouterConfig.jsimport Home from '../pages/Home'import Login from '../pages/Login'import Detail from '../pages/Detail'// 二级路由import Classify from '../pages/home/Classify'import Car from '../pages/home/Car'import My from '../pages/home/My'impo原创 2021-08-24 17:45:10 · 959 阅读 · 0 评论 -
Axios二次封装拦截器(进度条小案例)
我们以进度条为例,二次封装一个请求过程中自动出现进度条的案例// axios 的二次封装import axios from 'axios'//下面可以是任意插件 我们以进度条为例 二次封装一个请求过程中自动出现进度条的案例import Nprogress from 'nprogress'import "nprogress/nprogress.css"// 刚刚发起请求的时候先拦截一下// 必须在拦截器中return configaxios.interceptors.request.use(原创 2021-08-23 21:31:52 · 324 阅读 · 0 评论 -
react-router-dom中<Route/>的三种使用方式
有三种书写方式1. <Route path="/home" component = { Home }/>2. <Route path="/home" render = { () => { return <Home/> } }/>3.<Route path="/home"> <Home/> </Route>每次路由切换都触发路由对应的组件重新渲染,无论是component属性还是r原创 2021-08-23 16:43:45 · 2226 阅读 · 0 评论 -
React中自定义高阶组件的应用(HOC)
什么是HOC?HOC(Higher-order component)是一种React 的进阶使用方法,只要还是为了便于组件的复用。强调一点,HOC本身并不是 React API, 它就是一个方法,一个接收一个组件作为参数,返回一个增强的组件的方法。什么时候使用HOC在组件挂载前需要在 localStorage 中取出 data 的值,但当其他组件也需要从 localStorage 中取出同样的数据进行展示的话,每个组件都需要重新写一遍 componentWillMount 的代码,那就会显得非常冗余。原创 2021-08-23 16:17:44 · 327 阅读 · 0 评论 -
React中Children的作用
一、引入方式import React, { Component, Children } from 'react'二、APImapChildren.map 第一个参数为this.props.childrenChildren.map 第二个参数为callbackcount – 用来统计当前组件子元素数量only – 用来验证当中子元素是否是唯一toArray – 用来把当前children给转换为数组三、使用场景当一个组件多次使用,有相同的功能,并且还有一些差异的话,会使原创 2021-08-22 11:14:40 · 444 阅读 · 0 评论 -
React组件props设置默认属性
1、通过静态属性设置props默认值class LayOut extends Component { // 通过静态属性设置props默认值 static defaultProps = { isShowBack: true } render() { const { title, children, isSHowFooter, isShowBack } = this.props return ( <原创 2021-08-22 11:07:21 · 1161 阅读 · 0 评论 -
Mock的使用(虚拟接口)
一、为什么使用mockjs在做开发时,当后端的接口还未完成,前端为了不影响工作效率,手动模拟后端接口我们可以使用json文件来模拟后台数据,但比较局限,无法模拟数据的增删改查使用json-server模拟,但不能随机生成所需数据使用mockjs模拟后端接口,可随机生成所需数据,可模拟对数据的增删改查二、mock优点前后端分离,可随机生成大量的数据用法简单数据类型丰富可扩展数据类型在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成 之后,只需要改变原创 2021-08-17 19:18:00 · 2780 阅读 · 0 评论 -
React Context的使用
一、APIReact.createContext:创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Consumer} = React.createContext(defaultValue);Provider(生产者): 用于生产共享数据的地方。value:放置共享的数据。<Provider value={/*共享的数据*/}> /*里面可以渲染对应的内容*/</Provider>Consumer(原创 2021-08-16 17:55:22 · 132 阅读 · 0 评论 -
React中使用proxy配置代理解决跨域问题
方案一、在package.json中配置跨域说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)在package.json中追加如下配置:{ "xxx": {}, ...... "proxy":"https://www.duitang.com/category/"}发送axios请求:axiox.get('http://localhost:原创 2021-08-12 17:29:30 · 1688 阅读 · 0 评论 -
React脚手架中使用Sass
一、安装node-sass$ npm install node-sass --save# or$ yarn add node-sass之后你就可以使用Sass了//可以在js文件中通过import 来引用*.scss文件import './public.scss'//可以在scss文件中通过@import来引用*.scss文件@import './public.scss';注意:这边引用路径的都是相对路径。二、使用绝对路径来引用scss文件在用scss的过程中,你可能想要在src原创 2021-08-07 11:20:25 · 1602 阅读 · 1 评论 -
React-redux-dom解决刷新页面后数据丢失的问题
为什么要存储react-redux-dom中的数据?当页面刷新之后,redux中的数据会回到初始值,之前存储到redux中的数据也就不复存在了。在reducer文件中:let shopDetailInfo = sessionStorage.getItem('data')?JSON.parse(sessionStorage.getItem('data')):{};let defaultState = { data,};export const homeData = (state = def原创 2021-08-05 15:30:28 · 2864 阅读 · 1 评论 -
React-router-dom的使用
文章目录一、todoList案例相关知识点二、github搜索案例相关知识点三、路由的基本使用四、路由组件与一般组件五、NavLink与封装NavLink六、Switch的使用七、解决多级路径刷新页面样式丢失的问题八、路由的严格匹配与模糊匹配九、Redirect的使用十、嵌套路由十一、向路由组件传递参数十二、编程式路由导航十三、BrowserRouter与HashRouter的区别十四、antd的按需引入+自定主题一、todoList案例相关知识点 1.拆分组件、实现静态组件,注意:className、原创 2021-08-03 20:56:54 · 739 阅读 · 1 评论 -
TypeScript全攻略(收藏吃灰必备!)
1、TypeScript 简介1.1、什么是 TypeScriptTypeScript 不是一门全新的语言,TypeScript 是 JavaScript 的超集,它对 JavaScript 进行了一些规范和补充。所以,学习 TypeScript 需要有 JavaScript 的基础。TypeScript 的特性:TypeScript 是 JavaScript 的超集,它可以编译成纯 JavaScript。TypeScript 基于 ECMAScript 标准进行拓展,支持 ECMAScrip原创 2021-08-03 19:26:58 · 775 阅读 · 0 评论 -
虚拟DOM中的key
一、react/vue中的key有什么作用?(key的内部原理是什么?)虚拟DOM中key的作用:简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下:a.旧虚拟DOM中找到了与新虚拟DOM相同的key:(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM(2).若虚拟DOM中内容变了原创 2021-08-03 17:39:15 · 494 阅读 · 0 评论 -
React-persist的使用(数据持久化)
在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等。这个时候,我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储。但是在我们已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数原创 2021-08-02 23:07:24 · 1405 阅读 · 0 评论 -
React中immutable的使用(优化级深拷贝)
一、作用immutable 对象是不可直接赋值的对象,它可以有效的避免错误赋值的问题二、安装$ npm install immutable三、使用在react中,immutable主要是防止state对象被错误赋值。将js对象转成immutable对象import { fromJS } from 'immutable';const defaultState = fromJS({ todoList: []});获取属性state.get('todoList'); // 获取sto原创 2021-08-02 10:26:15 · 1004 阅读 · 0 评论 -
Redux-devtools的配置(开发者工具)
一、安装使用npm或者cnpm或者yarn安装(1) $ npm install redux-devtools-extension(2) $ yarn add redux-devtools-extension二、在store中配置import {composeWithDevTools} from 'redux-devtools-extension'const store = createStore(allReducer,composeWithDevTools(applyMiddleware(t原创 2021-08-01 16:05:06 · 429 阅读 · 0 评论 -
React-redux高阶组件数据共享
案例效果:实现过程:(1).容器组件和UI组件整合一个文件(2).无需自己给容器组件传递store,给包裹一个即可。(3).使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。(4).mapDispatchToProps也可以简单的写成一个对象(5).一个组件要和redux“打交道”要经过哪几步?(1).定义好UI组件—不暴露(2).引入connect生成一个容器组件,并暴露,写法如下:connect(state => ({key:原创 2021-07-31 18:02:47 · 404 阅读 · 0 评论 -
Redux中间件(redux-thunk、redux-promise、redux-saga)
文章目录1、redux中间件简介1.1、什么是redux中间件1.2、使用redux中间件2、中间件的运行机制2.1、createStore源码分析2.2、applyMiddleware源码分析3、常见的redux中间件3.1、logger日志中间件3.2、redux异步管理中间件3.2.1、redux-thunk3.2.2、redux-promise3.2.3、redux-saga1、redux中间件简介1.1、什么是redux中间件redux 提供了类似后端 Express 的中间件概念,本质的目原创 2021-07-30 11:35:08 · 1798 阅读 · 0 评论 -
React中styled-components的使用(样式组件库)
一、官网地址https://www.styled-components.com/二、styled-components1、styled-components 样式化组件,主要作用是它可以编写实际的CSS代码来设计组件样式,也不需要组件和样式之间的映射,即创建后就是一个正常的React 组件,并且可以附加样式给当前组件。 优化react组件2、在一个组件内会将结构、样式和逻辑写在一起,虽然这违背了关注点分离的原则,但是这有利于组件间的隔离。为了顺应组件化的潮流3、使用styled-compone原创 2021-07-29 21:51:39 · 1499 阅读 · 0 评论 -
React中classnames库
由于react原生动态添加多个className会报错import style from './style.css'<div className={style.class1 style.class2}</div>想要得到最终渲染的效果是:<div class='class1 class2'></div>引入classnames库,安装:npm install classnames --save使用:import classnames from原创 2021-07-29 12:06:39 · 517 阅读 · 0 评论 -
React中的Hooks
Hooks 是 React v16.8 的新特性,可以在不使用类组件的情况下,使用 state 以及其他的 React 特性;Hooks 是完全可选的,无需重写任何已有代码就可以在一些组件中尝试 Hook于React v16.8发布,100%向后兼容,Hooks 不包含任何破坏性改动.React 也没有计划移除 class 类组件,而且 Hooks 不会影响对 React 的理解,它为已知的 React 概念提供了更直接的 APIHooks解决的问题函数式组件不能使用state:函数式组件比类组原创 2021-07-28 21:38:27 · 800 阅读 · 1 评论 -
React生命周期
文章目录1. 挂载卸载过程1.1.constructor()1.2.componentWillMount()1.3.componentDidMount()1.4.componentWillUnmount ()2. 更新过程2.1. componentWillReceiveProps (nextProps)2.2.shouldComponentUpdate(nextProps,nextState)2.3.componentWillUpdate (nextProps,nextState)2.4.componen原创 2021-07-28 10:58:50 · 139 阅读 · 0 评论 -
React脚手架配置代理(Proxy)
react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写 setupProxy.js 配置具体代理规则:c原创 2021-07-27 22:34:36 · 458 阅读 · 0 评论 -
Webpack搭建ES6开发环境和React环境
1、什么是Webpack本质上,Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 Webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个 bundle。webpack 解决什么问题?Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具,打包的思路是:遍历源文件→匹配规则→打包,这个过程中做不到按需加载,即原创 2021-07-26 11:39:03 · 257 阅读 · 0 评论 -
React中的Redux
文章目录Redux1、什么是Redux2、配置Redux3、TodoList案例4、Redux-thunk中间件5、Redux中间件执行原理6、react-redux7、数据持久化7.1、基本用法7.2、整合react-reduxRedux1、什么是ReduxRedux 是React生态中重要的组成部分。很多人都说,简单的应用可以不用此工具。但是我个人认为,中小型应用使用的话,可以使文件结构更加规范,代码可读性更强。因为React提出将展示组件与容器组件分离的思想,所以降低了React 与Redux之原创 2021-07-26 20:52:22 · 3206 阅读 · 2 评论 -
React全家桶(收藏吃灰必备!)
文章目录ECMAScript61、ES6简介1.1、什么是ES61.2、ECMAScript和JavaScript的关系1.3、为什么要学习ES6?2、ES6环境搭建2.1、前期准备2.2、ES6环境搭建3、let与const3.1、let命令3.2、const命令4、ES6解构赋值4.1、解构赋值概述4.2、解构模型4.3、数组的解构赋值4.4、对象的解构赋值4.5、解构赋值注意事项4.6、解构赋值的用途5、字符串、函数、数组、对象的扩展5.1、模板字符串5.2、字符串扩展方法5.3、函数的扩展5.4、数原创 2021-07-26 20:49:34 · 2314 阅读 · 2 评论 -
Mobx的使用
文章目录1、Mobx简介2、Mobx的使用2.1、环境搭建2.2、Mobx基础操作2.2.1、observable可观察的状态2.2.2、 observable装饰器2.2.3、对 observables 作出响应3、在react项目中使用mobx3.1、环境搭建3.2、案例核心代码1、Mobx简介2、Mobx的使用2.1、环境搭建创建项目mkdir mobxdemocd mobxdemonpm init -y安装依赖cnpm i webpack webpack-cli -Dcnpm原创 2021-07-26 11:35:01 · 2289 阅读 · 0 评论 -
React脚手架public文件介绍
public文件夹下index.js<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- %PUBLIC_URL%代表public文件夹的路径 --> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <!-- 开启理想视口,用于做移动端网页的适配 --> &l原创 2021-07-25 11:19:08 · 665 阅读 · 0 评论 -
React中高阶函数和函数的柯里化
一、高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。常见的高阶函数有:Promise、setTimeout、arr.map()等等二、函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。function sum(a){ return(b)=>{ return (c)=>{ ret原创 2021-07-21 15:36:34 · 180 阅读 · 1 评论 -
React中受控组件和非受控组件
一、受控组件受控组件就是可以被 react 状态控制的组件在 react 中,Input textarea 等组件默认是非受控组件(输入框内部的值是用户控制,和 React 无关)。但是也可以转化成受控组件,就是通过 onChange 事件获取当前输入内容,将当前输入内容作为 value 传入,此时就成为受控组件。好处:可以通过 onChange 事件控制用户输入,使用正则表达式过滤不合理输入。双向数据绑定就是受控组件:受控组件DOM操作、双向数据绑定import React,{Compone原创 2021-07-21 14:34:20 · 685 阅读 · 0 评论 -
React组件三大属性之props
一、理解1、每个组件对象都会有 props(properties 的简写)属性2、每组标签的所有属性都保存在 props 中二、作用1、通过标签属性从组件向外组件内传递变化的数据2、注意:组件内部不要修改 props 数据简化后代码://创建组件class Person extends React.Component{//constructor构造器可写可不写 constructor(props){ //构造器是否接收props,是否传递给super,取决于:是否希望在构造器中通过t原创 2021-07-20 19:56:05 · 169 阅读 · 0 评论 -
React组件三大属性之refs
一、理解Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Ref 转发是一项将 ref 自动通过组件传递到子组件的技巧。 通常用来获取 DOM 节点或者 React 元素实例的工具。在 React 中 Refs 提供了一种方式,允许用户访问 DOM 节点或者在 render 方法中创建的 React 元素。二、使用1、回调函数形式的ref☆这种方式是最常用的,如果 ref 回调函数是以内联函数的方式定义的,在更新过程中它会被执行两次,第一次传入原创 2021-07-20 22:40:33 · 179 阅读 · 0 评论 -
React组件三大属性之state
一、理解state 是组件对象最重要的属性,值是对象(可以包含多个 key-value 的组合)组件被称为“状态机”,通过更新组件的 state 来更新对应的页面显示(重新渲染组件)效果展示:最初代码(底层)://1.创建组件class Weather extends React.Component { //构造器调用几次? ———— 1次 constructor(props) { console.log('constructor'); super(props)原创 2021-07-19 22:55:59 · 156 阅读 · 0 评论 -
ajax、axios、fetch的区别
ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。JQuery ajax 是原创 2021-07-12 20:47:52 · 101 阅读 · 0 评论 -
React中定义组件
函数式组件1.准备好一个容器<div id="test"></div>2.创建函数式组件function MyComponent(){ console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> }3.渲染组件到页面ReactDOM.render(<MyComponent/&原创 2021-07-04 20:25:38 · 250 阅读 · 2 评论 -
jsx语法规则
案例1. 准备好一个容器<div id="test"></div>2. 准备数据const myId = '1'const myData = 'Hello World'3.创建虚拟DOMconst VDOM = ( <div> <h2 className="title" id={myId.toLowerCase()}> <span style={{color:'white',fontSize:'29原创 2021-07-04 16:45:02 · 187 阅读 · 0 评论