daipi173的个人博客

daipi173的个人博客
Always Creative.
Welcome!

YOUR EFFORTS BOUND TO SUCCEED
关注公众号：Yoho前端

你的努力必将成为成功。

避免使用过多if-else语句

2022-12-11 | Javascript

“ 在项目开发中，由于之前项目难以维护，从而导致我们使用过多的if-else，这样导致写出来的代码又臭又长，给下面接手的同事留下了巨多问题，并且也加大了排查周期，接下来我们看看如何优化if else分支过多的问题。” 1. 三元运算符其实在很多简单的判断情况下，我们可以放心的使用三元运算符去替代if-else语句，注意：三元运算符也不能嵌套太多层，因为它不具有较高的可读性，推荐一层嵌套是最优的。举个例子： 123456789101112

useContext减少重新渲染

2022-08-29 | React

“useContext想必大家都使用过，但是在使用的时候有没有想过它的性能问题？那么我们在编写useContext的时候如何减少重新渲染？本章中不会涉及React源码。” 1. useContext如何使用首先在什么场景下会使用到useContext？背景：React是单向数据流，如果组件之间有嵌套引用关系，且嵌套比较复杂（比如：组件A引用组件B，组件B引用组件C），当在没有状态管理的情况下，只能使用props一层一层往下传递，这样会使

如何让 x == 1 && x == 2 && x == 3 等式成立

2022-08-04 | Javascript

“ 之前在看一篇文章时，忽然看到一篇有趣的文章，如何让x==1 && x==2 && x==3成立，话不多说，我们直接进入正文吧。” 1. ==和===区别==操作符：表示宽松相等，它会在比较相等之前先将两边的值进行强制类型转换；===操作符：表示严格相等，它不会执行类型转换，当两个值不是相同类型时，会返回false。总结：==操作符只要求比较两个值是否相等，而===操作符不仅要求值相等而且还要要求类型相

react-redux：useSelector以及connect中mapStateToProps区别（包含源码解析）

2022-06-06 | Redux

“ 在使用全局state状态时，我们其实可以用到connect下的mapStateToProps方法，也可以使用hooks钩子useSelector；在公司开发项目时，使用的是hooks钩子函数useSelector，然后出现了性能上的问题，导致页面出现了多次渲染，带着这个疑问去看useSelector源码发现了其中的蹊跷。” 1. 这两种写法是否是等价的首先先来思考一下connect下的mapStateToProps方法以及useSe

React Hooks闭包陷阱

2022-05-15 | React

“ 近期由于工作忙的原因，导致许久没有更新公众号了，现在抽空我们来了解一下React Hooks闭包相关的问题。” 1. 浅谈一下什么是闭包学过js的同学，肯定对闭包一点都不陌生吧。举个例子： 123456789101112131415161718192021222324252627282930313233// 前提：函数外部是无法读取函数内部变量function f1 () { const count = 1}c

如何防止前端水印被破解

2021-12-17 | Javascript

“ 最近看到一篇有趣的文章，是关于前端生成的水印如何防止用户破解，通常来说水印的生成应该是通过服务端来的，但是我们也可以了解一下如果让前端来实现，我们应该如何做？” 1. 前端和后端生成水印方法对比前端方案优点：可以减少服务端运算量和内存，并且能够快速响应请求；缺点：安全性很差，容易被用户破解，窃取到没有水印的原图。后端方案优点：安全性很高，不容易被用户破解；缺点：遇到大文件密集水印(复杂水印)，会占用服务器内存和运算量，且请

虚拟列表实现原理

2021-08-28 | 性能优化

“ 之前在做项目时遇到性能优化场景，当不断的增大列表行数或者列数时，会明显的感觉到卡顿的问题；于是就延展出虚拟列表的使用。如果中间说的有问题，欢迎在评论区留言指出。” 1. 虚拟列表的定义为什么会有虚拟列表的产生？拿table组件来举例子，创建一个table表格其实需要的成本是很高的，因为table表格中有很多的dom元素，而创建和渲染dom元素花费的时间成本是很高的，如果当我们table表格横向和纵向超过100条的时候会出现明显的卡顿

基本类型使用点访问内部发生了什么

2021-05-23 | Javascript

“ 最近在面试的时候，犯了一个低级的错误，是关于基本类型引用的问题，下面就让我们一起来分析一下流程是如何的。” 1. 具体代码12345Object.prototype.test = 'test test';var a = 123;a.b = 456;console.log(a.test);console.log(a.b); 此时你是不是很好奇，基本类型还可以进行点(.)操作访问？其实我在面试的时候也是犯了一个很低

react-redux中connect第二个参数为对象时源码分析

2021-05-16 | Redux

“ 记着当初才来公司的时候上手项目时，对redux的插件使用多少有些困惑，今天来讲解一下react-redux中connect方法第二个参数为对象时的封装。” 1. connect首先找到connect的封装，在connect.js文件中，先简化一下它的代码封装，得到如下所示代码： 1234567891011121314151617181920export function createConnect({ connectHO

算法---环形链表

2021-05-05 | 算法

“ 五一假期快要结束啦，让我们用一道简单的算法题来欢送五一假期末尾图片图片。今天算法很简单，让我们进行一个放松，涉及到的知识点是链表和双指针。” PS：如果你对链表还不是很熟悉的话，那么我建议你先看看下面这篇我写的文章，对链表有了了解之后再来看看这道题。数据结构与算法之单向链表 1. 题目描述老规矩，上题目，先看看下面这张图的题目描述：环形链表题目描述 2. 解题思路看了题目描述之后，你是不是心中已经有了思路了呢？当然如果你还没有思路

And we should call every truth false which was not accompanied by at least one laugh

YOUR EFFORTS BOUND TO SUCCEED 关注公众号：Yoho前端

YOUR EFFORTS BOUND TO SUCCEED
关注公众号：Yoho前端