react、antDesigin、dva、mobx
文章平均质量分 70
胖鹅68
熟悉h5,jquery,css2/3,angular,ionic,springMVC,hibernate,spring,struts,mybatis,mysql,oracle,linux,android等技术
了解openfire开源系统,熟悉openfire的IM功能
展开
-
mobx 知识点集合案例(快速入门)
mobx 快速入门原创 2022-07-06 10:11:20 · 271 阅读 · 0 评论 -
自定义react class 代码规范
react class 代码规范约束原创 2022-07-04 14:47:49 · 426 阅读 · 0 评论 -
react input受控组件——函数柯里化
在需要用户大量录入的界面中,如果针对每个受控组件,都定义一个状态管理函数,那“相似代码”会非常多,而且工作量非常大,维护起来非常不方便原创 2022-07-04 14:30:05 · 501 阅读 · 0 评论 -
react懒加载(lazy, Suspense)
文章目录一、参考二、API 介绍2.1 React.lazy()2.2 一、参考react官方文档 —— React.lazy二、API 介绍2.1 React.lazy()React.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 default export 的 React 组件。使用之前:import OtherComponent from './OtherComponent'原创 2022-03-14 09:06:16 · 2929 阅读 · 0 评论 -
react typescript 访问定义不存在的属性或者变量
文章目录一、文章参考二、问题一:如何让编译机能监听到 props和state定义的interface2.1 问题说明2.2. 解决办法 —— 使用泛型传递特性二、问题二:在“基类”中去调用ts没有定义的属性一、文章参考react-slick Previous and Next methodsreact官网——Refs and the DOM二、问题一:如何让编译机能监听到 props和state定义的interface2.1 问题说明在自己写的React项目中,定义了一个基类 BaseCom原创 2021-10-14 12:38:14 · 1148 阅读 · 0 评论 -
create-react-app默认配置进行自定义craco
文章目录一、参考二、问题描述三、 craco 介绍3.1 craco 快速入门3.2 修改antUI主题3.3 添加别名3.4 设置工程的路径3.5 添加代理一、参考github craco 安装antUI在create-react-app使用二、问题描述项目使用 create-react-app 创建项目,UI 使用Ant-UI,现在需要修改antUI的主题,尝试了各种办法,效果不好,最后替换使用 craco 来启动项目三、 craco 介绍3.1 craco 快速入门安装依赖原创 2021-09-06 09:56:34 · 991 阅读 · 1 评论 -
react组件children变化不触发视图更新
文章目录一、文章参考二、props.children2.1 快速入门2.2 函数组件获取children2.3 class组件获取children三、React.Children3.1 API 介绍四、react组件children变化不触发视图更新4.1 问题介绍4.2 问题分析4.3 渲染知识点4.4 解决办法一、文章参考React.Children API 介绍二、props.children它包含组件的开始标签和结束标签之间的内容2.1 快速入门在组件之间,添加元素内容,例如:原创 2021-08-24 17:56:52 · 1457 阅读 · 0 评论 -
SPA (Vue、React)全局事件(keydown、resize)事件添加和删除
问题描述在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多个函数,迅速消耗CPU,浏览器会出现卡顿的情况解决办法Vue生命周期mounted 添加 resize事件Vue生命周期destroy 删除 resize事件案例// 定义逻辑函数fu...原创 2019-07-15 00:02:14 · 16632 阅读 · 0 评论 -
react+eslint+Prettier+escode配置(react编码风格统一)
参考Setup ESLint for React with Prettier, pre-commit and VSCodevscode中eslint不生效原因在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范react eslint自动修复_ESlint+Prettier+EditorConfig+VScode问题描述最近做了一个react项目,起初忙于开发,也没有考虑到eslint和pretty的代码规范,代码比较随意,后面回头看自己的代码,相当不舒原创 2021-05-25 10:34:56 · 1336 阅读 · 2 评论 -
自定义 React懒加载组件、全局定义方法(组件、变量)
react 异步加载组件,并添加到全局方法中文章目录文章参考问题描述解决办法定义引入异步加载的组件将组件定义到全局中使用异步组件加载组件异步组件引入报错`$asyncComponent is not a function`文章参考问题描述在互联网项目中,如果开发SPA,如果将所有的页面打包到一个js中,则会让JS体积变得非常大,第一次加载速度很慢,影响用户体验,因此需要使用异步加载组件的方式在开发中,如果异步组件每次都需要引用,觉得很麻烦,能否放到全局中,提高开发效率,答案是肯定的解决办法原创 2021-04-06 09:22:45 · 1824 阅读 · 0 评论 -
create-react-app 打包设置homepage,资源引入使用相对目录
文章参考CREATE-REACT-APP 创建项目 HOMEPAGE 配置主机名不生效create-react-app项目打的包如何修改资源根目录问题描述前端打包好之后放到springboot工程static目录中,springboot 用了JWT做权限管理,但是访问到打包的index.html文件之后,页面不显示内容,究其原因是因为引入的静态资源不对,返回404,导致页面没有显示出来分析原因根据404,查看静态资源的路径,发现是因为打包使用了’/’ 根目录,springboot 又带了“工原创 2021-01-30 16:24:45 · 3926 阅读 · 0 评论 -
react使用fetch-mock模拟fetch请求的数据
文章目录文章参考什么是 fetchfetch 的优势fetch 与 ajax 的差异fetch-mock安装案例文章参考Jquery ajax, Axios, Fetch区别之我见什么是 fetchfetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象它的API是基于Promise设计的 在nodejs中使用需要引入 node-fetchfet原创 2021-01-06 12:02:14 · 2663 阅读 · 0 评论 -
mobx项目环境搭建
文章参考bilibili入门视频Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled (3:5):中文文档创建一个 mobx 工程(hello world)使用 create-react-app 创建一个mobx-study工程create-react-app mobx-studygit add .git commit -m 'init'npm run eject要执行原创 2020-09-11 09:34:22 · 316 阅读 · 0 评论 -
react antUI 表格table(Each record in table should have a unique `key` prop,or set `rowKey` to an uniq)
需要在 table 控件中指明 rowKey 属性<Table dataSource={this.state.dataSource} columns={columns} loading={false} rowKey={record=>record.id}//在Table组件中加入这行代码/>原创 2020-06-24 16:30:19 · 370 阅读 · 0 评论 -
create-react-app 定义路径别名,默认识别 jsx格式文件
文章参考react-app-rewired github问题描述create-react-app 脚手架将配置文件全部都屏蔽了,让用户使用默认配置就能满足大部分需求,有点类似于“乔布斯”的设计理念;在实际开发中,文件夹的目录嵌套比较深,文件夹也比较多,为了方便管理,就需要设置“绝对路径”使用 react-app-rewired插件解决安装依赖库cnpm install react-app-rewired --save-dev在项目的根目录创建config-overrides.js原创 2020-05-28 17:40:42 · 3602 阅读 · 0 评论 -
create-react-app proxy代理配置
文章参考react中代理异常proxy is not a function官方给出poxy配置文档http-proxy-middleware npm问题描述昨天给同学讲解ajax的时候,使用自己的服务器模拟了一个json数据,但是出现了跨域的问题,然后快速的找到了一些方法,但是最终没有解决,写个博客,方便后续自己学习和使用官方解决办法 package.jsoncreate-react-app 的版本高于 2.0 版本的时候在 package.json 只能配置 string 类型在原创 2020-05-26 17:52:28 · 3874 阅读 · 0 评论 -
react hooks 学习笔记
文章目录使用useState定义和触发state变量useEffect替代生命周期函数useReducer定义mapReduce 转换使用useState定义和触发state变量// useState 是 react 定义的方法import React, { useState } from "react"import "gestalt/dist/gestalt.css"import {...原创 2020-03-23 12:34:43 · 1025 阅读 · 0 评论 -
react antUI 表单验证学习
文章目录问题描述文章参考使用步骤案例知识点问题描述今天做一个表单界面,发现需要对给出相关的提示,期初我是想用antUI中的message组件实现这个功能,个人并不是很喜欢把提示信息放到表单后面或者下面。但是,设计要求把提示文字放在表单后面,没有办法,因此想到了使用antUI中的Form 组件文章参考Form 表单使用步骤创建一个 Login UI组件将Login UI组件作为...原创 2020-01-13 22:35:24 · 761 阅读 · 0 评论 -
react 常见setState的原理解析
首先引入一个栗子class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componentDidMount() { this.setState({val: this.state.val + 1}); ...转载 2020-01-12 21:21:48 · 308 阅读 · 0 评论 -
react的mixin学习
文章参考使用react-mixin插件引入import reactMixin from 'react-mixin'let myObj = { // 定义属性 reactMixin无效,只能识别方法 username:"huangbioa", speak: function(){ alert(this.state.type); }};c...原创 2019-07-15 00:09:36 · 1516 阅读 · 0 评论 -
react-redux 同步学习笔记
文章参考https://www.qiuzhi99.com/movies/react-redux/156.htmlhttps://www.qiuzhi99.com/movies/react-redux/159.htmlhttp://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html安装red...原创 2019-08-11 17:37:22 · 253 阅读 · 0 评论 -
React Dva Redux-saga 学习
文章目录文章参考案例描述定义modeleffects 参数介绍connect关联model和UI组件启动文件引入 model配置文章参考https://dvajs.com/guide/introduce-class.html#reducerJavaScript异步编程:Generator与Async案例描述定义model前面写过redux相关的笔记,与redux做比较来理解mod...原创 2019-08-17 21:58:25 · 360 阅读 · 1 评论 -
React.Fragment 学习笔记
React.Fragment 学习笔记文章参考https://zh-hans.reactjs.org/docs/react-api.html#reactfragment功能解释React.Fragment 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。案例说明import React from 'react'class StudentInf...原创 2019-09-11 20:11:16 · 497 阅读 · 0 评论 -
react 改变子组件props,触发render方法和生命周期函数(二)_触发render方法的三种方式
文章目录知识点案例定义父组件 ParentComp生命周期执行顺序调用setState定义子组件 ParentComp父子组件初始化执行的周期函数父组件改变子组件的props执行的周期函数销毁组件知识点在学习生命周期的,触发生命周期函数调用有三种方式setState 改变状态的值改变props的值使用forceUpdate()方法案例定义父组件 ParentCompimport...原创 2019-09-17 12:48:11 · 6161 阅读 · 0 评论 -
React 表单text、select、checkbox、radio学习
import React from 'react';class FormStudy extends React.Component { constructor (props) { super(props); // 创建引用对象 this.ageRef = React.createRef(); this.state = {...原创 2019-09-17 15:59:50 · 430 阅读 · 0 评论 -
react-router-dom 路由跳转API
文章目录文章参考快速引入路由模块引入react-router-dom依赖包引入BrowserRouter放到最外层根节点BrowserRouter 放在根节点的作用Router 组件引入路由配置react-router-dom模块提供了哪些组件?react-router-dom编程式导航this.props.history.push('/detail');this.props.history.pu...原创 2019-09-17 23:05:55 · 3028 阅读 · 0 评论 -
React 父子组件传递数据
文章目录知识点父组件子组件知识点父组件通过属性props向子组件传递数据子组件通过componentWillReceiveProps周期函数监听props是否发生了改变子组件通过props传递的自定义函数名调用父组件的方法,或者传递参数父组件import React from 'react'import SonComponent from '../components/SonCo...原创 2019-09-18 17:27:57 · 509 阅读 · 0 评论 -
vscode插件快速创建react组件快捷键
文章目录文章参考插件安装快捷键rcc 快速穿件一个组件(使用extends方式)rconst 快速创建一个 constuctorrcep 快速创建一个组件(使用extends方式)rcredux 快速创建一个 redux格式的类模板clg 是 console.log()的快捷键文章参考https://blog.csdn.net/qq_38111015/article/details/896...原创 2019-09-21 18:19:20 · 13050 阅读 · 1 评论 -
react属性验证(propTypes)和默认属性(defaultProps)
文章目录文章参考默认属性 和 属性验证两种语法static 静态属性原型链,类赋值变量prop-types类型配置组件属性基本数据类型和propTypes属性的对应关系引用对象的验证判断是否是某个类型限制属性在特定的数值中限制属性可以是多种类型之一确定类型的数组对象中的value值全为数字验证属性的样式是否符合样式的设置是否必填文章参考git官方文档react中的属性验证默认属性 和 ......原创 2019-09-21 22:20:45 · 576 阅读 · 0 评论 -
create-react-app public文件存放静态资源
文章目录问题描述解决办法问题描述在工作中,想利用ajax访问工程的json文件,发现使用require或者根据路径选择,没有办法准确访问文件。解决办法把静态资源放到 public 文件夹中,启动/打包工程会把public文件夹下面所有的文件和文件夹全部打包放到根目录下,引用的时候去掉public,填写相对的路径...原创 2019-09-23 13:07:45 · 7718 阅读 · 0 评论 -
create-react-app 自定义配置文件
文章目录文章参考暴露配置文件修改端口号eslintConfig 配置关闭eslint静态资源配置请求代理proxy2.x以上的版本,package.json只能添加字符串文章参考create-react-app搭建react项目暴露配置文件在工程中执行 npm run eject删除node_modules文件夹的内容重新安装依赖,执行npm install修改端口号e...原创 2019-09-23 17:24:28 · 2068 阅读 · 0 评论 -
react 路由Redirect组件学习
文章目录文章参考Redirect from 和 to 的关系案例说明文章参考https://reacttraining.com/react-router/web/api/Redirect/from-stringRedirect from 和 to 的关系Switch 是Route 从上到下匹配,如果有一个匹配,后面的就不会再继续匹配了Redirect from属性是地址与fro...原创 2019-09-24 13:15:10 · 3687 阅读 · 0 评论 -
react 路由 登录认证管理
案例描述启动的Root组建import React, { Component } from 'react';import { Provider } from 'react-redux';import route from '../route';import DevTools from './DevTools';import { HashRouter as Router } from '...原创 2019-09-24 14:32:25 · 1944 阅读 · 0 评论 -
create-react-app 支持typescript
文章目录文章参考创建一个支持typescript的项目将 TypeScript 添加到 Create React App 项目React 支持JSX 语法Component泛型类例子事件处理常用 Event 事件对象类型:文章参考Create React App 中文文档 ----添加 TypeScript创建一个支持typescript的项目$ npx create-react-ap...原创 2019-10-03 08:17:30 · 8288 阅读 · 1 评论 -
react 捕获、冒泡事件学习
文章目录文章参考冒泡事件react 默认冒泡事件合成事件实例(stopPropagation)阻止事件冒泡合成事件 和 原生事件混合使用执行结果分析原因解决办法—— 定义外层的事件,使用原生事件定义捕获事件文章参考React 事件冒泡冒泡事件react 默认冒泡事件import React, { Component } from 'react'import PropTypes fr...原创 2019-10-07 23:55:00 · 5890 阅读 · 0 评论 -
react consumer provider 的学习
文章参考react Consumer Provider问题来源最近在看一些项目的时候,有Provider 和 Consumer属性,不了解其中的意思,专门花时间了解了一下使用场景描述跨几个组件传递值或者方法的时候, 如果依赖父子组件传值, 那势必会很麻烦。 好在react提供了Provider 和 Consumer类似于redux的应用场景如何创建 Provider 和 Co...原创 2019-08-10 17:08:58 · 3255 阅读 · 0 评论 -
create-react-app 引入antd UI库
文章参考https://ant.design/docs/react/introduce-cn#安装安装react脚手架cnpm i -D antd引入CSS@import '~antd/dist/antd.css';案例测试import React from 'react';import {connect} from 'react-redux'// 将module.scs...原创 2019-08-10 11:33:54 · 559 阅读 · 0 评论 -
react Input的defaultValue和value属性学习
文章目录文章参考问题描述状态属性受控组件非受控组件为什么要有受控组件?个人理解案例文章参考react 表单问题描述在工作中用antdDesign UI组件写Input表单的时候,发现需要同时设置默认值和用户可以手动输入改变值(修个表的数据),发现搞不清defaultValue和value的作用,能否同时使用?彼此是否会产生影响?编译是否会报错?状态属性表单元素有这么几种属于状态的属......原创 2019-07-15 00:06:40 · 11529 阅读 · 0 评论 -
react加载js文件(react-load-script)
文章参考react-load-script问题描述想利用腾讯地图的定位功能,发现这个功能需要引入单独的JS,但是这个JS文件是依赖地图主要的JS的,而我是使用的import ReactQMap from 'react-qmap';这个控件来加载腾讯地图的,因此没有直接在index.html文件中引入文件,就需要在地图加载完成之后再引入’定位JS库’。代码详解const scriptO...原创 2019-07-15 00:14:02 · 15000 阅读 · 0 评论 -
react constructor函数名和类是一致的
文章参考react-load-script问题描述利用react-load-script加载第三方的JS文件,我担心是否会重复加载,验证了代码之后发现不会。因此,我产生了好奇,使用webpack打包,每次import不都是不同的对象吗,那么不同的对象之间怎么记录各自的内容,让彼此知道呢?解决思路查看了源码之后,是将数据挂载到类中,就是所谓的静态资源,不同的实例实际上是都能够访问的c...原创 2019-07-15 00:14:44 · 410 阅读 · 0 评论