qq_28992047的博客

为了解决父组件state更新，而导致子组件更新，我们需要给ABC三个组件的export default加上memo方法，第二个参数为PropsAreEqual，直接让他返回true。是因为他们共同使用了一个context，而他的value是一个对象，每次都会重新生成一个新的对象，所以导致B组件以为context更新了，所以他就会触发渲染了。此时更新a的值，并不会影响BD组件，只有A组件会更新。同时，更新b的值，也不会触发A组件的更新，只有BD更新。答案是不会，ABD都更新了，C没有更新。

setup command: use_2to3 is invalid.

Variables cannot be declared with 'cpdef'. Use 'cdef' instead.

mac解决。npm install提示的Cannot read properties of null (reading 'pickAlgorithm')

python-vitualenv

使用document.execCommand和contentEditable开发简易版富文本编辑器

记录background-position的使用方法

源码摘要

记录一下搭建sentry服务器的路程

postcss的起源与分析

"Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.",首先梳理一下Storage的使用规则localStorage需要在相同协议+相同主机名+相同端口，也可以说是在同一域名下使用。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下

网上相关文档很多，但都是复制粘贴的。先贴出我的参考DeviceMotionEvent官方文档DeviceOrientation Event Specification有关摇一摇的代码var SHAKE_THRESHOLD = 3000;var last_update = 0;var x = (y = z = last_x = last_y = last_z = 0);if (window.DeviceMotionEvent) { window.addEventListener("devic

今天同事给了一段神奇的代码，如下[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})大家可以猜猜是干啥的。321答案揭晓：页面中所有的元素都被加上了外框，颜色是随机的，可以清晰的看到所有的布局情况～这个代码等同于$$("*").forEach(function(a){ a.style.outline="1px

scrollHeight: 内容真实的宽度,包括被卷起来的高度（228px）clientHeight: 展示的高度，不包括滚动条，也就是183pxoffsetHeight: 在标准流中所占的高度，也就是我们自己设置的200px高度如果box不是overflow:scroll，那么clientHeight等于offsetHeight如果盒子的高度大于内容的高度，也就是不出现滚动条的时候，这三个是相等的。...

近期在拉代码的时候，发现了个问题，拉下来的代码一致都报错，然后只有一个.git文件夹，使用git status发现，所有的文件都被删除了，根据系统提示的 **git restore --source=HEAD : /**才将内容恢复回来。但是，问题来了，恢复后的文件，被git认为成我自己修改的文件，当我git add .的时候，这些都变成了我的提交记录，然而我也只是做了次git clone的操作而已，就要提交修改了1000+文件。崩溃error: invalid path 'xxxx/img/100*

link在之前的认知中，也就是一个加载css的标签，如因为很久没有改过html文件了，今天突然看到了create-react-app默认生成的index.html中有这么个使用方法这就打破了我最初的认知，我竟然对link的rel一点都不了解，所以我百度了一下，决定看看他到底有多少个可选值。我的天，这么多。。属性值描述alternate提供指向文档备用版本的链接（即打印页面，已翻译或镜像）。例如: <link rel=“alternate"type=“application/at

同事提出了一个需求，匹配1|1，但是有不能匹配-1|1，也就是1|1之前不能有-代码如下const reg = /[^-]1\|1/reg.test("1|1") // truereg.test("-1|1") // falsereg.test("-1111|1") // true由此我和我的小伙伴们又去找了些其他奇奇怪怪的需求~比如// 相邻两个数字不重复const siblingNum = /(\d)\1/ // 这个是找到相邻数字重复的情况，siblingNum.test("112

目下最流行的三种模块引入规则： commonjs, AMD(RequireJs)，CMD(SeaJs)，其实后两者可以归为一类，为什么呢？因为使用起来很相似，不过细细一看，他们好像都差不多，上代码看看// commonJs// a.jsmodule.exports.a = 1;module.export.b = 2;// b.jsconst module_a = require("./a.js")console.log(module_a.a) // 1console.log(module_a

何为Pick?type Pick<T, K extends keyof T> = { [key in k]: T[key]}就是从一个复合类型中，取出几个想要的类型的组合，例如：// 原始类型interface TState { name: string; age: number; like: string[];}// 如果我只想要name和age怎么办，最粗暴的就是直接再定义一个（我之前就是这么搞得）interface TSingleState { name: st

最终版本如下function getJson(str) { try { let json = JSON.parse(str); json.a = 1; console.log("json", json); return json; } catch (error) { console.error(error.message); return {}; }}console.log("aa"

思路，正方形，长宽都一样，需要找到一个标准值然后再去设置盒子模型，可以用padding，margin, width/height,正题开始1. 使用padding，原因，百分比是基于父元素的宽度，所以如果是根据父盒子的百分比来算，则可以使用这个方法具体代码如下<div class="square"></div>.square { display: inline-block; padding: 0 20% 20% 0; background: red

在useReducer的reducer中，对state进行操作，就会导致错误function getAnalyzeItem(){ return { a: 1, b: 2 }}// 错误写法 function analyzeReducer(state: TFilterItemVal[], action: TReducerAction<TFilterItemVal>) { const { index, data, type } =

先来个基础版开开胃，设置定时器，再次触发时如果有就清除，通俗易懂function debounce(callback, timeout = 1000) { let shakeTimer = null; return (...arg) => { if (shakeTimer) { clearTimeout(shakeTimer); } shakeTimer = setTimeout(() => { callback.call(this, ...arg) }, ti

什么是redux？我认为他就是一个公共状态管理工具，通过js的闭包，独立开辟一个环境，用于保存公共状态state，而这个state我们默认他为只读的，不能直接修改，这就保证了在使用时不会有人乱改里面的值而导致整个状态被污染的情况。如果想要更改它，就需要用到redux暴露出来的dispatch方法，接受一个action，也就是给redux派发一个动作，让他根据动作去修改state，每个动作都对应着一个操作流程，做着很单一的工作，比如add就是对某个值进行加法，只要通过action我们就能知道他要干什么。而这个

手撸的乞丐版如下，仅实现了最基础的功能，订阅，派遣，获取三个功能，不过已经可以简单使用了，做个计数器是没啥问题，而且可以更简单粗暴的看到redux的核心功能const REDUX_INIT_TYPE = "@@REDUX_INIT_TYPE"export function createStore(reducer) { let currentState = undefined; const currentListenerList = []; function getState() { ret

在react16.0之前，如果想要使用context，需要使用childContextTypes以及contextTypes// 父组件class TestContext extends Component { state = { childContext: "123" } constructor(props) { super(props...

function ArrayIsIncludeArray(outArr, innerArr) { // 如果被包含的数组长度大于原数组，那么肯定是不会被包含的 if (innerArr.length > outArr.length) return false; // 如果在外部数组找不到内数组的首字符，那说明也不包含 let innerFirstIndexOfOut = outArr...

在初学时，一直认为setState是异步的，看完网上的文章后，才知道这是个伪异步，在源码中能猜出来他的底层实现原理/*** Sets a subset of the state. Always use this to mutate* state. You should treat `this.state` as immutable.** There is no guarantee tha...

最近发现自己out了，对于react的认识已经跟不上时代了。所以觉得记录一下重学之路。17年学习react的时候，那还是react14.x版本，生命周期是这样的创建阶段：componentWillMountcomponentDidMountrender更新阶段：// 该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用t...