useeffect中return语句的执行时机-编程思维

概要:在开发过程中我发现了一个问题,在useEffect中写的return函数并没有执行,于是在此基础上进行了查证和测试. 一、useEffect的使用方法 1.两个参数,第二个参数为空数组 useEffect(()=>{ console.log('111') },[])  结果:执行一次 2.两个参数,第二个参数不为空数组 这里的detailData是一个变量,在整

redux和@reduxjs/toolkit的使用-编程思维

1. 简介: Redux 是一种用于管理应用程序状态的 JavaScript 库。它是一个可预测的状态容器,可以用于编写 可维护和可扩展的应用程序。 @reduxjs/toolkit 是一个官方提供的 Redux 工具包,它可以帮助简化 Redux 应用程序的开发,并 提供常用的 Redux 原生方法,例如创建 Redux store、定义 reducer、处理异步操作等。 2. 用法(同步)

antd ui的from使用问题-编程思维

select 的allowClear失效问题 select的value与allowClear同时使用会导致allowClear失效 解决方法 from包装一层,通过const [form] = Form.useForm(); 实现value Form.Item 内使用自定义组件,获取设置值的方式 Form会传递2个参数 const {onChange,value}=props 在自定义组件

记录:excel导入导出js-xlsx,处理合并-编程思维

效果 前情提要 后端传excel坐标数据,前端自己处理模板,找资料后,选择直接载入xlsx方式。 准备工作 npm i xlsx import * as XLSX from 'xlsx' 方法一:数据处理渲染 导入 提取数据 let reader = new FileReader() //读入file reader.readAsBinaryString(file)

react路由权限v6-编程思维

方法 1.模拟vue的路由拦截(未尝试) 2.进入页面拦截(模拟后台管理系统) route v6常用属性 页面梳理 路由表 公共路由 权限路由 layout(+权限判定) 登录 页面布局 路由表 点击查看代码 //menus.js const menus = [ { key: "0-0", path: "/list", title: "系统首页",

react 事件函数中 this 绑定问题-编程思维

在使用类方式创建组件时,类中定义一个函数,并且绑定到元素的点击事件上,此时这个函数中this指向并不是当前这个组件。 组件代码如下: class App extends React.Component { // 组件数据 constructor() { super() this.state = { m

react jsx 语法解析 & 转换原理-编程思维

jsx介绍 jsx是一种JavaScript的语法扩展(eXtension),也在很多地方称之为JavaScript XML,因为看起就是一段XML语法,用于描述UI界面,并且可以和JavaScript代码结合使用。 比起vue中的模板语法,更加灵活,且不需要学习模板语法中的特定标签,比如:v-if、v-for、v-bind等,而是直接使用JavaScript语法就可以实现这些标签的功能。 为何

react初探(一)之jsx、状态(state)管理、条件渲染、事件处理-编程思维

前言: 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react,目前我的情况是三大框架只会angular和Vue。在实际项目中只使用过一次angular5,其余项目都是使用Vue写的。写篇博客记录一下一些项目中经常使用的技巧在Vue和react中不同的实现方法。  使用JSX指定属性值和嵌入表达式: (1)指定变量作为属性值 <div title={type}>type

react初探(二)之父子组件通信、封装公共组件-编程思维

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景。 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么这一块的代码会看着非常恶心。如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式,然后再在这个页面中将这些组件引入进来,那样我们的代码会看着非常整洁。这样做会需要使用到父子组件之

rematch:当你受不了redux繁琐写法的时候,是时候了解一波rematch了-编程思维

前言: 前段时间学习完react后,刚好就接到公司一个react项目的迭代,顺便巩固一下前段时间的学习成果。项目使用的是redux+react-router,将所有的数据都放在redux中,异步处理数据使用redux-saga。由于是迭代项目,所以代码风格还是沿用之前项目的写法,将所有的数据都放在redux中。写redux的时候心中默默的吐槽了无数次,特别是每次从服务端异步获取数据的时候心中都会

react封装简单的浏览器顶部加载进度条全局组件-编程思维

在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是。。 参考nprogress样式,自己在项目中封装组件,实现简单的顶部加载进度条。效果如下   组件放到components文件夹下,新建progress文件夹 progress/index.jsx import React, { Compone

前端模拟(mock)接口数据(koa)-编程思维

在前后端分离开发项目时,经常会有前后端进度不一致,可能前端界面开发已经完成,就等接口了,如果等接口出来再联调的话时间可能会来不及。 这个时候,前端就可以根据制定好的接口规范和接口文档来mock接口数据,这样等后端接口开发完成之后也不至于太匆忙。 Koa 是一个由 Express 幕后的原班人马打造的 web 框架。这里用它来mock数据、 1. 安装koa npm install koa ko

react 侧栏二级菜单组件-编程思维

侧边栏菜单组件 component 下新建menu文件,menu下建index.jsx和subitem.jsx index.jsx import React, { Component } from 'react'; import {NavLink} from 'react-router-dom' import SubItem from './subitem' export default c

react路由守卫-编程思维

react没有vue那样的路由钩子beforeEach,实现登陆验证。 实现效果:如果没有登陆,就跳转到登陆界面,如果登陆过浏览器存有登陆信息就跳转到所输入的路由界面,如果该路由不存在则跳到404页面。 router文件夹下新建index.jsx和auth.jsx index.jsx  把页面导入进来,配置路由,传入到auth中,auth遍历所有路由。 import React, { Comp

react封装组织架构递归树-编程思维

想用react实现一个递归树,但一些框架里面的有些不符合需求,于是自己写了个,功能比较简单,欢迎批评指正。。 react实现这样一个组织架构递归树,下级部门的收起和展开,点击部门名称时请求接口获取下级部门以及员工等。效果如下: 首先封装左边的组织架构组件organize-tree import React, { Component } from 'react'; export default

从零搭建基于 react 17.x + antd 4.x 的业务组件库-编程思维

一些废话 在前端的飞速发展下,这十年里,前端从美工切图仔演变成如今的大前端,在互联网时代中占据越来越重要的位置。前端工程化,模块化成为前端提效利器。越来越多公司也开始重视,开始搭建适用于公司内部,或者业务线内部的组件库。这篇文章将遵循 是什么 为什么 怎么做 来一起搭建业务组件库,或者太长不想看直接看代码 npm 包主页 【注意】这里用到的是react react-dom antd都是较新版本,

react 逃离闭包陷阱-编程思维

众所周知,JavaScript 中的闭包(Closures)一定是这种语言最可怕的特性之一,即使是无所不知的 ChatGPT 也是这样说的。另外它可能也是最隐蔽的语言特性之一,我们在编写 React 代码时经常会用到它,但是大多数时候我们甚至没有意识到这一点。但是,我们终究还是离不开它:如果我们想编写复杂且性能很好的 React 应用,就必须了解闭包。所以,今天我们一起来学习以下几点: 什么是

react设置多个classname-编程思维

在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式。 1 2 3 4 5 6 比如说有一个固定样式"title": <div className="title">标题</div>, 然后还要一个点击高亮的样式: <div className={index === this.state.active ? "acti