- 博客(76)
- 收藏
- 关注
RSS订阅原创 2020-05-15
我已经转战掘金了，欢迎各位大佬降临！https://juejin.im/entry/5ebe32fcf265da7bc8593c2c掘金最新文章 请搜索，前端刘亦菲，哈哈
2020-05-15 23:12:17
147
原创 如何检测点击React组件外部
/** * Component that alerts if you click outside of it */class OutsideAlerter extends Component { constructor(props) { super(props); this.setWrapperRef = this.setWrapperRef.bi...
2019-07-02 16:07:05
321
原创 js 理解
https://blog.sessionstack.com/tagged/tutorial原文追踪 预览https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cfjs 引擎(engine) 运行(runtime) 堆栈(call stack) 概览https://b...
2019-03-18 11:07:07
212
原创 es6 Map set应用
// 我想要评论！！！// 我想要赞！！！// 看过的帅哥美女们，点一下，谢谢！！！！import React, { Component } from 'react';import { Button, message, Spin } from 'antd';import { connect } from 'react-redux';import { CrModal, CrTa...
2019-02-27 10:27:21
333
1
原创 HOC ref & static methods
以前你在父组件中使用<component ref="component"/>的时候，你可以直接通过this.refs.component进行获取。但是因为这里的component经过HOC的封装，已经是HOC里面的那个component了，所以你无法获取你想要的那个ref(wrappedComponent的ref)。要解决这个问题，这里有两个方法：a) 像React Redux...
2019-02-15 11:42:08
224
原创 react 命名规范 书写顺序
on开头的事件 监听toggle开头的事件 切换state状态handle开头的事件 回调函数render 自定义render 组建书写顺序static lifeCyclecustomer MethodscustomerRenderrender(lifeCycle) ts_开头 私有方法 引入书写顺序libalias...
2019-02-12 13:02:26
1761
原创 useState
/** * type :状态 * editable(可以编辑) span onclick * editing(正在编辑) input onchange save * uneditable(不可以编辑 ) chirdren */const useEditing = (initialState) => { const [editing, setEditing] = useS...
2019-02-12 11:59:58
1381
转载 React 高阶组件
原文地址前言本文代码浅显易懂，思想深入实用。此属于react进阶用法，如果你还不了解react，建议从文档开始看起。我们都知道高阶函数是什么, 高阶组件其实是差不多的用法，只不过传入的参数变成了react组件，并返回一个新的组件.A higher-order component is a function that takes a component and retur...
2019-01-09 15:00:23
139
原创 react组件书写规范
组件的私有方法都用 _ 开头，所有事件监听的方法都用 handle 开头。把事件监听方法传给组件的时候，属性名用 on 开头组件的内容编写顺序如下：static 开头的类属性，如 defaultProps、propTypes。构造函数，constructor。getter/setter（还不了解的同学可以暂时忽略）。组件生命周期。_ 开头的私有方法。事件监听方法，handle*。...
2019-01-07 16:27:26
194
原创 正确react组建的单元测试方法
链接In order to testLockScreen, you must first understand what itsContractis. Understanding a component’s contract is the most important part of testing a React component. A contract defines the ex...
2018-12-28 11:53:58
222
原创 jest fs 写自定义 collectCoverageFrom 指定文件 检查测试覆盖率上
const fs = require('fs');const path = require('path');//读取指定文件夹下的全部文件，可通过正则进行过滤，返回文件路径数组function readAllFile(root, reg, aaa) { var resultArr = []; if (fs.existsSync(root)) { var st...
2018-12-26 13:59:41
3925
原创 jest react&& ts
const webpackConfig = require('./creams.config.js');const aliasList = webpackConfig.alias;delete aliasList['@'];const moduleNameMapperConfig = { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|w...
2018-12-25 16:04:23
444
原创 react16 ref 自适应宽高
class Card extends React.Component { constructor(props) { super(props); this.state = { width: props.width || -1, height: props.height || -1, } } componentDidMount() { ...
2018-12-18 12:57:38
1143
原创 JavaScript 深度优先遍历 广度优先遍历 && DOM应用方法
深度优先遍历的递归写法function deepTraversal(node) { var nodes = []; if (node != null) { nodes.push(node); var children = node.children; for (var i = 0; i < children.leng...
2018-12-13 15:33:18
538
转载 react diff算法
react diff算法浅析深度剖析：如何实现一个 Virtual DOM 算法理解 Virtual DOM 认真看上面两个 博文 diff算法作为Virtual DOM的加速器，其算法的改进优化是React整个界面渲染的基础和性能的保障，同时也是React源码中最神秘的，最不可思议的部分1.传统diff算法计算一棵树形结构转换为另一棵树形结构需要最少步骤，如果使用...
2018-12-12 10:39:14
113
转载 函数式编程——入门笔记与React实践
函数式编程——入门笔记与React实践最近在看近来很火的函数式编程教程《Mostly Adequate Guide》 （中文版：《JS函数式编程指南》），收获很大。对于函数式编程的初学者，这本书不仅深入浅出，更让人感受到函数式编程的优势和美感，强烈推荐给想要学习函数式编程的朋友。这篇文章是我个人的一个学习笔记，在总结知识的同时，也尝试以React组件的输入事件响应为例，用函数式编程去应对实...
2018-12-12 10:37:32
175
转载 Build Your Own React - Part 4: Lists and Keys
The last and final feature we'll add to Minimum Viable React are keys. By keys, I refer to the key attribute that you should assign to components or simple elements when rendering lists.Why are keys...
2018-12-12 10:34:43
259
转载 Build Your Own React - Part 3: State and Lifecycle
In this part, we'll add state, i.e. setState() method, to our framework. We can already build stateful applications by passing down props and callingMVRDom.render() each time the state changes. Howeve...
2018-12-12 10:34:12
181
转载 Build Your Own React - Part 2: Components
In this article, we pick up where we left off in part 1. Our first app isn't particularly impressive, but it works well and has some features crucial to a practical React implementation. For example, ...
2018-12-12 10:33:41
243
转载 Build Your Own React - Part 1: Simple Elements
Build Your Own React - Part 1: Simple Elements In this series of articles, we'll build a simple React-like framework. I call itMinimum Viable React, or MVR for short, because it implements all the...
2018-12-12 10:32:55
257
转载 virtual-dom原理与简单实现
前言如何实现一个 Virtual DOM 算法理解 Virtual DOM这两个一定要认真看目前广为人知的React和Vue都采用了virtual-dom，Virtual DOM凭借其高效的diff算法，让我们不再关心性能问题，可以随心所欲的修改数据状态。在实际开发中，我们并不需要关心Virtual DOM是如何实现的，但是理解Virtual DOM的实现原理确实有必要的。本文是参...
2018-12-11 11:52:58
123
原创 chunk bundle module的区别
https://webpack.docschina.org/glossary专业术语After spending a day digging into this I wanted to provide what I believe is a slightly more accurate answer. The webpack team has published a useful (and ...
2018-12-03 15:46:23
1822
原创 Reflect.ownKeys(obj) 和 Object.keys(obj) 区别
Object.keys() returns an array of strings, which are the object's own enumerable properties.Reflect.ownKeys(obj) returns the equivalent of:Object.getOwnPropertyNames(target). c...
2018-08-17 15:52:05
934
原创 修饰器
修饰器 就是面向对象 修饰器模式 在不改变原类的基础上给其添加功能function a(){ console.log("a")}class b(){ console.log("b")}console.log(a(new b()));等同于@aclass b(){ console.log("b")}function a(){ ...
2018-08-16 14:27:55
191
转载 启用ES7的修饰器语法 create-react-app 支持修饰器
先npm run inject暴露webpack我们用create-react-app创建的项目时，并不能使用修饰器语法 修饰器语法是ES.next 2阶段特性。我在使用mobx时需要用@observable让属性被观测和组件观测变化@observer 使用路由时需要withRouter将路由信息传递个组件的props对象上等都需要用到修饰器语法。npm run inject启动后...
2018-08-16 10:11:41
2883
原创 react 学习3 redux
万变不离其宗 记住这个数据流向图 就记住了reduxview发出一个action，action会通知store改变 store会自当触发reducer(计算)，带 旧state和action 返回新的state给store 然后触发视图渲染reducer是一个纯函数 要动态将其分模块 利于管理 ，分离后需要合并 combineReducers 在createStore的...
2018-08-15 14:17:59
101
转载 react redux 解析
一个很厉害的人的git上看到的 点击观看 谢谢他了 不过观看的人记得给starhttps://github.com/ManiacHanz/Learning-Notes/tree/master/redux?tdsourcetag=s_pctim_aiomsg其实就是暴露了5个核心函数，也就是redux提供的核心apiexport { createStore, combineR...
2018-08-15 11:30:57
230
原创 react 学习2
React应用的构成模块：元素和组件在 JSX 当中的表达式要包含在大括号里。JSX 属性你可以使用引号来定义以字符串为值的属性const element = <div tabIndex="0"></div>;也可以使用大括号来定义以 JavaScript 表达式为值的属性：const element = <img src={user.av...
2018-08-02 18:01:40
126
原创 react 学习1
React 是什么？React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。 状态提升当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。 受控组件子组件 不再拥有自身的状态数据了，从福罪案接受数据并将数据要改变的事件通...
2018-08-02 13:53:46
136
原创 vue 异步组建处理路由
import SwLoading from '@/components/sw-loading' import env from '@/common/env' let arrRouter = [ { name: 'AAAAA', url: 'page-aaaaa' }, { name: 'bbbbb', url: 'page-bbbb' }, ]; /** ...
2018-07-21 19:08:51
947
原创 js面向对象整理
webpack环境配置npm initnpm i 安装webpack npm i webpack webpack-cli -D创建webpack.dev.config.js 定义入口文件 出口文件 npm i 看效果搭建服务 输出编译模板npm i webpack-dev-server -D引入node内置模块 path 输出html模板npm i ht...
2018-07-21 16:15:42
158
原创 前端存储之 Web SQL
web sql的简单的增删改查demo<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,ma
2018-07-20 11:59:10
1897
1
原创 xss攻击总结
xss攻击可以分成两种类型：非持久型xss攻击：顾名思义，非持久型xss攻击是一次性的，仅对当次的页面访问产生影响。非持久型xss攻击要求用户访问一个被攻击者篡改后的链接，用户访问该链接时，被植入的攻击脚本被用户游览器执行，从而达到攻击目的。持久型xss攻击：持久型xss，会把攻击者的数据存储在服务器端，攻击行为将伴随着攻击数据一直存在。可以分为三类:反射型：经过后端，不经过数据库存储型：经过后端...
2018-07-09 17:59:12
651
原创 vue 父子组建双向通信 .sync 修饰符
父组件改变数据可以改变子组件, 但是子组件的内容改变并不会影响到父组件可以通过2.3.0新增的sync修饰符来达到双向绑定的效果demo<template> <div class="hello"> //input实时改变wrd的值, 并且会实时改变box里的内容 <input type="text" v-model="wrd"> ..
2018-07-05 13:55:54
274
原创 vue.set- 最帅程序员
<template><!-- 取餐柜 购物车组件 --> <div class="cartcontrol-cupboard"> <div class="cart-decrease" @click.prevent="decreaseCart()"><img :src="reduce" a
2018-07-03 14:26:13
217
原创 vue router 路由心得
vue 路由文档import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)// The matching uses path-to-regexp, which is the matching engine used// by express as well, so the same matching...
2018-06-21 14:37:36
694
原创 filter blur 实现 模糊图片效果
<img src="img.jpg" class="blur" />css 如下：.blur { filter: blur(6px); -webkit-filter: blur(6px); /* chrome, opera */ -ms-filter: blur(6px); -moz-filter: blur(6px); filter:progi...
2018-05-30 15:50:18
1531
原创 竖向文字 js 无缝滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-22 09:23:11
1231
原创 vue 文字无缝滚动 利用style 绑定
<template><div class="section"> <div>1 显示完后再显示</div> <div class="example"> <div class="marquee_box"> <div class=&q
2018-05-19 11:52:30
5325
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人