lin_fightin的博客

前言：借鉴于组内大佬开发的一个库的思路，模拟实现一个类似的。redux使用过redux的同学应该知道，redux每一个状态都需要编写特定的action和reducer，通过react-redux提供的hooks，useDispatch，useSelector去获取状态，派发aciton。比较麻烦。基于需要编写action和Reducer这一点，开发一个可以根据最初的state，自动生成action，reducer，我们使用状态的时候只需要跟useState等普通hooks一样。auto-redux介绍

概念计算机网络：是一个将分散的具有独立功能的计算机系统，通过通信设备和线路连接起来，由功能完善的软件实现资源共享和信息传递的系统。计算机系统可以是手机，电脑等等。通信设备可以是路由等等。计算机网络，通信设备，线路等搭建成一个架子。而通过软件才能实现资源共享。就好比前三个组成一个毛胚房，不能住人，而通过软件装修之后，才可以住人。计算机网络是互联的，自治的计算机集合。互联：互联互通，通信链路。自治：无主从关系。计算机网络功能1数据通信（连通性）2 资源共享【 硬件（打印机）， 软

commit阶段上节讲到了rootFiber完成completeWork的时候，返回了一个状态，为RootInCompleted，表示工作完成。调用finishConcurrentRender方法，该方法会调用commitRoot，开启commit阶段。现在回顾一下，我们的fiber结构是// App组件const App: React.FC = () => { return <DD />;};// DD组件class DD extends Component {

继上一篇react源码学习（1）创建FiberRoot和rootFiber//render调用方法function legacyRenderSubtreeIntoContainer( parentComponent: ?React$Component<any, any>, // mount是null children: ReactNodeList, // ReactElement container: Container, //容器 forceHydrate: boole

jsxjsx会被转为createElement方法，看下源码这个方法export function createElement(type, config, children) {}接受三个参数：type元素类型，对于普通元素，就是div p ，对于函数组件，就是 函数本身， 对于类组件，就是类本身config 配置属性，比如ref, key, style…children 子元素这个方法的主要作用就是：1 分离props属性和特殊属性 let propName; const

osi七层模型七层模型和五层模型的对比open System Interconnection 适用于所有网络分层带来效能，将复杂的流程分解为几个功能相对单一的子进程。就好比以前项目之后服务器渲染，现在都分为了前端后端等。从下往上：物理层： 网卡，网线数据链路层： 交换机（传输数据，确认帧，发错重传）（数据帧）网络层：路由器（处理网络间路由）（数据包）传输层： TCP/UDP,提供可靠的连接传输数据功能（在不可靠的网络层上建立可靠的传输）。（数据段）会话层：验证，会话管理，维护应用之间通信，

node支持esModule的两种方式：通过webpack搭建环境将webpack的target设为node，表示使用的是node环境，这样就可以使用node的一些内置模块，比如path。mjs第二中就是将js文件改为mjs。然后直接执行...

常用的自动化构建工具GruntGulpFlsGrunt基本用法Grunt的配置方法initConfig支持注册一些参数。module.exports = (grunt) => { grunt.initConfig({ foo: { bar: 213 } }) grunt.registerTask('test',()=>{ const bar = grunt.config('foo

阅读了掘金小课《React进阶实战指南》,做的笔记加自己的一些总结。部分资源来自掘金小课《React进阶实战指南》认识JSXJsx统统被转为React.createElement,createElement参数：第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props 。其他参数：依次为 children，根据顺序排列。如<div>

Yeomanyeoman官网Yeoman 是一个通用的脚手架系统允许创建任何的 app 。它可以迅速的搭建一个新项目，并且能够简化了现有项目的维护。使用步骤：1 明确需求 ( npm i -g Yo)2 找到合适的Generator3 全局范围安装Generator (npm i -g generator-node)4 通过Yo 运行对应的Generator( Yo node)5 通过命令行交互填写选项、6 生成项目结构自定义GeneratorGenerator实际上就是一个

JS性能优化内存内存：由可读写单元组成，表示一片可操作空间。管理：人为的操作一片空间的申请，使用和释放。内存管理：开发者主动申请空间，使用空间，释放空间等。js的垃圾js的内存管理是自动的。对象不再被引用时就是垃圾。对象不能从根上访问到时就是垃圾。（js的根可以理解为全局变量对象）GC算法垃圾回收机制的简写GC可以找到内存中的垃圾，并释放和回收空间。算法就是工作时查找和回收所遵循的规则。优点：发现垃圾立即回收。最大限度的减少程序暂停。缺点：循环引用对象无法回收时

ECMAScriptECMAScirpt与js的关系ECMAScript是一个脚本语言规范，通常看作是js的标准规范，但是js其实是ES的扩展语言。在ES钟，只是提供了最基本的语法，停留在语言层面。而js是实现了ES的标准，并且在基础之上实现了其他的功能。在浏览器中，js = ES + webApis(BOM,DOM)在node中，js = ES+nodeApis(fs,net,etc…)...

脚手架实现原理当我们在终端输入vue create xx的时候终端会去全局环境变量中，找到vue指令的方法查看create-react-app的位置，所有通过npm -g安装的包都会放入该目录下。在终端输入create-react-app之后、终端解析命令终端在上述的环境变量中找到creat-react-app命令脚本window在C:\Users\Administrator\AppData\Roaming
pm可以找到create-react-app.cmd，如上图，这是一个软链接

最近在做页面抽成组件然后发布，期间也是遇到了很多问题和坑，现在顺便分享一下。dumi官网dumi为组件开发场景而生的文档工具，这里注重分享打包的过程，fatherdumi使用father打包，father文档1 使用rollup打包的时候报错。father提供了几种打包的方式，umd, cjs, esm。也支持使用rollup或者babel来打包成cjs/esm。一开始选择的是rollup来打包。出现的问题：rollup只支持esmodule，不支持commonjs，如果你的组件库引用

什么是JWTJWT的全称是JSON Web Token。一个jwt由三部分构成：Header，payload，Signature(签名)。Header部分主要规定了token的加密方式。如{alg: "xx", type: "JWT"}payload是token中包含的重要信息。Signature，就是header的base64的值+payload的base64+密钥组成的HS256算法，左边就是生成的token。JWT特点：防止CSRF，跨站请求伪造。适合移动应用无状态

WebsocketWebsokcet是H5开始提供的一种浏览器与服务器进行全双工通讯的网络技术通俗的讲，就是在客户端和服务器有一个持久的链接，两边可以在任意时间开始发送数据。属于应用层协议，它是基于TCP传输协议的，并复用HTTP的握手通道。websocket连接websocket服用了http的握手通道。具体就是，客户端通过http请求，与websocket服务端协商升级协议，协议升级完毕之后，后续的数据交换则遵守Websocket的协议。请求体中Upgrade表示升级为webso

NoSql数据库，非关系型易扩展，高性能，高可用较容易映射复杂数据（key-value）无事务特性要求(ACID特性)

函数式编程FPFP是编程范式之一，除此之外，还有面向过程编程，面向对象编程.面向对象编程的思维方式：把现实世界中的事物抽象成程序世界中的类和对象。通过封装，继承和多态来演示事务事件的联系。函数式编程的思维方式：把现实世界的事物和事物之间联系抽象倒程序世界，对运算过程进行抽象本质：根据输入通过某种计算获的相应的输出。x->f (联系，映射) =>y ,即 y=>f(x)函数式编程中的函数不是指程序中的函数或者方法，而是数据中的映射关系，如y=sin(x)，x和y的关系。相同

原生div p标签等的bieginWorkclass DD extends Component { render() { return <div>123</div>; }}上面调式了DD类组件的fiber，接着看类组件返回的子fiber，div标签的fiber是怎样的。对于原生html的fiber，fiber.tag是5export const HostComponent = 5; //原生标签hostComponent的fiber{altern

HTTP/IPHTTP/IP协议被称为传输控制协议/互联网协议，又称为网络通讯协议创建服务器const http = require("http");const fs = require("fs");const path = require("path");const { Buffer } = require("buffer");const url = require("url");const server = http.createServer((req, res) => {