react
尼古拉斯二嘎
记录工作中的点点滴滴,希望与大家共同进步
展开
-
vue和react的diff算法比较
相同点:vue和react的diff算法,都是不进行跨层级比较,只做同级比较。不同点:vue进行dif时,调用patch打补丁函数,一边比较一边给真实的DOM打补丁Vue对比节点,当节点元素类型相同,但是className不同时,认为是不同类型的元素,删除重新创建,而react则认为是同类型节点,进行修改操作① Vue的列表比对,采用从两端到中间的方式,旧集合和新集合两端各存在两个指针,两两进行比较,如果匹配上了就按照新集合去调整旧集合,每次对比结束后,指针向队列中间移动;②而react则是从原创 2020-07-29 11:27:50 · 2526 阅读 · 0 评论 -
react的diff算法讲解
传统的diff算法通过循环递归进行依次对比,算法复杂度高达O(n^3),n代表树的节点数,这个算法有多么庞大?如果要展示1000个节点就要执行上亿次比较,你电脑CPU再好也很难在1秒内计算出差异。react的diff算法先了解一下什么是调和?将virtual DOM(虚拟dom)转换成actual DOM(真实dom)的 最少操作过程就叫调和,简单理解就是简化算法复杂度react的diff算法react的diff就是实现了上述的调和,简化了算法的复杂度react的三大diff策略原创 2020-07-27 17:31:12 · 3031 阅读 · 0 评论 -
vw的移动端适配方案
前言:先来跟大家科普一个单位:vw(视宽),即当前窗口的可视宽度1.假设我们的设计稿宽度为375px,这时候按照设计稿我们的页面视宽其实就是100vw即整个页面宽度375px/100vw = 1px/? vw即:1px相当于{ 1 / (375/100) } vw...原创 2020-07-06 22:21:06 · 1863 阅读 · 0 评论 -
react行内样式中使用url怎么引入图片
react中在行内样式中引入样式需要使用require关键字原创 2020-07-02 16:09:10 · 1010 阅读 · 0 评论 -
react设置基础路由、修改打包路径
设置基础路由1.基础路由设置使用了 basenameimport React from 'react'import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'import * as Login from '@pages/login' <Router basename = "/test"> <Switch> <Redir原创 2020-07-02 16:06:04 · 2424 阅读 · 0 评论 -
react中build后的项目资源找不到问题
我们在react项目中运行cnpm run build后,打完包生成项目放在服务器下会报404找不到资源,问题就是喜闻乐见的路径设置问题了react脚手架默认的打包路径是/ ,你可以打开打完包的index.html我们做如下修改就可以改变上面打包路径问题首先我们看一个设置在config->webpack.config.js中// 大家可以搜索一下这个变量,我简单说明一下,这个变量就是设置了资源访问路径,当然也包括打包路径paths.publicUrlOrPath然后我们在c.原创 2020-07-02 15:58:24 · 1394 阅读 · 0 评论 -
react中使用scss全局变量做留海屏幕适配
最近我的react工程需要做留海屏幕适配,用了公司的框架mtl(支持友空间),我们都知道现在大多数做留海适配都是在顶部设置25px的高度,那为什么做适配会用到scss全局变量呢?答案就是方便!配置了全局变量后我们可以在想要的任何地方使用,设置使用css的calc动态计算一些宽度或者高度等等,话不多说,看代码1.安装 sass-resources-loader cnpm i sass-resources-loader --save-dev2.修改 config 里面的 webpack.co.原创 2020-07-01 23:36:52 · 527 阅读 · 0 评论 -
react按需加载路由react-loadable
按需加载路由可以减去不必要运行,比如我们首次打开某个页面,我们只打开了一个路由,如果我们配置了按需加载,当前页面只会加载这个路由,如果没有配置的话,会发现我们进入到某个路由时,其他不相关的路由也已经加载,这样会大大增加项目运行速度,话不多说,直接看代码:定义路由懒加载工具// 路由懒加载的工具类(我的项目懒加载类是放在utiles -> loadable.js下,utils也是自己配置的工具类文件夹)import React from 'react'import Loadable fr.原创 2020-06-30 23:35:29 · 294 阅读 · 0 评论 -
在react项目中做公共配置文件
在我们的react项目中有public文件夹,这个地方存放都是静态文件不会被编译,所以我们的静态公共配置文件就放在这里公共配置文件放在这里有一个好处就是任何人可以实时修改配置文件,然后程序会根据你的修改运行对应的逻辑或者变量,如:我们的开发人员做了这个配置文件功能,我们就可以告诉其他非研发同事在这里配置所需内容,是不是很方便?下面来看一下1.在public中创建config.jswindow.config = { baseUrl: 'xxxxx', mainTitle: 'xxxx'.原创 2020-06-30 23:18:25 · 5936 阅读 · 6 评论 -
react中使用局部样式
在vue里我们可以用scoped轻松编写局部样式,但是react并没有提供这个关键字,怎么办呢?请往下看:这种方法必须使用类选择器1.将css文件命名为xxx.module.scss(当然css、less、sass也是没问题的)2.以前我们都是import ‘xxx.scss’ ,需要改为 import styles(这个styles名称自己定义) from ‘xxx.scss’3.如果我们的类选择器叫做’.container’,全局的样式我们这样写className=“cont原创 2020-06-29 23:40:37 · 2662 阅读 · 0 评论 -
去除在vscode里jsx代码飘黄
在package.json中添加如下配置: "eslintConfig": { "extends": "react-app", // 创建工程就有这行 "rules":{ "jsx-a11y/anchor-is-valid":"off" // 添加这个 }}配置完,重启项目,你再看看jsx飘黄是不是没有啦! 有效的话给个赞!...原创 2020-06-29 23:27:16 · 572 阅读 · 0 评论 -
react中配置eslint
在根目录下创建.eslintrc.json,下面贴一下我的配置,每一项具体的意思大家可以去网上查一下,此篇文章不再写出{ "root": true, //根配置,每一个文件夹都可以配置eslintrc文件,依次向外找该文件,找到 "root": true, 则停止,我再最外层只配置了一个eslintrc文件,则所有的文件只依赖这一个文件的规则 "parser": "babel-eslint", "env": { "browser": true, .原创 2020-06-29 00:22:57 · 2500 阅读 · 0 评论 -
在react脚手架中配置.editorconfig简化代码编写
大多数我们开发的时候为了规范化各个开发人员的代码,都会引入eslint校验,但是eslint是可配置的,比如说缩进,有的项目是4 有的是2,那么我们怎么来简化这个操作呢,我们的编写风格也是可配置的1.在项目根目录下创建.editorconfig,记住不能丢了"."#涵盖整个工程,建议直接这么写root = true #缩进风格:空格indent_style = space#缩进大小2 (这个是我们比较常用的)indent_size = 2#换行符lfend_of_line =原创 2020-06-29 00:12:54 · 364 阅读 · 0 评论 -
react中配置文件路径别名
下面我从新工程开始说起:我们新下载的create-react-app工程下,执行 npm run eject 即可看到相关配置,比如说:webpack.config.js我们在webpack.config.js的resolve下按照如图所示即可完成自定义路径别名然后我们在自己的项目中就可这么使用,这样带’@'来直接指定路径import Tabs1 from '@redux/actions/tabs'对你有帮助给个赞哦!...原创 2020-06-28 14:50:58 · 966 阅读 · 0 评论 -
react的action中异步操作遇到的问题
最近做了一个需求,就是一个很简单的tabs分页,大致是这个样子我想将这个组件更加细化的抽出来做成更加容易扩展的组件,父组件只提供了子组件出现的x,y轴的坐标,其余的数据都由redux控制,虽然这样做过于笨重,但是这是个人尝试,在项目中当然是怎么轻量怎么来。遇到的问题:1.我想在页面初始化的时候就走接口获取一下tabs顶部的按钮名称以及对应的编码,并且利用的这个编码再去请求另一个接口第一次初始化对应的表格,简单来说就是页面初始化的时候需要走两个接口,而且这两个接口必须按照我想要的顺序去执行,然后我.原创 2020-06-27 16:02:44 · 857 阅读 · 2 评论 -
react禁止事件冒泡
在react中的点击事件是onClick,如果你想阻止事件冒泡e.nativeEvent.stopImmediatePropagation()原创 2020-06-26 15:21:22 · 613 阅读 · 0 评论 -
在react脚手架中设置反向代理
我在这里用了http-proxy-middleware包(需要执行cnpm i http-proxy-middleware --save -dev),当然大家也可以用其他方式:如node、nginx、等等我就不再一一描述了,教大家最简单暴力的1.在src下创建一个setupProxy.js的js文件,此文件创建后会自动被config->paths.js使用2.然后在setupProxy.js写如下代码(2020-6-23日下载的版本)const { createProxyMiddleware原创 2020-06-24 00:10:45 · 865 阅读 · 1 评论 -
redux中action的异步更新state踩坑1
reducer的更新state异步更改为同步有些需求比如:我们想在接口请求完成后立即获取state的状态,然后去做路由跳转等等操作,但是redux中action操作的state都是异步的,怎么办呢?下面我们看一个例子在actions中方法中返回Promise即可:export default { loginSuccess (dispatch) { return dispatch => { dispatch({ t原创 2020-06-22 23:57:03 · 1069 阅读 · 0 评论 -
react新旧版本生命周期函数详细介绍
react生命周期主要分为三大类:挂载、更新、卸载1.首先我们来看一下旧版本的react生命周期 <16.3版本挂载constructor、componentWillMount、componentDidMount更新(更新可以分为两大类):componentWillReceiveProp、shouldComponentUpdate、componentWillUpdate、componentDidUpdateprops变化触发的更新:props变化 => com原创 2020-06-10 17:00:15 · 1207 阅读 · 1 评论 -
react路由切换时警告“不能再组件销毁时更新state”
原因:react组件已经被销毁,而此时我们的异步操作(通常为调用接口更改state操作)还未结束。当我们的异步执行完成后要执行setState操作时,已经无法获得组件信息,由此造成该异常!解决方案:我们应该在组件中通过componentWillUnmount钩子函数在组件销毁的时候将异步方法撤销:componentWillUnmount() { this.setState = ()=>false;}...原创 2020-06-09 16:54:07 · 822 阅读 · 0 评论