![](https://img-blog.csdnimg.cn/20191116115049861.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
前端设计诗
WEB后端攻城狮
展开
-
React.lazy和React.Suspense路由懒加载案例展示
1、在这里分享一下react路由懒加载的使用方式,可直接应用import React, { lazy, Suspense } from "react";import { Redirect } from "react-router-dom";import HomeLayout from "../layouts/HomeLayout";import BlankLayout from "../layouts/BlankLayout";const SuspenseComponent = Componen原创 2021-10-08 17:40:53 · 493 阅读 · 1 评论 -
React -JSX中样式的像素值还需要加上px吗?
样式中的像素值当设置 width 和 height 这类与大小有关的样式时,大部分会以像素为单位,此时若重复输入 px,会很麻烦。为了提高效率,React 会自动对这样的属性添加 px。比如:// 渲染成 height: 10px const style = { height: 10 }; ReactDOM.render(<Component style={style}>Hello</Component>, mountNode); 注意,有些属性除了支持 px 为单位的原创 2021-01-25 20:11:29 · 644 阅读 · 0 评论 -
react中使用index作为key值会怎样?
**key**写动态子组件的时候,如果没有给动态子项添加 key prop,则会报一个警告:Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of 'App'. See https://fb.me/react-warning-keys for more information. 这个警告指的是,如果每一个子组件是一个数组或迭代器的话,那么必须有原创 2021-01-25 20:02:46 · 1402 阅读 · 0 评论 -
React 合成事件与 JavaScript 原生事件对比
下面我们从 4 个方面来对比 React 合成事件与 JavaScript 原生事件。1、 事件传播与阻止事件传播浏览器原生 DOM 事件的传播可以分为 3 个阶段:事件捕获阶段、目标对象在这里插入代码片本身的事件处理程序调用以及事件冒泡。事件捕获会优先调用结构树最外层的元素上绑定的事件监听器,然后依次向内调用,一直调用到目标元素上的事件监听器为止。可以在将 e.addEventListener() 的第三个参数设置为 true 时,为元素 e 注册捕获事件处理程序,并且在事件传播的第一个阶段原创 2021-01-16 15:35:22 · 759 阅读 · 0 评论 -
react-setState更新机制--源码解析
1、摘自《深入React技术栈》2、setState 异步更新React 初学者常会写出 this.state.value = 1 这样的代码,这是完全错误的写法。注意 绝对不要直接修改 this.state,这不仅是一种低效的做法,而且很有可能会被之后的操作替换。setState 通过一个队列机制实现 state 更新。当执行 setState 时,会将需要更新的 state 合并后放入**状态队列**,而不会立刻更新 this.state,队列机制可以高效地批量更新 state。如果不通过原创 2021-01-10 10:12:22 · 1165 阅读 · 0 评论 -
‘reactdom‘ is not defined.mountnode is not defined 解决办法
在使用ant-design的组件时,会遇到一下两个错误,这里分享下我找到的解决方法。‘reactdom’ is not defined.`1、在头部引入import ReactDOM from 'react-dom';mountnode is not defined2、替换写法const EditableFormTable = Form.create()(EditableTable);// ReactDOM.render(<EditableFormTable />, mountN原创 2020-10-20 10:04:24 · 4150 阅读 · 2 评论 -
react中巧妙使用动态解构属性
1、使用过ESLint插件的都知道,在Vscode中,如果你取值不用解构的方式,它就会建议你使用解构赋值。2、在项目中,我最常用的就是对象解构的最常用方式。3、这种写法非常基本,所有的取值都可以这样写。就这样,最简单的写出了符合react官方建议的写法和符合ESLint规范。从this.state、this.props中取值 const listType = this.state.listType; // 一般写法 const { listType,fileList,downloadTitle原创 2020-09-05 12:16:10 · 856 阅读 · 0 评论 -
react不同组件中方法监听--eventProxy发布-订阅模式
1、需求问题:在做React-ant-design-mobileAPP项目的时候。当导航栏中的确定重置事件需要刷新列表页。而这两个组件毫无联系。这时候就用到了eventProxy来监听不同组件的方法函数。2、on、one:on 与 one 函数用于订阅者监听相应的事件,并将事件响应时的函数作为参数,on 与 one 的唯一区别就是,使用 one 进行订阅的函数,只会触发一次,而 使用 on 进行订阅的函数,每次事件发生相应时都会被触发。trigger:trigger 用于发布者发布事件,将除第一原创 2020-07-30 22:49:45 · 1372 阅读 · 0 评论 -
react.js判断输入内容是否为空
1、判断输入内容是否为空有很多方法2、这里分享自己的有效代码3、去掉换行符、去掉空格等还是为空的话 if (textContent.replace(/(^\s*)|(\s*$)/g, '').replace(/[\r\n]/g, '') === '') { Toast.offline('内容不能为空', 1); return; }...原创 2020-07-30 22:27:52 · 3555 阅读 · 0 评论 -
react-js将时间字符串转换为时间戳进行时间比较
1、在我们需要进行时间比较时,获取的是字符串形式的时间,需要和时间格式进行比较。这时候我们需要将时间两种形式都转换为时间戳来进行比较。具体时间戳怎么定义的我也不清楚,但百度百科中有这么一句:“时间戳是自 1970 年 1 月 1 日(00:00:00 GMT)至当前时间的总秒数”。按这个定义,编程语言中倒是有一种类似的函数,getTime(),但这个函数返回的是自1970年1月1日到当前时间的总 毫秒数 ,而不是总 和。2、下面是我的方法调用这段代码的目的是将传入时间(字符串形式)与今天日期进行原创 2020-07-02 21:37:54 · 4059 阅读 · 0 评论 -
react使用echarts完整细节实例(后台数据渲染&&布局实现)
1、这是我使用echarts实现的两种图表折线图柱状图2、折线图实现首先导入必须的包,在这之前进行安装npm install echarts --save// 引入 ECharts 主模块import echarts from 'echarts/lib/echarts';// 引入柱状图import 'echarts/lib/chart/line';// 引...原创 2020-04-15 14:25:09 · 1831 阅读 · 0 评论 -
react-ant-design中用到的数组遍历迭代方法forEach和map方法案例区分说明
1、forEach注意的是forEach方法返回的是undefined。实际运用2、map实际应用能不能return一个值就是关键之处。原创 2020-01-17 10:03:31 · 3464 阅读 · 0 评论 -
React监听浏览器返回(页面跳转问题)(关于点击浏览器返回错误界面的问题)
1、React浏览器页面返回错误,点击面包屑没有问题,但是点击浏览器返回键却出现跳转错误。2、首先需要监听浏览器返回事件,然后调用自己写的返回方法3、在组件挂载完成后 ,判断浏览器是否支持popstatecomponentDidMount() { // 监听浏览器点击返回 if (window.history && window.history.pus...原创 2019-12-06 15:07:04 · 9048 阅读 · 1 评论 -
Hooks 与 Class 中调用 setState 有不同的表现差异么?
Hooks 中的 setState 与 Class 中最大区别在于 Hooks不会对多次 setState 进行合并操作。如果要执行合并操作, 可执行如下操作:setState(prevState => { return { ...prevState, ...updateValues }})2、此外可以对 class 与 Hooks 之间 setState 是异步还是同步的表...原创 2019-11-28 15:47:22 · 2452 阅读 · 0 评论 -
React中Form表单事件(input CheckBox radio 取值操作)
1、常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值。2、输入框原创 2019-11-15 09:35:41 · 7057 阅读 · 1 评论