React
文章平均质量分 64
Michael18811380328
常与同好争高下,不与傻瓜论短长。
展开
-
一次前端优化网络请求次数案例
最近线上遇到一个实际问题,当用户点击切换 tab 时,界面某个请求就会特别多。经排查,这个请求不需要在每一个 tab 点击时发送(获取通知列表),现在频繁发送性能比较差,需要改成只发送一次请求。原创 2024-01-26 14:56:21 · 459 阅读 · 1 评论 -
VUE VS React 对比
React 是单向数据流,也就是上层组件通过 state 存储数据,通过 props 传递给下层组件,下层组件不能直接更改上层组件的数据,通常通过回调函数或者 redux 等状态管理工具,改变整体的数据,触发组件的局部更新。React 通常是 jsx 格式,JS 和 HTML 写在一个文件中,严格意义是 JSX,会通过 React 转换成JS代码,样式部分通过外部 css 文件控制(或者 less sass)虚拟DOM,Diff 算法,响应式和组件化,具体的原理不展开讨论,详情参考其他博客。原创 2023-01-31 11:20:56 · 504 阅读 · 0 评论 -
enzyme react 组件测试
enzyme 简单实践enzyme 主要用于 React 组件测试文档链接:https://enzymejs.github.io/enzyme/https://www.npmjs.com/package/enzymeJest 断言配置:https://github.com/enzymejs/enzyme-matchers/tree/master/packages/jest-enzyme环境依赖配置:https://github.com/enzymejs/enzyme-matchers/tree/m原创 2021-11-06 15:27:14 · 336 阅读 · 0 评论 -
DOMException: Failed to execute ‘querySelectorAll‘ on ‘Document‘ is not a valid selector 报错处理
DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’ is not a valid selector 报错处理问题过程今天开发过程中,遇到一个报错信息:react-dom.production.min.js:5058 DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘0bb64d67-b455-4130-9b73-55eda6a1975c8Bu原创 2021-07-16 14:49:59 · 15127 阅读 · 0 评论 -
React ref is null 错误解决
React ref.current is nullReact 中通常使用 state 状态驱动,对于 DOM 尺寸和界面动画等,通常使用 Ref 获取对应的节点并操作。最近遇到一个问题,REF 已经绑定,但是是 NULL,获取不到对应的 DOM 元素,查了资料,具体如下。问题描述国外的网友也遇到类似的问题:I’m working on an agenda/calendar app with a variable time range. To display a line for the curre原创 2020-07-27 18:24:36 · 8346 阅读 · 0 评论 -
Ant design mobile Actionsheet 组件的思考和改进
使用蚂蚁金服的 ant-design UI 组件库的移动端组件时,最近遇到一个问题。具体需要怎样解决呢?原创 2020-03-05 10:22:32 · 1354 阅读 · 0 评论 -
React 的 PureComponent 与 Component 区别
1、官方文档解释在 React 中,Component 和 PureComponent 有一些区别,官方的解释如下:React.Component is the base class for React components when they are defined using ES6 classes:class Greeting extends React.Component {...原创 2020-02-28 10:32:22 · 1261 阅读 · 2 评论 -
package.json scripts 脚本使用指南
package.json scripts 脚本使用指南Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。本文介绍如何使用 npm 脚本(npm scripts)。一、package.json scripts 脚本是什么npm 允许在package.json文件里面,使用scripts字段定义脚本命令。{ "scripts": { "build": "...原创 2020-01-18 13:43:41 · 20984 阅读 · 6 评论 -
Vue和React中生命周期和钩子函数
在Vue中,生命周期和钩子函数是两个重要的概念。通常在开发过程中,不了解这两个概念也可以完成基本的开发任务。学习生命周期有两个目的:解决问题bug,对其他功能的完善和分析(时间节点)。在Vue实例对象创建并完成Dom渲染过程中,不同时期会生成不同的事件,对应着不同的方法和回调函数。以下是八个具体的过程:beforeCreate/created/beforeMount/mounted/...原创 2018-07-09 22:48:58 · 1819 阅读 · 0 评论 -
JS 判断元素父子关系
在工作中遇到一个问题:如果界面元素很多,如何判断当前点击的元素,和某个元素是否有父子关系?下面这个截图中,可以看到有20个DIV在嵌套。如果界面发生一个点击事件,在document 监听到这个点击事件,怎样判断点击位于哪个父元素下面(PS 这个HTML代码写的语义不明确,层级很复杂)查找资料后,有下面几个解决方案原生 JS原生JS中可以使用 dom.contains(dom) 来判断是否...原创 2019-12-20 13:47:37 · 3904 阅读 · 0 评论 -
Create React App 自动创建 SPA 项目
Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.Create React App 是官方推荐的创建SPA的库。不需要任何的配置,直接完成创建打包。项目中直接把s...翻译 2019-11-23 16:29:56 · 342 阅读 · 0 评论 -
fetchMetadata: sill mapToRegistry 报错 create-react-app 执行慢的解决方法
使用 create-react-app 库进行 React 项目初始化时,有时候会显示网络问题造成无法安装。更换网络,关闭代理,仍然无效。执行 create-react-app 会安装相关依赖(react react-dom react-scripts 等)。如果是默认的配置,那么使用国外的 npm 源进行安装,某些情况下网络不良的状态不能安装。把 npm 的源改成国内淘宝的源。更改源后,基本上10秒左右可以安装相关依赖,并初始化 React 项目。原创 2019-11-03 18:37:09 · 466 阅读 · 0 评论 -
React 与 VUE 数据传输对比
我们熟悉的 VUE 可以方便的实现父子组件的传值。刚开始接触 React,传值有一定疑惑,需要注意父子组件的传值,关键是理解 React 的状态驱动,以及子组件向父组件传值的三种方式。父组件传递给子组件概述:React中主要使用组件进行数据传输,组件的数据存储在props和state中,进行自上而下单向数据传递。propsReact核心思想:组件化,页面被切成一个个可以复用的独立的组件。每...原创 2019-10-29 19:30:05 · 465 阅读 · 0 评论 -
propTypes 数据类型检验
propTypes 数据类型检验为什么使用propTypes?在 react 中,不同组件通过props进行单向传值;不同值类型可能造成不必要的麻烦。在 JS 中,不同的数据类型可能存在强制数据类型转换。(string => number)这些问题在写代码的时候不容易发现,如果界面中出现了数据类型的问题,不好找到问题的原因。所以,引入propTypes,对于引入的props数据类型...原创 2018-10-31 20:20:26 · 899 阅读 · 0 评论 -
Slate 框架更新-删除文本节点的 leaves 属性
近期 slate 框架更新了,新版本中文本节点的属性发生变化,其他方法等也有调整。编辑器中设置文字加粗、斜体等字体类型或者链接等会变化。下面简要整理总结一下。text 节点属性改变With the pull request, text nodes no longer have a .leaves property. Instead, each text node has a unique se...原创 2019-05-03 10:48:59 · 774 阅读 · 0 评论 -
报错 Preset files are not allowed to export objects 处理
在使用 webpack 和 babel 编译 react项目时,会报 Preset files are not allowed to export objects 错误。查阅资料,主要是不同版本的 babel 不能兼容使用(版本6和版本7不兼容)。在高级版本中(>7)这样配置package.json"@babel/core": "^7.0.0-beta.40","@babel...原创 2019-06-12 10:40:56 · 561 阅读 · 0 评论 -
超级实用前端知识点和面试题
这是搜集网上的多个前端经典知识点,不断更细中。虽然忙着每天的工作,但是基础知识要熟练掌握不断温习。CSSCSS 常见布局方式【整理】CSS布局方案CSS查漏补缺[布局概念] 关于CSS-BFC深入理解[译]这些 CSS 命名规范将省下你大把调试时间CSS知识总结前端开发规范:命名规范、html规范、css规范、js规范HTTPHTTP状态码(HTTP Status Cod...原创 2019-06-28 11:22:29 · 321 阅读 · 0 评论 -
React-mentions 基本使用
最近需要做一个类似微博评论功能@用户的功能,手写JS的效率很低,所以使用 React-mentions 库实现这个功能。看了一下网上没中文介绍,所以自己看完英文介绍简单总结一个中文介绍。使用1、安装npm 安装npm install react-mentions --saveyarn 安装yarn add react-mentions2、导入The package expor...原创 2019-07-22 17:13:39 · 2893 阅读 · 2 评论 -
React中使用LocalStorage用户登录
localStorage 通常用来存储服务器发送的一些数据或者用户自定义数据。localStorage 中的键值对总是以字符串的形式存储。 (意味着数值类型会自动转化为字符串类型)。与 cookie 相比,localStorage 的存储量较大(cookie只有2k,只能存放字符串),下面介绍如何使用 localStorage 存储、获取、使用数据。与 sessionStorage 相比,存储在...原创 2019-08-05 10:31:22 · 12107 阅读 · 0 评论 -
7月前端知识点总结
今天已经7月31号,简单总结这个月的知识点和个人想法:1、前端架构设计 view-model 分离思想:现在前端使用 React 框架。React 框架通过状态驱动,父子组件之间通过 props 进行数据传递,组件内部使用 state 控制行为。如果是组件自身的行为,控制行为的状态(state)需要存放在当前组件。如果是多个并行组件的行为,控制行为的状态需要放在公共的父组件中。界面状态(sta...原创 2019-07-31 22:01:02 · 214 阅读 · 0 评论 -
Warning: A component is changing an uncontrolled input of type text to be controlled 报错分析
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa).在 React 框架中会报这样的错误,界面效果如下:...原创 2019-04-18 11:27:49 · 16491 阅读 · 6 评论 -
React data grid 使用
博客更新于 2024年,react-data-grid 已经是 7.x.x 大版本,可能配置项已经更新,建议参考官方文档进行调整,https://github.com/adazzle/react-data-grid。大部分的功能会集成在插件中,例如富表格编辑、右键菜单、拖拽功能、行分组管理等。主要功能:界面显示 Excel 预览,可以将一个对象或者 json 格式化成为界面。原创 2019-04-26 16:49:01 · 3444 阅读 · 3 评论 -
React 理念与开发流程
React 理念 静态界面:使用props进行单向数据传递,从顶向下进行数据传递,不需要使用state。 动态界面:使用props进行从上到下传递(repoID),state进行组件内部的数据产生和传递(comment)。简单界面使用从上到下的开发过程,复杂界面使用从下到上的开发流程。尽量减少state使用:确定state的使用位置,确定使用state的组件。 组件化会增...原创 2018-11-24 16:31:54 · 328 阅读 · 0 评论 -
React 状态提升
React 状态提升需求:react是一个数据单向传值的框架,如果子组件不能直接给父组件传值。如果内部多个子组件共同使用相同的数据,并且互相影响。那么可以将这部分共有的数据存放在父组件的属性中,将handleChange作为props传递给子组件。不同子组件会更改福钻进的某个参数,这部分参数会影响其他子组件的行为。确保父组件内部的数据改变会改变子组件的属性。案例:公里和英里进行转换,总数是固...原创 2018-11-24 16:30:00 · 532 阅读 · 0 评论 -
React 受控组件
React 受控组件1.受控组件:在原生的HTML中,input(type=‘text’) textarea select 三个元素的内部的属性可以随着用户的输入变化。2.react 中使用 state 控制属性的变化,将原生的受控组件和 react 中 state 结合。class Text extends React.Component { constructor(props)...原创 2018-11-24 16:28:53 · 487 阅读 · 0 评论 -
propTypes 在 react 中数据类型检验
为什么使用propTypes?在 react 中,不同组件通过props进行单向传值;不同值类型可能造成不必要的麻烦。在 JS 中,不同的数据类型可能存在强制数据类型转换。(string => number)这些问题在写代码的时候不容易发现,如果界面中出现了数据类型的问题,不好找到问题的原因。所以,引入propTypes,对于引入的props数据类型进行检验,避免潜在的问题(...原创 2018-11-18 10:34:34 · 1077 阅读 · 0 评论 -
React Event 事件系统
React事件React 标准化了事件对象,因此在不同的浏览器中都会有相同的属性。组件createClass后创建的是许多方法组成的对象。组件中使用的方法分为React自有的方法与用户定义的方法。其中React自有方法是组件生命周期中的方法,如:render、componentWillUpdate、componentDidMount等。用户自定义的方法可以起符合JS命名规范的方法就可以...翻译 2018-09-22 10:51:13 · 9755 阅读 · 0 评论 -
React中获取元素位置
React框架使用虚拟DOM代替真实的DOM来优化性能,使用props和state进行属性传递。所以说在react中直接获取DOM元素的位置是不合理的(不利于性能)。那么我们可以使用下面的API:document.documentElement.getBoundingClientRectSyntaxoRect = object.getBoundingClientRect()//...原创 2018-09-22 10:45:41 · 20803 阅读 · 0 评论 -
react框架如何优化代码(性能)?
1.减少setstate:setstate会增加render的次数,从而影响性能。如果涉及到与视图层无关的属性,直接当做class实例的属性,而不是state的状态。这样改变这个属性不会造成页面重新的渲染。小结:render需要用到的属性放在state和props中。2.浏览器的repaint和reflow会影响到性能。回流一定是重绘,重绘不一定是回流 重绘(repaint):对元素的背景...原创 2018-08-19 19:33:37 · 1259 阅读 · 0 评论 -
Warning: setState(...): Can only update a mounted or mounting component 报错分析
在react中,前端通常需要向服务器发起异步请求,而在使用react的时候,如果这个组件最初加载的时候就发起这个异步请求,然后在返回结果中进行setState({}),这时候有可能会遇到这个警告:问题内容:Warning: setState(...): Can only update a mounted or mounting component问题分析:通常是因为组件并没有装载上便开始执...原创 2018-08-19 17:47:58 · 365 阅读 · 0 评论 -
React 避免重新渲染-性能优化
React 避免重新渲染 性能优化React框架运行的原理:界面受到数据驱动,state 和 props 的改动会造成界面的改动。其中,state 是自身的属性,props 是父组件提供的参数。如果界面内容很多,很小的数据变化会造成界面的重绘,那么造成性能的浪费。下面从几个方面总结一下如何避免重新渲染。 Statestate是一个组件内部的属性。如果state变化,那么组件必然会 ...原创 2018-12-06 10:14:47 · 4760 阅读 · 0 评论 -
如何学习React框架
2019-1-23 复习:现在关键在于打包工具React 作为2018年市场占有率很高的框架使我们必须懂得的。学习react前需要有基本的 html+css+js 的 基础。如何踏入 React你应该按照以下的顺序进行学习, 而不是跳着学或者同时学习: React npm JavaScript “打包工具” ES6 Routing ...原创 2018-12-22 16:34:25 · 638 阅读 · 0 评论 -
React-Router 学习
React-RouterReact-router 解决问题:UI与URL解耦问题:原始同一个界面内部使用 a 进行跳转,不同界面中使用 # hash 跳转。如果在React框架下,对于SPA,需要获取界面的 hash 再判断界面中加载什么部分(setState),这样效率低下,UI 与 URL 不分离。解决:首先使用 <Link to={path}> 作为超链接,点击后界面URL...原创 2019-04-04 16:26:24 · 395 阅读 · 0 评论 -
Can't call setState (or forceUpdate) on an unmounted component ——React 内存泄漏问题处理
在开发过程中,最近遇到一个错误大致意思:不能对于一个已经卸载的组件上使用setState改变状态,这将会造成应用的内存泄漏。解决方法:在componentWillUNmount 阶段中取消所有的异步任务(例如:SetState操作)。如果在react组件中设置了定制器或者在dom上绑定了事件,卸载组件时未清除定时器或未清除事件,或者在已经卸载的组件中设置setState,都会导致内...原创 2019-03-20 13:54:07 · 2274 阅读 · 0 评论 -
GG-Editor介绍-在线绘图软件
在浏览器中预览编辑复杂图形时,推荐一个 GG-editor 插件。这个插件基于 React 框架,使用方便,可以创建编辑思维导图、流程图、拓扑图等图形。使用 npm 安装# 安装 node.js 或者全局安装 npm # 选择合适的工作目录git clone https://github.com/gaoli/GGEditor.gitcd gg-editornpm instal...原创 2019-03-05 14:33:13 · 12054 阅读 · 32 评论 -
Tooltip API 说明
Tooltip(提示框)是 Bootstrap 常见的组件之一,通常显示按钮的说明文本或者文件名等信息。选项名称类型/默认值Data 属性名称描述animationboolean 默认值:truedata-animation提示工具使用 CSS 渐变滤镜效果。htmlboolean 默认值:falsedata-html向提示工具插入 HTML。如果为 ...原创 2019-03-01 11:29:58 · 828 阅读 · 0 评论 -
前端设置 cookie 用户信息
说明:cookie 用于在本地存储浏览器的信息。当浏览器发送请求时,将cookie共同发送到请求中。服务器可以获取当前用户信息。document.cookie 即可获取界面中的 cookies。cookie 数据类型是字符串,需要将字符串转化成对象的形式获取对应的属性。/** * [setCookie 设置 cookie] * @author Michael An * @DateTi...原创 2019-02-28 11:25:18 · 6338 阅读 · 0 评论 -
React-select 基本功能学习
React-Select在 React 中的选择框主要使用 React-select,下面是React-select 使用说明。点击下面的链接可以查看详细的demo和文档。See react-select.com for live demos and comprehensive docs.Version 2 介绍当前更新到 2.4.1 版本Improvements includ...原创 2019-02-18 17:28:22 · 8787 阅读 · 0 评论 -
CodeMirror安装及使用
Code mirrorcode mirror 是一个代码编辑插件,最终效果如下在常规HTML界面使用<!--选择脚本编码代码--><div class="controls"> <input class="ck-code" type="radio" name="script_once_type" id="script_once_typ原创 2019-01-29 18:02:04 · 6238 阅读 · 0 评论 -
React 高阶 API 学习
React 高阶 API使用方法:react 是React库的入口点。如果你通过 <script> 标签加载React,这些高阶API可用于 React 全局。如果你使用ES6,你可以使用 import React from 'react' 。如果你使用ES5,你可以使用 var React = require('react') 。概览ComponentsReact 组...转载 2018-12-22 17:12:01 · 1103 阅读 · 0 评论