react
关注
分享
扫一扫
&時光
时间如梭，白驹过隙！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
sass和less的区别之我见
1.编译环境不一样Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。2.变量符不一相less是@，而scss是$,而且它们的作用域也不一样，less是块级作用域3.输出设置不一样Less没有输出设置，sass提供4种输出选项，nested,compact,compressed和expanded nested：嵌套缩进的css代码(默认) expanded：展原创 2021-05-19 08:47:30 · 296 阅读 · 0 评论 -
diff算法（核心）
vue和react的虚拟dom都采用类似的diff算法，核心大概可以归为两点1,两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构；2，同一层级的一组节点，他们可以通过唯一的id进行区分。基于以上两点假设，是的虚拟的DOM的Diff算法的复杂程度从O(n^3)降到了O(n)。当页面的数据发上变化的时候，Diff算法只会比较同一层级的节点：如果节点类型不同，直接干掉前面的节点，在创建并插入新的节点，不会再比较这个节点以后的子节点了。如果节点类型相同，则会重新设置节点原创 2021-05-18 08:33:49 · 295 阅读 · 0 评论 -
JS实现移动端购物车左滑删除功能
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>js侧滑显示删除按钮</title> <st...原创 2021-05-13 20:08:10 · 480 阅读 · 0 评论 -
原生js、vue、react 购物车运动小球
所有版本大同小异有详细备注，一目了然react版 <div className="ball" > <img src={"http://www.ibugthree.com/" + obj.img_src} alt="" /> </div> // 当前运动小球 let ball = e.currentTarget.parentNode.lastChild; // 小球显示 .原创 2021-05-12 19:09:55 · 284 阅读 · 0 评论 -
前端性能优化方案都有哪些？
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。 总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 前端优化的途径有很多，按粒度大致可原创 2021-05-10 20:55:23 · 6402 阅读 · 0 评论 -
中级前端面试题必备知识点（2.5w+月薪）进阶
中级前端面试题必备知识点（2.5w+月薪）进阶前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了，现在需要你完全了解前端开发的同时，还要具备将上线、持续化、闭环、自动化、语义化、封装......等概念熟练运用到工作中的一个职业，甚至用人部门还希望你了解并掌握深度学习及机器学习的相关概念。在面试过程中，各部门交叉面试的时候会提问一些关于后端的知识。假如你想要拿到2.5w+月薪，你的能力应该达到掌握以下全部知识点并有过开发后端接口与数据处理（node、java、c...原创 2021-05-09 19:27:38 · 1711 阅读 · 0 评论 -
购物车运动小球
第一步： 定义一个变量bSys: false, //判断单个小球运动的条件第二步：在需要的地方添加小球 <div className="shop"> <div className="cart"></div> <transition name="drop"原创 2021-05-09 19:09:39 · 268 阅读 · 3 评论 -
react实现路由懒加载之我见
下载 react-loadableyarn add react-loadable或者npm install --save react-loadable2、个人习惯吧，进行了封装，在utils文件夹下新建loadable.js文件，配置如下：import React from "react";import Loadable from "react-loadable";// 加载动画const loadingComponent = () => { return <d..原创 2021-05-07 15:31:14 · 238 阅读 · 6 评论 -
JS取出两个数组中的不同或相同元素
希望对大家有用哟！[1,2,3,4].filter(item=>[1,2,3,4,5,6].includes(item))原创 2021-05-07 10:22:49 · 526 阅读 · 1 评论 -
文字超出，后面出现三个点
这是css样式，直接放入对应div的css样式里即可overflow: hidden; //超出部分隐藏text-overflow: ellipsis; //文字超出部分截断display: -webkit-box; //显示为webkit的盒子，这是css3新增的属性，很有用，可以进行弹性的分配。-webkit-line-clamp: 1; //行数：1，也可以尝试其他行数-webkit-box-orient: vertical; //分配的盒子的方向，水平。...原创 2021-05-07 10:11:50 · 438 阅读 · 0 评论 -
vue和react的区别之我见
react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。1.数据是不是可变的react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponen原创 2021-05-06 11:43:01 · 191 阅读 · 0 评论 -
函数组件与类组件
1. 函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件（Stateless Components）的思想。函数组件中，你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件（Presentational Components），接收Props，渲染DOM，而不关注其他逻辑。2. 函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中，你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。3. 函数组件更...原创 2021-05-06 11:23:48 · 538 阅读 · 0 评论 -
工作不好找， 会这些react面试题可以助你一波
问题1：什么是虚拟DOM？主题: React难度: ⭐虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。问题2：类组件和函数组件之间的区别是啥？主题: React难度: ⭐⭐类组件可以使用其他特性，如状态state和生命周期钩子。 当组件只是接收props渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。函...原创 2021-04-30 11:03:38 · 222 阅读 · 1 评论 -
react中界面跳转 A界面跳B界面，返回A界面，A界面状态保持不变 localStorage方法
好像所有的单页面应用都会有个问题，就是我A作为一级界面，跳转到二级界面B的时候，在回到A界面，你会发现所有的参数都重新加载了很多时候假如我们的界面有很多条新闻列表，通过设置参数筛选出了一部分的新闻列表，这个时候我点击新闻标题进入了新闻详情，然后返回到A界面的时候，发现所有的条件都重置了，这样用户体验很显然是非常不好的。我还是个小菜鸟所以对于那种大佬们说可以使用redux可以实现的方法不是很明白，所以我就介绍下另外一种方法在跳转到B界面的时候，把你想要保留的数据啊参数啊，传递给B界面，在B界.原创 2021-05-04 18:48:09 · 1656 阅读 · 0 评论 -
React脚手架安装配置
npm i create-react-app -g 全局安装create-react-app --version 查看版本create-react-app you-test 生成项目文件夹cd you-test 进入项目npm i react-router-dom -D 配置路由 npm start 启动//px转remnpm run eject //如果报错就执行，否则不需要git add .git commit -m 'init'npm run eject .原创 2021-04-27 21:25:21 · 159 阅读 · 0 评论 -
vue，react 如何配置请求服务器数据
第一步：先在src下创建第二步：配置 Service.js 直接粘贴无需改动，参考代码如下：import axios from "axios";/** * @description: 发送网络请求 * @param {object} config 一个配置对象 * @return {*} 返回请求的结果 */export function request(config) { // 创建一个axios实例 const instance = axios.cr...原创 2021-05-04 13:41:29 · 350 阅读 · 2 评论 -
react配置异步请求数据，解决跨域问题
在src目录下配置，直接可以用const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use( proxy('/api', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:8080/api', //配置转发目标地址(能返回数据的服务器地址) change..原创 2021-04-27 21:04:16 · 290 阅读 · 2 评论 -
react如何配置解决PX转rem移动端适配问题
安装相关的依赖npm i lib-flexible --savenpm i sass-loader node-sass --save-devnpm i postcss-px2rem --save然后打开项目中config/webpack.config.js进行配置// 在配置文件中添加如下两行代码// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62const px2rem = ...原创 2021-04-29 10:38:40 · 816 阅读 · 0 评论 -
原生JS左右联动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title&l...原创 2021-05-01 18:50:50 · 726 阅读 · 2 评论 -
在react中引入Ant Design Mobile后导致px转rem失效问题及配置文件别名失效问题的解决办法
npm install antd --save 用npm /cnpm 引入antd 目前使用的cnpm 查看配置文件 即可看到我们刚刚引入了版本为2.1.0 修改webpack.config.js 引入 ant design的样式文件 (注：如果引用了react-router，可将样式文件引入root.js中，如图2) 使用ant design组件 查看结果 ...原创 2021-05-01 18:51:15 · 998 阅读 · 0 评论