04 2020 档案

react-motion 动画案例介绍
摘要：第一个案例：Motion组件 import React,{Component} from 'react'; import {Motion,spring,presets} from 'react-motion'; import './motion.css'; class ReactMotion ext 阅读全文
posted @ 2020-04-28 11:19 KG-work-space 阅读(1050) 评论(0) 推荐(0)
react react-smooth动画
摘要：首先自然而然的安装一下依赖： npm install react-smooth --save-dev 接下来就是组件代码啦： import React, { Component, Fragment } from 'react'; import Animate from 'react-smooth'; 阅读全文
posted @ 2020-04-27 16:42 KG-work-space 阅读(239) 评论(0) 推荐(0)
React Transition css动画案例解析
摘要：实现React Transition Css动画效果 首先在项目工程中引入react-transition-group： npm install react-transition-group --save-dev 然后在组件中引入CSSTransition: //示例也讲解TransitionGro 阅读全文
posted @ 2020-04-26 18:25 KG-work-space 阅读(792) 评论(0) 推荐(0)
react 高阶组件的实现
摘要：由于强大的mixin功能，在react组件开发过程中存在众多不理于组件维护的因素，所以react社区提出了新的方法来替换mixin,那就是高阶组件； 首先在工程中安装高阶组件所需的依赖： npm install @babel/plugin-proposal-decorators 然后输入命令npm 阅读全文
posted @ 2020-04-20 19:51 KG-work-space 阅读(416) 评论(0) 推荐(0)
react 没有嵌套关系的组件通讯
摘要：前提准备四个文件，两个子组件：List、List2和一个events.js文件以及一个App.js父组件; 在src目录下创建events.js,里面的内容如下： // events.js（以常用的发布/订阅模式举例,借用Node.js Events模块的浏览器版实现） import { Event 阅读全文
posted @ 2020-04-20 12:12 KG-work-space 阅读(362) 评论(0) 推荐(0)
求一个number数组中的最大值和最小值的差
摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="获取数组中的最大差值" /> <meta name="descrip 阅读全文
posted @ 2020-04-20 10:06 KG-work-space 阅读(422) 评论(0) 推荐(0)
CSS Modules 的六种用法
摘要：原文地址：http://www.ruanyifeng.com/blog/2016/06/css_modules.html 阅读全文
posted @ 2020-04-17 16:18 KG-work-space 阅读(1123) 评论(0) 推荐(0)
购物车功能(每日一更)
摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="购物车功能" /> <meta name="description" 阅读全文
posted @ 2020-04-17 13:29 KG-work-space 阅读(87) 评论(0) 推荐(0)
react 配置使用less后缀文件
摘要：//安装less less less-loader npm install less less-loader --save-dev 安装完成后，在项目中的config目录下找到webpack.config.js文件（说明：新建项目一般默认不显示config目录的，需要执行npm run eject） 阅读全文
posted @ 2020-04-15 14:49 KG-work-space 阅读(521) 评论(0) 推荐(0)
js 斐波那契数列的获取和曲线的实现（每日一更）
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="不用临时变量进行两个值 阅读全文
posted @ 2020-04-14 16:47 KG-work-space 阅读(492) 评论(0) 推荐(0)
js 每日一更（数组转换成前端更容易解析的树状结构）
摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="数组转换成前端更容易解析的树状结构" /> <meta name=" 阅读全文
posted @ 2020-04-13 22:00 KG-work-space 阅读(268) 评论(0) 推荐(0)
js 二分查找法之每日一更
摘要：<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html"/> <meta name="keywords" content="二分查找算法" /> <meta name="description" 阅读全文
posted @ 2020-04-13 13:22 KG-work-space 阅读(148) 评论(0) 推荐(0)
前端算法之每日一更（求一段英文字符串的中，出现次数最多的字母，和该字母出现的次数）
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="统计一个字符串出现最多 阅读全文
posted @ 2020-04-10 17:41 KG-work-space 阅读(369) 评论(0) 推荐(0)
react之每日一更（实现canvas拖拽，增、删、改拖拽模块大小功能）
摘要：效果图： import React, { Component } from 'react'; import scaleImage from './images/scale.png'; import closeImage from './images/close.png'; import maskIm 阅读全文
posted @ 2020-04-09 17:05 KG-work-space 阅读(1208) 评论(0) 推荐(0)
react 局部更新的关键算法 DOM diff算法
摘要：下图是diff算法结构的详细解析： 要点总结：DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。 下图详解： Tree DIFF是对树的每一层进行遍历，如果某组 阅读全文
posted @ 2020-04-08 15:38 KG-work-space 阅读(526) 评论(0) 推荐(0)