本文大部分来自ConardLi 的 blog，建议直接看原博客
概述Mixin 的危害React 官方文档在Mixins Considered Harmful一文中提到了 Mixin 带来了危害：
Mixin 可能会相互依赖，相互耦合，不利于代码维护
不同的 Mixin 中的方法可能会相互冲突
Mixin 非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性
React 现在已经不再推荐使用 Mixin 来解决代码复用问题，因为 Mixin 带来的危害比他产生的价值还要巨大，并且 React 全面推荐使用高阶组件来替代它
HOC 简介HOC-官方文档...
简介CSS Modules 不同于 less，sass 等，不是把CSS改造成编程语言，而是功能很单纯，只加入了局部作用域和模块依赖
解决的问题
全局样式冲突（主要问题）
css选择器嵌套过深，有性能问题
代码冗余（无继承）
模块化
局部作用域CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。这使得在开发中很可能有类名相同造成相互影响的情况，多层嵌套css又会造成性能问题。
产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法
基本写法一个React组件App.js。
12345678910imp...
初识 TypeScript什么是 TS
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上
TS 的优点和缺点优点：
增加了代码的可读性和可维护性。写代码的时候有更多的编译提示，代码语义更清晰易懂
包容性
拥有活跃的社区
缺点：
一定的学习成本；短期可能会增加一些开发成本，毕竟要多写一些类型的定义
集成到构建流程需要一些工作量
可能和一些库结合的不是很完美
详见 什么是 TS
基本使用方法
编译代码：在命令行用 tsc <文件名> 的方式编译 .ts 文件，...
如何真正的打乱数组?
12let arr = [1, 2, 3]arr.sort(() => Math.random() - 0.5)
上述代码看似可以打乱，但是不是真正的打乱。做下测试：
123456789101112131415161718192021222324252627const RandomShuffle = (arr) => { return arr.sort(() => Math.random() - 0.5)}const testResult = () => { let times = 100000 le...
前言经过一番折腾之后项目终于上线了（喜极而泣，坑好多），博客项目部署在 JacleKlm.com，先写一篇文章记录下近期的折腾所得吧。
云服务器买的腾讯云服务器最便宜的那种，买域名，备案审批
云服务器中，更多-安全组-配置安全组-点连接，可以设置端口的开启及可以访问的人
LinuxLinux 是一个性能稳定的多用户网络操作系统，经常用来跑服务器，eg. Linux + Nginx + MySQL + Node.js
Linux 常见命令
Vim（用来打开文件）
Vim 下，i 是进入编辑模式；esc 再:wq 是保存退出，:q 是退出，:q! 是强制退出；
Vim 查找。在 normal...
基本原理Virtual Dom虚拟 DOM 本质上是 JavaScript 对象,是对真实 DOM 的抽象，状态变更时，通过 diff 算法计算出记录新树和旧树的差异，最后把差异更新到真正的 dom 中
虚拟 DOM 的实现相较于 DOM 来说，操作 JS 对象会快很多，并且我们也可以通过 JS 来模拟 DOM
12345678910const ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li...
概述来源该项目是技术胖的一个项目，涉及了前台中台后台，觉得是个不错的练手项目.
概述博客前台： React Hooks + Next.js + marked + highlight + Ant Design数据中台： Egg.js（阿里的一个基于 Koa2 的框架） + MySQL管理后台： React Hooks + Ant Design （不用 Next.js）
Next.js 是一个轻量级的 React 服务端渲染应用框架。有了它我们可以简单轻松的实现 React 的服务端渲染，从而加快首屏打开速度，也可以作 SEO（搜索引擎优化了）。并且路由，webpack 配置等也是框架配置...
React Router路由原理前端路由的本质是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面，核心是改变视图的同时不会向后端发出请求。目前前端使用的路由就只有两种实现方式:Hash 模式和 History 模式
Hash 模式Vue-router 默认是 hash 模式
www.test.com/#/ 就是 Hash URL（有 /#/ 就是），当 # 后面的哈希值发生变化时
hash 的修改不会导致浏览器刷新，因为 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中
所以我们可以通过 hash...
定义柯里化是指将一个函数分解为一系列函数的过程，每个函数都只接收一个参数函数柯里化，英语：Currying，高阶函数的一个特殊用法。是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术
一个简单的例子:
12345678910function add(a, b) { return a + b}add(1, 5) // 6function curryingadd(x) { return function(y) { return x + y }}cu...
什么是内存泄露程序的运行需要内存。只要程序提出要求，操作系统就会给内存。进程应及时释放不再用到的内存。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）大多数语言提供自动内存管理，减轻程序员的负担，这被称为垃圾回收机制（garbage collector）
垃圾回收引用计数思想：跟踪记录所有值被引用的次数（阮一峰说引用计数是最常使用的，红宝书说到 2008 年为止标记清除是最常用的）JS 引擎有一张”引用表”，保存了内存里面所有的资源（通常是各种值，比如数组）的引用次数。如果一个值的引用次数是 0，就表示这个值不再用到了，因此可以将这块内存释放如果一个值不再需要了，引...
常见兼容性问题
png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8
浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一，但是全局效率很低，一般是如下这样解决：
1body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0; }
IE 下，event 对象有 x,y 属性，但是没有 pageX，pageY 属性
Firefox 下，event 对象有 pageX,pageY 属...
概念解决JS单线程，遇到计算密集型或高延迟的任务时发生阻塞的问题Web Worker 的作用，就是允许主线程创建 Worker 线程，承担一些费时的任务Worker线程可以有多个，但是使用完最好计时关闭
一个简单的例子帮助理解改进前：
123456789101112<body> <button id="btn">点击</button> <h1 id="num"></h1> <script> //在子线程 模拟一个耗时操作 for (...
