React
文章平均质量分 70
鸭绒
追求起点是大厂。
展开
-
【antd 的Upload组件onChange方法只执行一次file.status===‘uploading‘,走不到‘done‘的原因和解决方法】
111原创 2022-09-23 12:02:27 · 2437 阅读 · 0 评论 -
React路由(V6版本)
文章目录1. 路由介绍2. 路由的使用3. 路由的执行过程4. 编程式导航React路由学习目标:能够说出react路由的作用能够掌握react-router-dom的使用能够使用编程式导航跳转路由能够知道react路由的匹配模式1. 路由介绍现代的前端应用大多数是SPA(单页面应用),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。前端路由功能:让用户从一个视图(页面)导航到转载 2022-03-29 15:37:53 · 938 阅读 · 0 评论 -
React初级知识点
1. setState()的说明setState()是异步更新数据的class App extends React.Component { state = { count:1 } handleClick = ()=>{ this.setState({ count:this.state.count + 1 }) console.log(this.state.count) // 1 } render(){ return ( <span>原创 2022-03-28 16:05:21 · 123 阅读 · 0 评论 -
React中对antd-UI组件库的按需引入+自定义主题的配置
1.安装依赖yarn add react-app-rewired customize-cra babel-plugin-import less less-loader2.修改package.json .... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test",原创 2021-02-08 11:25:16 · 251 阅读 · 0 评论 -
React、Vue在webpack中如何配置代理实现跨域?
解决前后端跨域的方法很多,本篇博客就学习通过在Vue、React中通过配置代理实现跨域。1.ReactReact有两种方式实现代理:1.1 在package.json中配置“proxy”选项{ "proxy":"http://localhost:3000"}假设前端项目运行在8080端口,即http://localhost:8080,而服务器开在了本地的3000端口,即http://localhost:3000,注意:后面别再接具体路径,否则就只能代理该路径了。注意:修改了配置文原创 2021-02-05 20:23:47 · 1306 阅读 · 0 评论 -
React兄弟组件通信:消息订阅-发布机制
在React中,父子组件通信使用props即可实现,而且这是相对方便的。兄弟组件通信虽然也可以使用props通信,但是就麻烦一点,需要多次传递,因此我们学习消息订阅与发布机制来实现兄弟组件的通信。所谓消息订阅-发布机制可以使用生活中的例子来理解:比如:小时候我们经常可以看到有邮递员开着小摩托送报纸,那为什么邮递员会给你送报纸呢?这就需要你先去订阅报纸,比如说你要订阅“南方日报”,这就相当于消息订阅,那么每天当有新的“南方日报”的报纸,那么邮递员就会送达你的住处,而邮递员给你送报纸就相当于发布。下面原创 2021-02-05 11:01:34 · 784 阅读 · 0 评论 -
React/Vue中的key有什么作用?为什么遍历列表时,key最好不要用index?
前端开发中,只要涉及到列表渲染,那么无论是Angular、React还是Vue框架,都会提示或要求每个列表项使用唯一的key,那很多开发者就会直接使用一个唯一的id或数组的index作为key的值,而并不知道使用key的原理。那么这篇博客就会讲解key的作用以及为什么最好不要使用index作为key的属性值。文章目录1.key的作用1.1举例说明2.key最好不要使用数组的index2.1 举例说明1.key的作用key之所以那么重要,是因为React/Vue框架使用了虚拟DOM和Diff算法高效.原创 2021-01-18 23:33:56 · 1587 阅读 · 0 评论 -
React核心功能:Redux状态管理
文章目录1. Redux介绍2.重要概念2.1 Store2.2 State2.3 Action2.4 store.dispatch()2.5 Reducer2.6 store.subscribe()3. 工作流程4.实例:计数器1. Redux介绍React只是一个DOM的抽象层,对于大型项目将会遇到组件之间的通信和代码结构等问题。而Redux将能解决状态管理问题,它用于中大型,数据比较庞大,组件之间数据交互多的情况下使用。但注意Redux的使用,Redux的创造者说过:“如果你不知道是否需要 R原创 2020-12-20 21:09:07 · 268 阅读 · 0 评论 -
React:react-router-dom的学习总结
文章目录1.前言2.路由基础3.如何获取动态路由参数4. 路由传参5. 路由重要属性属性1.前言React的路由是一个独立被分割出去的库,在使用路由前需使用下面命令在项目中引入该库:cnpm install react-router-dom --save2.路由基础咋们由浅入深,先来学习最基础的路由使用。静态路由示例:index.js:import React from 'react'import ReactDOM from 'react-dom'import App from './原创 2020-12-20 13:47:40 · 465 阅读 · 1 评论 -
Vue、React在某些语法上的使用差异
React、Vue都是当前非常热门的前端JS框架,两者的性能都非常好,这篇博客主要是作为笔记,用于区分React、Vue一些功能相同但语法不同的对比,以防止混淆两者。一、Vue、React模板Vue.js 使用了基于 HTML 的模版语法:数据绑定最常见的形式就是使用{{...}}(双大括号)<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split.原创 2020-12-18 11:40:46 · 302 阅读 · 1 评论 -
React 组件的生命周期详解
1.概念:在组件创建、到加载到页面上运行、以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为 组件的生命周期;组件生命周期分为三部分:组件创建阶段:组件创建阶段的生命周期函数,有一个显著的特点:创建阶段的生命周期函数,在组件的一辈子中,只执行一次; componentWillMount:组件将要被挂载,此时还没有开始渲染虚拟DOM。 render: 第一次开始渲染真正的虚拟DOM,当render执行完,内存中就有了完整的虚拟DOM了。 com原创 2020-12-17 09:51:51 · 2331 阅读 · 0 评论 -
React 在函数中绑定this并传参的几种方式
先看看为什么需要绑定this:import React from 'react'export default class BindThis extends React.Component { constructor(props) { super(props) this.state = { msg: '这是默认的MSG', } } render() { return ( <div> <input原创 2020-12-14 11:49:33 · 571 阅读 · 0 评论 -
React核心概念:虚拟DOM、Diff算法、JSX语法
1.虚拟DOM(Virtual Document Object Model)DOM的本质是什么:用JS表示的UI元素DOM和虚拟DOM的区别:DOM是由浏览器中的JS提供功能,所以我们只能人为的使用 浏览器提供的固定的API来操作DOM对象;虚拟DOM:并不是由浏览器提供的,而是我们程序员手动模拟实现的,类似于浏览器中的DOM,但是有着本质的区别;为什么要实现虚拟DOM:什么是React中的虚拟DOM:程序员使用js对象模拟出来的DOM。虚拟DOM的目的:通过对比新旧的两棵模原创 2020-12-14 10:34:10 · 174 阅读 · 0 评论 -
React、Vue非技术层度的对比
ReactJS简介React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。前端三大主流框架Angular.js:出来最早的前端框架,学习曲线比较陡,NG1学起来原创 2020-12-14 09:06:53 · 85 阅读 · 1 评论