关注
分享
关注前端开发核心技术
前端精髓
前端开发
展开
-
介绍React.memo, useMemo 和 useCallback
什么是 React.memo ？React.memo 和 React.PureComponent 类似， React.PureComponent 在类组件中使用，而React.memo 在函数组件中使用https://dev.to/dinhhuyams/introduction-to-react-memo-usememo-and-usecallback-5ei3...原创 2020-01-16 21:53:27 · 6668 阅读 · 3 评论 -
Vue写表单组件
<template> <div> <input type="text" v-model="model"> </div></template><script>export default { props: { value: { type: String, default...原创 2020-01-16 10:29:07 · 909 阅读 · 0 评论 -
闭包的场景
定时器function await(message) { setTimeout(function timer() { console.log(message) }, 1000);}await('hello world')timer 函数里面对变量 message 引用， timer 具有涵盖 await() 作用域的闭包，事件function setupBot(na...原创 2020-01-14 08:23:07 · 105 阅读 · 0 评论 -
Redux中间件Middleware分析
中间件，它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，看到图片中middleware 所处的位置没，就是那个地方。先回顾一下 dispatch 函数的用法dispatch({type: 'INCREMENT'}){type: 'INCREMENT'}这个参数我们称为action，Action 本质上是 JavaScript 普通对象。我们约定，action...原创 2020-01-12 11:49:54 · 163 阅读 · 0 评论 -
ES2020尝鲜
matchAllg表示全局模式，即模式将应用于所有字符串，而非在发现第一个匹配项就立即停止const string = 'cat, bat, sat, fat';const regex = /at/;console.log(string.match(regex))// [ 'at', index: 1, input: 'cat, bat, sat, fat', groups: undef...原创 2020-01-11 22:32:15 · 369 阅读 · 0 评论 -
使用 Context 和 Hooks 来管理状态
一个页面的数据可能来源于很多地方，比如用户信息，数据列表，提示内容，我们可以使用上下文作为全局状态，和自定义Hooks通过API调用来简化组件的通讯。创建上下文Content// Context.jsimport React, { useState } from "react";const Context = React.createContext([{}, () => {}])...原创 2020-01-11 17:41:28 · 972 阅读 · 0 评论 -
代码简洁之道
英文单词名称要准确const user = { id: 1, name: '张三', memberSince: '1997–04–20'};increaseSalary(user, 1000);代码格式化按照团队规范：通常是空格缩进两个字符，JS字符串使用单引号，HTML属性使用双引号，分号结尾语句，变量名使用驼峰格式。变量名的前缀中指定数据类型（不建议使用）// bad...原创 2020-01-11 12:02:42 · 145 阅读 · 0 评论 -
vue多语言应用
初始化项目Create Vue 项目和 install vue-i18nvue create vue-multilang使用vue-i18n加载语言包创建语言文件多语言文件的统一入口，加载各种语言文件// src/lang/index.jsimport zh from './translations/zh.json'import en from './translatio...原创 2020-01-09 18:02:40 · 947 阅读 · 0 评论 -
自定义Hooks写表单防抖
import React, { useState, useEffect, useRef } from 'react'const useDebounce = function (value: any, timeout: number): [any] { let [state, setState] = useState(value) const refContainer = useRef(...原创 2020-01-09 14:16:41 · 973 阅读 · 0 评论 -
使用对象构建树
假设我们有一个树数据结构在应用程序中，以以下格式存储此信息是相当普遍的，尤其是在存在一对多父/子节点关系的情况下：const data = [ { id: 56, parentId: 62 }, { id: 81, parentId: 80 }, { id: 74, parentId: null }, { id: 76, parentId: 80 }, { id: 63,...原创 2020-01-08 21:07:09 · 269 阅读 · 0 评论 -
算法：二分法查找
给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。遍历法for循环，时间复杂度O(n)var searchInsert = function (arr, target) { for (let i = 0; i < arr.length; i++) { if (arr[i] >= target) { ...原创 2020-01-07 10:41:12 · 287 阅读 · 0 评论 -
Vue和React的区别
运行时性能在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪...原创 2019-12-31 15:05:07 · 143 阅读 · 0 评论 -
算法：二叉树翻转
描述：二叉树的数据结构如下，需要将二叉树各节点左右翻转var node1 = { value: 1, left: { value: 2, left: { value: 4 }, right: { value: 5 } }, right: { value: 3, left: { valu...原创 2019-12-30 10:46:26 · 407 阅读 · 0 评论 -
算法：求两数之和
问题描述：给定一个数组，数组里面有两个数，他们的和是target，求这两个数在数组中的位置思路：a + b = target已知 target求 a 和 bfunction solution(nums, target) { for (let i = 0; i < nums.length; i++) { let a = nums[i] for (let j =...原创 2019-12-30 09:58:04 · 483 阅读 · 1 评论 -
在线JSON格式化数据
网址：https://wuxianqiang.github.io/tojson/原创 2019-12-27 10:43:34 · 417 阅读 · 0 评论 -
理解事件循环
setTimeout(() => { console.log('timeout1'); Promise.resolve().then(data => { console.log('then1') }); Promise.resolve().then(data => { console.log('then1'); Promise.resolv...原创 2019-12-24 11:17:29 · 156 阅读 · 0 评论 -
学会使用BFC解决margin重叠问题
问题描述：上下两个元素都设置了margin，margin会合并，只保留大的一个<body> <ul> <li> <div>1</div> </li> <li> <div>1</div> </li> <li...原创 2019-12-23 16:02:49 · 594 阅读 · 0 评论 -
redux-saga的原理
为了运行我们的 Saga，我们需要：创建一个 Saga middleware 和要运行的 Sagasimport { take, put } from '../redux-saga/effects'import * as types from './types'export default function* () { for (let i = 0; i < 3; i++) {...原创 2019-12-22 11:43:56 · 414 阅读 · 0 评论 -
实现动画的几种方式
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。CSS transitionsCSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。语法：transition: ...原创 2019-12-21 22:32:14 · 648 阅读 · 0 评论