![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
#咸菜
又菜又咸鱼
展开
-
useEffect
在react中,可以在生命周期中执行副作用操作,在react hooks中,可以在中执行副作用操作。(注:副作用的来源:配置文件、用户的输入、数据库等等,所有的外部交互都有可能产生副作用,副作用会给程序带来安全隐患和不确定性,要尽可能的控制副作用在可控制的范围内发生。)在 react 中, 和 这三个生命周期时候会执行。有两个参数,第一个参数是要执行的函数,第二个参数是一个依赖项数组(根据需求第二个参数可选是否填写)(1).若不写第二个参数,函数操作每次都会执行 (2).若有第二个参数且数组里的变量不为原创 2022-07-07 16:42:02 · 735 阅读 · 0 评论 -
React项目的初始化index.js
React项目初始化原创 2022-06-30 00:28:15 · 371 阅读 · 0 评论 -
react使用antd3.x和4.x按需导入样式
react使用antd在实际开发中还有一些优化的空间,比如无法进行主题配置、加载了全部的 antd 组件的样式(gzipped 后一共大约 60kb)。此时我们需要对 create-react-app 的默认配置进行自定义,这里我们使用 react-app-rewired (4.x:craco)(一个对 create-react-app 进行自定义配置的社区解决方案)。引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.原创 2022-06-28 19:51:08 · 694 阅读 · 0 评论 -
webpack引入模块import 后面加入{}和不加大括号有什么区别
导入默认值引入模块可能有一个 default export(无论它是对象,函数,类等)可用。然后可以使用 import 语句来导入这样的默认接口。导入单个接口给定一个名为 myExport 的对象或值,它已经从模块 my-module 导出(因为整个模块被导出)或显式地导出(使用 export 语句),将 myExport 插入当前作用域。导入带有别名的接口你可以在导入时重命名接口。例如,将 shortName 插入当前作用域。仅为副作用而导入一个模块整个模块仅为副作用(中性词,无贬义含义)而原创 2022-06-28 14:23:17 · 195 阅读 · 0 评论 -
react的antd解析源映射失败
问题:Failed to parse source map: ‘webpack://antd/./components/config-provider/style/index.less’ URL is not supported,也就是react的antd解析源映射失败查看react-script版本:当react-script版本在5.0.0以上使,导入antd方式替换成如下:备注:react,react-dom,react-scripts是react项目的主要依赖...原创 2022-06-27 22:48:38 · 496 阅读 · 0 评论 -
BrowserRouter和HashRouter的区别
1. 底层原理不一样2. url表现形式不一样3. 刷新后对路由state参数的影响4. 备注原创 2022-06-27 17:22:43 · 263 阅读 · 0 评论 -
React v5向路由组件传参
路由链接(携带参数):注册路由(声明接收):接收参数:2.search参数路由链接(携带参数):注册路由(无需声明,正常注册即可):接收参数:获取到search参数是urlencode编码字符串,需要借助querystring解析,vscode提示我用,我就安装dev开发依赖,再import引入,解析后的对象,首个key多了?,用slice函数进行截取3.state参数路由链接(携带参数):to值为对象,当中需要的key有pathname和state注册路由(无需声明,正常注册即可):接原创 2022-06-24 11:09:30 · 463 阅读 · 0 评论 -
React路由v5和v6版本嵌套路由和重定向
react-router-dom需要自行安装,目前的v5和v6版本用法上的主要区别:匹配一个路由包裹组件v5:v6:注册路由指向的组件属性:v5: 值为组件名称,如v6: 值为组件 嵌套路由:v5:需要写父级路由,如v6:不写父级路由,如重定向:v5:用,如:v6:用,值为,如:精准匹配与模糊匹配:v5:默认是模糊匹配,通过在Route配置加exact开启精准匹配v6:默认开启精准匹配,加/*开启模糊匹配v6相关代码:一般路由:(嵌套路由:...原创 2022-06-13 01:03:08 · 759 阅读 · 0 评论 -
解决多级路径刷新页面样式丢失的问题
多级路径刷新页面样式丢失原创 2022-06-10 11:06:40 · 105 阅读 · 0 评论 -
react如何封装组件
react封装组件原创 2022-06-08 00:50:45 · 728 阅读 · 0 评论 -
react路由v6的基本使用与和一般组件的区别
react路由的基本使用以及路由组件和一般组件的区别原创 2022-06-08 00:00:35 · 115 阅读 · 0 评论 -
fetch发送请求
fetch发起网络请求原创 2022-06-07 12:31:12 · 123 阅读 · 0 评论 -
React消息订阅与发布机制
React消息订阅与发布机制原创 2022-06-07 11:09:22 · 615 阅读 · 0 评论 -
React设计state
react中state的设计原创 2022-06-07 00:33:41 · 61 阅读 · 0 评论 -
跨域访问问题
问题背景:客户端3000端口访问服务端5000端口,形成跨域,无法访问,报错如下:Access to XMLHttpRequest at ‘http://localhost:5000/students’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.解决方法1原创 2022-06-01 15:11:31 · 320 阅读 · 0 评论 -
react基础-todolist案例相关知识点
1. 拆分组件、实现静态组件,注意:className和style的写法(还有onClick等驼峰式命名)先用总体的js和css文件进行盛放html文件的部分内容(结构)和css样式结构,分别放于App.jsx和新建App.css(记得App.jsx引入App.css),测试是否正常运行与显示(好的编码测试习惯,不要都拆了,甚至改变了内容再进行测试)(注意拆分的时候要看样式是否用到一些id)根据实际情况拆分组件,新建空的组件文件夹进行建立各个组件,各个组件中包含index.jsx文件和ind原创 2022-05-30 19:09:03 · 80 阅读 · 0 评论 -
js中的static
一、查阅MDN文档:定义:类(class)通过 static 关键字定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。这些通常是实用程序方法,例如创建或克隆对象的功能。静态方法调用同一个类中的其他静态方法,可使用 this 关键字。class StaticMethodCall { static staticMethod() { return 'Static method has been called'; } static anotherSt原创 2022-05-30 15:52:29 · 3126 阅读 · 0 评论 -
回调函数的返回值需设为函数的情况
问题背景:回调函数是调用函数了的返回了结果的,所以该回调函数的返回值应该是函数,在返回函数中进行处理事务,否则没触发动作就会发起处理!如:export class Item extends Component { //鼠标是否移入的状态 state = {mouse:false} //改变鼠标状态 handleMouse = (flag) => { return () => { this.setState({mouse:原创 2022-05-29 23:06:23 · 189 阅读 · 0 评论 -
第三方、自己写的、样式的引入顺序
顺序为:第三方自己写的样式如:import React, { Component } from 'react'import Item from '../Item'import './index.css'原创 2022-05-27 17:12:59 · 87 阅读 · 0 评论 -
react/vue中key的作用、遍历列表key如何设置
一、虚拟DOM中key的作用key是虚拟DOM对象的标识,更新显示时起着重要中用当状态中的数据发生变化,react会根据新数据生成新的虚拟DOM,随后将新虚拟DOM和旧虚拟DOM进行diffing算法比较:1)旧虚拟DOM与新虚拟DOM有相同的key:若虚拟DOM中内容一样,直接使用之前的真是DOM若虚拟DOM中内容不一样,生成新的真实DOM,随后替换页面中的真实DOM2)遍历列表用index作为key可能会引发的问题:若对数据进行:逆序添加、逆序删除等破坏顺序操作,会产生原创 2022-05-16 22:36:50 · 264 阅读 · 0 评论 -
react生命周期(新)
getSnapshotBeforeUpdate()案例:每一秒list多加一条,列表的scrollTop的值动态变化达成手动拉动滚动条时,列表可视区域不再滚动复习: scrollTop、scrollHeight1.scrollHeight含有scroll当然这个高度与滚动相关。读写:只读描述:包括overflow样式属性导致的视图中不可见内容,没有垂直滚动条的情况下,scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的.原创 2022-05-16 10:36:18 · 59 阅读 · 0 评论 -
react的生命周期(旧)
react的生命周期(旧)主要分为三个部分:初始化阶段、更新阶段、卸载组件初始化阶段:由ReactDOM.render()触发-----初次渲染1. constructor()2. componentWillMount()3. render() //必须的4. componentDidMount() //常用,一般在这个钩子做一些初始化,如:开启定时器、发送网络请求、订阅消息更新阶段:由组件内部this.setState()或父组件render触发1. shouldCompon原创 2022-05-11 22:50:52 · 456 阅读 · 0 评论 -
react项目React Developer Tools不可访问此网站问题
在学react时,网页打开react项目时,React Developer Tools不可访问此网站,才发现vscode右键的Open with Live Server和Open in Broswer是有区别的,区别如下:Open in Broswerurl是本地存储的默认路径,访问的是项目保存的本地地址,React Developer Tools不可访问此网站,访问的页面是静态页面,写代码时,在工作区保存了代码之后,还需要另外到浏览器页面进行刷新才能看到最新的效果。Open with Live S原创 2022-04-27 12:27:45 · 1335 阅读 · 0 评论 -
react受控组件
受控组件可以根据输入变化状态跟着改变class Demo extends React.Component{ state = {username:'',password:''} //禁止表单自动提交 handleSubmit = (e)=>{ e.preventDefault(); const {username,password} = this.state原创 2022-04-27 00:14:27 · 794 阅读 · 0 评论 -
react的refs属性
class Demo extends React.Component{ myRef = React.createRef() myRef1 = React.createRef() showData = ()=>{ alert(this.myRef.current.value) } showData1 = ()=>{原创 2022-04-26 18:30:42 · 1728 阅读 · 0 评论 -
react的props属性
props可以从外部像类传递参数,引入prop-types.js文档,利用propTypes进行类型和必要性的限制,利用defaultProps设置默认值,这两个属性应写在类本身上,所以用static定义(不推荐用Person.propTypes,实际开发不简洁),props不可修改 class Magic extends React.Component{ //对标签属性(props)进行类型、必要性的限制 写在类本身上 static prop原创 2022-04-26 00:33:02 · 1578 阅读 · 0 评论 -
js展开运算符...的用途和react中的展开运算符...
一、展开一个数组let arr = [1,2,3]console/log(...arr) //1 2 3二、连接数组let arr1 = [1,2,3]let arr2 = [4,5,6]ler arr = [...arr1,...arr2]console/log(arr) //[1,2,3,4,5,6]三、函数不定参数function sum(...nums){ return nums.reduce((pre,cur)=> { return pre + sur })原创 2022-04-25 18:26:50 · 623 阅读 · 0 评论 -
react组件state核心属性
一 、state属性是什么state是组件对象最重要的属性,值是对象(可以包含多个key-value组合)组件被“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件)二、在组件中如何定义、更改以及组件方法的注意事项利用构造器进行初始化数据,开发过程中不会这么使用注意事项:类中方法开启了局部严格模式,this指向的是undefined,改变其this指针可以利用bind(),执行bind(),返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。详情见MDN中创建绑原创 2022-04-25 15:38:44 · 311 阅读 · 0 评论 -
React类式组件
//1. 创建类式组件 class MyComponent extends React.Component{ //render时放在哪里的? MyComponent的原型对象上 //render中的this指向?MyComponent的实例对象 = MyComponent组件实例对象 render(){ console.log('render中的this',this); ..原创 2022-04-21 00:12:10 · 557 阅读 · 0 评论 -
babel和React函数式组件
React利用babel将jsx转译为js原创 2022-04-17 23:55:34 · 2946 阅读 · 0 评论 -
React学习-01
一、React特点组件化:提高复用性声明式编程:js是命令式编程,告诉计算机一步步地执行、先作什么后作什么;声明式编程代表想要实现什么目的,应该作什么,可是不指定具体怎么作。优点:(1)更加简洁、易懂,利于大型项目代码的维护;(2)无须使用变量,避免了建立和修改状态;虚拟DOM + diffing算法:react在内存中生成和维护一个跟真实DOM一样的虚拟DOM,DOM发生改动时生成新的虚拟DOM,react会把新虚拟DOM与旧虚拟DOM进行diffing算法比较,找出不同放入队列,真实DOM只更新原创 2022-04-15 21:16:42 · 320 阅读 · 0 评论