useEffect中return语句的执行时机
摘要：概要:在开发过程中我发现了一个问题,在useEffect中写的return函数并没有执行,于是在此基础上进行了查证和测试. 一、useEffect的使用方法 1.两个参数,第二个参数为空数组 useEffect(()=>{ console.log('111') },[]) 结果:执行一次 2.两个参
阅读全文
posted @
2024-02-19 19:58
Shyno
阅读(1158)
推荐(0) 编辑
【hooks】useState基本原理
摘要：hooks和函数组件 什么是hooks?有些人认为用useState之类的函数组件是hooks,也就是说他们认为hooks是优化的函数组件.可实际上,hooks是新功能,其出现是为了完善函数组件的.useState是hook,useRef是hook.也就是说hooks是这些你在函数组件中使用的功能点
阅读全文
posted @
2022-07-22 16:10
Shyno
阅读(1094)
推荐(0) 编辑
【UMI】路由懒加载
摘要：原生的路由加载是在打包的时候,将所有的组件都打包到一个文件中,然后在首次进入页面的时候就会加载这个包,相当于全量包.接着在你点击路由时去查找相关组件.网络压力全在首屏加载的时候. 路由懒加载:分包,分请求.先分不同的包,然后根据路由从后端请求.加载压力分到每一次路由请求. 在umi中使用路由懒加载
阅读全文
posted @
2021-12-27 17:30
Shyno
阅读(1964)
推荐(0) 编辑
hooks中,useEffect无限调用问题产生的原因
摘要：前言:我在我的另一篇博客中有说道useEffect监听对象或者数组时会导致useEffect无限执行,并给予了解决方案-useEffect无限调用问题 .后来我想从其产生根源去理解并解决这个问题. 原因: 错误代码 const [test, setTest] = useState({ name: '
阅读全文
posted @
2021-12-03 11:11
Shyno
阅读(1403)
推荐(0) 编辑
虚拟DOM
摘要：对于虚拟DOM我觉得要按以下顺序去理解: 1.原生js对DOM元素更新的机制 2.原生js更新DOM元素有什么缺陷 3.怎么去优化更新DOM的方式 4.什么是虚拟DOM 5.虚拟DOM是怎么实现DOM更新的 原生js对DOM元素的更新机制 假如我需要改多个dom元素的内容,写下如下js代码 <bod
阅读全文
posted @
2021-10-18 18:04
Shyno
阅读(48)
推荐(0) 编辑
如何自定义容器组件
摘要：假如我现在想自定义一个类似Form.Item的组件,可以让其作为容器组件,承包一部分逻辑.然后我包裹着的组件还能正常显示. 方案:关键函数React.cloneElement或者React.createElement.如果是直接填入组件而并非动态生成的,主要推荐React.cloneElement,
阅读全文
posted @
2021-08-30 15:40
Shyno
阅读(108)
推荐(0) 编辑
【antd】如何自定义antd组件form表单中Form.Item里的内容组件
摘要：需求:现有一个form表单,但是其中一个元素比较复杂,并不是简单的输入框或者下拉框之类的.但是我又希望能通过form.validateFields().then()去获得它的值,就不需要在当前页面写大量相关的逻辑了. 比如:如图为一个可以增删改的input列表 方案:将其封装成自动绑定值的组件 (1
阅读全文
posted @
2021-08-30 15:12
Shyno
阅读(9761)
推荐(1) 编辑
【antd】表单-单页面多表单提交功能
摘要：需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个form表单 功能点:1.所有报表需通过校验 2.通过校验后提交并带入所有参数 核心问题:form表单的validateFields()返回的是一个promise对象,也就是说他是一个异步方法,对标的的校验必定有异步问题.而
阅读全文
posted @
2021-08-27 16:18
Shyno
阅读(2190)
推荐(0) 编辑
子组件dispatch导致其他页面刷新问题解决
摘要：问题: 现在有一个页面,包含"项目基本要素"和"供应链管控要素"多个组件,其中一个组件有表单级联,通过产品类型的不同选取去调接口获得产品名称的下拉 调接口是通过dispatch实现的. 理想状态:当我调用这个接口时只改变另一个相关下拉框的数据,其他的以及其他同级组件的值不变. 实际结果:当我调用后,
阅读全文
posted @
2021-08-25 18:46
Shyno
阅读(424)
推荐(0) 编辑
antd动态的表格合并(包含排序功能)
摘要：主要是两个步骤, 1.处理接口返回数据,给其添加两个属性,一个是合并行数(列数),一个是当前数据的序号 2.在columns结合antd官网的处理方法合并表格 3.尽可能得减少计算量 数据处理函数 /** * 表单表头合并 * @param list 需要遍历的数组 * @param key 合并依
阅读全文
posted @
2021-08-20 18:29
Shyno
阅读(1028)
推荐(0) 编辑
hooks中,useState异步问题解决方案
摘要：问题描述: 在hooks中,修改状态的是通过useState返回的修改函数实现的.它的功能类似于class组件中的this.setState().而且,这两种方式都是异步的.可是this.setState()是有回调函数的,那useState()呢? 问题点: 1.它异步且没有回调函数 可以看到,i
阅读全文
posted @
2021-01-21 20:28
Shyno
阅读(18120)
推荐(5) 编辑
useEffect无限调用问题
摘要：1.useEfect()的基本用法 const [test,setTest] = useState(1) const init=()=>{ setTest(2) } useEffect(()=>{ init() console.log('kkk',test) },[test]) 红色'test'则是
阅读全文
posted @
2021-01-21 20:24
Shyno
阅读(4599)
推荐(1) 编辑
react-hook简单使用
摘要：一、函数式组件创建 function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />,d
阅读全文
posted @
2020-01-02 15:38
Shyno
阅读(1499)
推荐(0) 编辑
react功能实现-组件创建
摘要：这里主要从两个角度来分析创建一个组件需要怎么做,一个是元素,一个是数据.整理向,大量借鉴,非原创. 1.渲染组件. 我们先明确一点,所有的元素都必须通过render方法来输出渲染.所有,每个组件类最终都必须通过render来输出. 2.创建组件. 目前有三种创建组件的方法: (1)函数式定义的无状态
阅读全文
posted @
2019-06-27 17:21
Shyno
阅读(608)
推荐(0) 编辑
react原理分析--this.state修改引起的重新渲染
摘要：整理向,非原创,目的是整理出浅显易懂的方向性说明. 比如现有 this.state={name:"小明",age:18} 我们说修改组件的状态要用this.setState()来实现.这里有两个问题 1.为什么?我直接用this.state.age=17能不能实现重新渲染? 不能.因为它只是改变了这
阅读全文
posted @
2019-06-27 17:05
Shyno
阅读(4940)
推荐(0) 编辑
react功能实现-数组遍历渲染
摘要：在react中如何将一个数组遍历,并且逐个渲染在页面上? 1.在jsx渲染中,如果这个变量是一个数组，则会展开这个数组的所有成员. var arr = [ <h1>Hello world!</h1>, <h2>React is awesome</h2>, ]; ReactDOM.render( <d
阅读全文
posted @
2019-06-25 17:21
Shyno
阅读(9502)
推荐(0) 编辑
