react
关注
分享
扫一扫
Akimoto Hiroshi
这个作者很懒，什么都没留下…
展开
-
npm i 报错项目启动不了解决方法
在另一台电脑低版本node环境跑的react项目，换到另一台电脑node18环境执行npm i时候报错。原创 2023-07-30 12:13:32 · 1269 阅读 · 0 评论 -
react脚手架配置代理总结
如果不写pathRewrite:前端发送请求：后端：控制台：可以看到，请求转发给后端了，但是请求的地址是/api1/students，这就是没有写pathRewrite，导致没有把作为转发请求标识的/api1去掉react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000.原创 2021-09-21 08:29:41 · 329 阅读 · 1 评论 -
React回调函数两种常用方式
1. 回调是高阶函数，需要返回一个函数2. 匿名函数，不用高阶原创 2021-09-20 15:42:04 · 3058 阅读 · 0 评论 -
React prop-types库使用对组件接收到的props进行类型必要性等限制
父组件：import React, { Component } from "react"import Header from "./components/Header"import Footer from "./components/Footer"import List from "./components/List"export default class App extends Component { state = { todos: [ { id: '001', msg:原创 2021-09-20 13:13:43 · 480 阅读 · 0 评论 -
React DevTools failed to load source map: Could not load content for xxx问题解决
运行react项目时候，控制台提示：解决方法：把这两个勾选去掉：原创 2021-09-19 11:54:26 · 1137 阅读 · 0 评论 -
win10下create-react-app命令报错解决办法
原因：现用执行策略是 Restricted（默认设置）解决办法：1.win+X键，使用管理员身份运行power shell2.输入命令：set-executionpolicy remotesigned3.输入”Y“,回车，问题解决。原创 2021-09-18 22:50:55 · 389 阅读 · 0 评论 -
Reac生命周期钩子之getSnapshotBeforeUpdate
点击+1时候：如果我们在getSnapshotBeforeUpdate钩子里返回null，控制台就不会报错了。 那么什么是快照值snapshot value呢？字符串，数组，数字，对象，函数，都可以。比如我们返回一个字符串做为快照值：那么这个值返回给谁了呢？我们先看一下componentDidUpdate这个钩子，它默认可以接收3个参数：前两个参数一个是之前的props，第二个是之前的state：componentDidUpdate这个钩子的第三个参数，就是接收getSnapshotB原创 2021-09-18 14:12:52 · 345 阅读 · 0 评论 -
React17版本新的生命周期
新版本react的生命周期里，这3个生命周期钩子函数前面要加上UNSAFE_， 不然会有警告原创 2021-09-17 22:40:54 · 290 阅读 · 0 评论 -
React生命周期旧版总结
原创 2021-09-16 22:44:35 · 117 阅读 · 0 评论 -
React生命周期旧版之父组件render流程
componentWillReceiveProps这个钩子在第一次初始化接收到props时候不会调用，只有第二次接收到才能调用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.原创 2021-09-16 22:30:50 · 120 阅读 · 0 评论 -
React回调注意事项
class Login extends React.Component { // 初始化状态 state = { username: '', password: '' } // 保存表单数据到状态中 saveFormData = (event) => { console.log(event) } // 表单提交 handleSubmit = (原创 2021-09-14 21:06:28 · 329 阅读 · 0 评论 -
React受控组件和非受控组件
非受控组件我们现在想要实现，点击以后，alert， 但是表单行为不触发提交，不跳转到另一个页面，怎么办？像这种输入类的DOM数据，是现用现取，那就是非受控组件受控组件我们给用户名Input绑定onChange事件，要获得用户名Input的值，所以可以不用Ref， 用event.target.value：输入类的DOM， 随着用户输入，把数据维护到state状态中，等需要用到数据的时候，直接从状态中取出来，这就是受控组件。...原创 2021-09-13 22:38:12 · 87 阅读 · 0 评论 -
React之不要过度使用ref
当要获取的数据和事件源是同一个标签的时候，可以省略ref原创 2021-09-13 22:09:47 · 441 阅读 · 0 评论 -
React绑定事件
onClick = {demo()}这里页面一渲染就会打印文本，并且点击没有效果因为demo函数没有返回值，是undefined所以相当于是把undefined赋值给onClick事件作为回调，所以点击不会执行正确的应该这样写：...原创 2021-09-09 22:52:40 · 103 阅读 · 0 评论 -
React类式组件定义和使用以及注意事项
我们先复习一下之前讲的函数式组件：React类式组件规定，如果要写一个类式组件， 必须要这个类继承一个特定的类React.Component：问题： 实例呢？我们没有主动创建实例啊类式组件调用过程：类式组件render()函数中的this:...原创 2021-09-09 17:17:19 · 222 阅读 · 0 评论 -
JS复习类相关知识
我们把Person类折起来，再创建一个Student类继承Person类：我们在Student类中没有写构造器，这也行吗？是可以的，子类直接用了父类的构造器如果我们想给Student类加一个参数，这样写就接收不到了。为了解决这个问题（子类想拥有自己独有的一些属性），我们就要在子类中写构造器并且调用super方法：注意： super必须放在最前面我们再看一下，Student类上面有没有自己的方法，那它的实例能不能调用父类Person的方法？...原创 2021-09-09 15:15:35 · 87 阅读 · 0 评论 -
React之面向组件编程-函数式组件
函数式组件错误用法：正确写法：还是报错：真·正确写法：改一下名字：函数式组件，我们没有主动调用函数，是react帮我们调用了函数。我们看一下在react函数式组件中， this指的是什么为什么this指的是undefined? 因为我们的jsx是经过babel翻译的，babel翻译代码以后，开启严格模式。严格模式的一个显著特点就是，禁止自定义函数中的this指向window...原创 2021-09-09 00:13:05 · 261 阅读 · 0 评论 -
React之jsx遍历
react里面，数组可以自动被遍历obj不能被遍历{}花括号语法里面只能写js表达式，而不能写js语句这样写：改进：原创 2021-09-08 23:30:45 · 665 阅读 · 0 评论 -
React之JSX语法
原创 2021-09-08 23:17:00 · 77 阅读 · 0 评论 -
React学习笔记创建虚拟DOM两种创建方式
虚拟DOM两种创建方式jsx语法：引入babel的作用：用来把jsx语法转化为js使用js语法创建虚拟DOM为什么jsx香？如果结构要嵌套的话：太繁琐了，jsx可以很好的避免这种嵌套，因为jsx语法可以像直接写html那样：...原创 2021-09-08 22:45:44 · 93 阅读 · 0 评论 -
React中的路由严格匹配 exact属性 和路由重定向 Redirect
react路由严格匹配Redierct重定向Redierct组件写在最下面， 如果上面的Route都匹配不上，那么就走最后的Redierct重定向to的路由：现在输入：http://localhost:3000/默认会跳转到about页面：原创 2021-06-28 16:01:48 · 651 阅读 · 0 评论 -
React页面刷新样式丢失问题及解决方案
我们把路由都变成二级路由，统一加上/dean/路由前缀效果：看着没什么问题，但是一旦刷新页面，样式就废了：我们把路由恢复，看看bootstrap网络请求正常不正常：我们发现bootstrap请求地址是http://localhost:3000/css/bootstrap.css，localhost:3000是本地服务器，webpack里面的webServer配置了public这个文件夹都是localhost:3000/根目录对应的位置我们通过地址请求看看：如果请求了一个不存原创 2021-06-28 15:26:03 · 1978 阅读 · 2 评论 -
React路由(6)-Switch组件的使用
如果有两个path一样的路由，那么这两个匹配的路由对应的组件都会显示：这样的话效率就比较低，如果注册的路由特别多，找到一个匹配项以后还会一直往下找，我们想让react找到一个匹配项以后不再继续了，怎么处理？可以使用Switch组件用Switch组件把其他所有Route组件包裹起来：效果：现在匹配上Home组件，就不会继续往下匹配相同path对应的Test组件了，所以Test…不显示...原创 2021-06-28 11:11:50 · 1052 阅读 · 0 评论 -
React路由(5)-封装NavLink
黄色框内都是重复的，如果很多，那么重复的会更多，所以我们考虑自己封装一个NavLink:这样就可以了，效果不错但是我们想像NavLink那样，把标题通过标签体传过去给组件：那么这个标签体怎么接受呢？我们把title属性去掉：在MyNavLink中打印一下props:接着把组件改为自闭和标签，因为会自动帮我们收集children属性：...原创 2021-06-28 11:05:01 · 133 阅读 · 0 评论 -
React路由(4)-NavLink的使用
NavLink默认会给被点击的元素添加active类名，因为bootstrap默认active就是高亮，所以会有下面的效果：NavLink也可以通过activeClassName属性设置给被点击的元素添加的类的名字，比如：但是效果不太好，因为点击时候会闪，这是因为bootstrap样式权限比较高，所以我们改一下：...原创 2021-06-28 10:20:54 · 829 阅读 · 0 评论 -
React路由(3)-一般组件和路由组件
一般组件Header：路由组件Home：结论：1.路由组件接收路由器传过来的对象，包含history, location, match三个重要属性2.原创 2021-06-28 10:01:06 · 104 阅读 · 0 评论 -
React路由(2)-路由的基本使用
react-router有3种实现： { web，native，any}中我们先学习 react-router-dom。react-router-dom（官方维护的路由器）的理解1 react的一个插件库。 { web，native，any}2 专门用来实现一个SPA应用。3 基于react的项目都会用到此库。小技巧注释JSX： ctrl + shift + /这样包裹会报错：因为分两种路由，要用明确的路由组件去包裹，比如试试这个：这样就可以了接着引入组件：问原创 2021-06-27 23:16:32 · 225 阅读 · 3 评论 -
React路由(1)-前端路由的基石 history
前端路由：路由的基石-history:浏览器的history时一个栈结构：push的操作，可以简单理解为把当前页面对应的路由压入栈而replace，可以理解为，把栈顶的路由，也就是当前页面对应的路由，替换为新的路由：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>前端路由的基石_history</title>..原创 2021-06-27 21:44:09 · 302 阅读 · 0 评论 -
react消息订阅与发布机制
目的：实现组件间的通信工具库： PubSubJS使用方法：原创 2021-06-27 13:33:19 · 152 阅读 · 0 评论 -
react脚手架配置代理总结
react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则：const原创 2021-06-26 11:04:26 · 111 阅读 · 0 评论 -
react脚手架配置代理
首先起两个服务器：分别跑在5000和5001端口，现在我们有数据了接下来我们写react相关的代码：注意这里两个方法中调用接口时候，分别添加了/api1和/api2用以区分不同的接口接着我们在根目录新建一个setupProxy.js文件：简单解释一下，require('http-proxy-middleware')是脚手架自带的，我们只要require然后使用就可以了target配置成'http://localhost:5000'意味着只要发现/api1前缀的请求，就自动转发到'http原创 2021-05-26 22:37:38 · 142 阅读 · 1 评论 -
React样式冲突解决方案
App.jsimport React from 'react'import Hello from './components/Hello/Hello'import Welcome from './components/Welcome/Welcome'const { Component } = React// 创建外壳组件export default class App extends Component { render () { return ( <div&g.原创 2021-05-07 22:30:04 · 1386 阅读 · 2 评论 -
React生命周期小练习getSnapshotBeforeUpdate和componentDidUpdate配合使用
目标： 每隔一秒生成一条新闻<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-05-05 19:24:25 · 871 阅读 · 4 评论 -
React生命周期新
<script type="text/babel"> class Count extends React.Component { constructor (props) { console.log('constructor') super(props) this.state = { number: 0 } } // 初始化渲染 状态更新后调用 render () { con.原创 2021-05-05 15:00:15 · 114 阅读 · 5 评论 -
React生命周期旧
看代码：<script type="text/babel"> class Count extends React.Component { constructor (props) { console.log('constructor') super(props) this.state = { number: 0 } } // 初始化渲染 状态更新后调用 render () { .原创 2021-05-05 10:01:05 · 84 阅读 · 1 评论 -
React Day04 生命周期
React卸载组件我们现在要实现一个效果，就是让文字透明度2秒内从1->0，也就是设置一个200ms的定时器：记住千万不要把定时器写在render方法里面，不然会死循环，因为定时器里面有修改组件opacity的语句，而修改了组件的状态以后又会继续触发render方法，又会继续创建一个新的定时器，这样定时器的数量会暴增如果我们想要react帮我们在组件一加载完毕，react就自动帮我们运行这个start方法的话，可以这样写：这就是componentDidMount生命周期，在组件挂载完毕原创 2021-05-04 22:16:48 · 139 阅读 · 3 评论 -
高阶函数和函数柯里化
对于这个例子，表单里面如果有很多输入框，那么就要写大量的onChange回调函数，并且这些回调函数除了名字其他都差不多，有没有办法可以简化？我们把这些onChange的回调方法统一成一个saveFormData方法，这个方法接收一个dataType形参用来判断输入的是什么类型表单的数据，并且返回一个方法，这个return回来的匿名函数才是react会在onChange触发时候帮我们调用的，并且会传入当前事件源event我们肯定不能在回调里面做打印这么无聊的事情，而是要在这里面保存值到状态：(注意这.原创 2021-05-04 17:17:15 · 259 阅读 · 1 评论 -
React Day04 收集表单数据之受控组件和非受控组件
包含表单的组件分类： 受控组件和非受控组件非受控组件看一个例子：我们再来实现一下点击获取用户名和密码并提示的功能：原生的form表单在点击按钮以后会跳转到action对应的页面，我们不想跳转，可以怎么做？可以使用原生的组织默认事件preventDefault到此我们就写好了一个非受控组件页面中所有输入类的DOM，都是现用现取的这种就是非受控组件受控组件页面中所有输入类的DOM，随着输入，就可以把值维护到state状态里面去，需要用的时候，直接从状态里面取，这就是受控组件原创 2021-05-04 14:41:14 · 105 阅读 · 0 评论 -
React Day04事件处理
不要过度使用ref:什么时候可以不使用ref? 需要操作的数据就在发生事件的DOM上时，可以不用ref:原创 2021-05-04 13:18:46 · 80 阅读 · 0 评论 -
react学习笔记一
1. PWA progressive web application2. registerServiveWorker如果页面是在https协议服务器上，用户打开页面以后断网了，也可以继续使用网页，因为生成了本地缓存3. App.test.js文件---->测试用4. 根目录manifest.json文件：定义了网页如果当作app使用，就可以把它存储在桌面上，对应一个快捷方式，这个快捷方式的图标，网址，主题颜色等等都在这个文件里面配置{ "short_name": "CloseWeUI",原创 2021-04-01 22:04:20 · 77 阅读 · 0 评论