React系列：第十一回（fiber最终版）
本文介绍my_react的最终版在前作的基础上，新增了diff差异标记及commit阶段的全量更新。完整代码如下，不赘述了。
let nextUnitOfWork = null;
let wipRoot = null;
let currentRoot = null; // 新增：保存已提交的旧 Fiber 树（current 树）
let deletions = []; // 新增：保存需要删除的 Fiber 节点
// 1. 标记类型常量（精简版）
const Placement = 'PLACEMENT'; // 新增节点
const Update = 'UPDATE'; // 属性更新
const Deletion = 'DELETION'; // 删除节点
// 创建文本节点 Fiber
const createTextNode = (child) => ({
type: 'text',
props: { nodeValue: child, children: [] }
});
// 创建元素 Fi ...
React系列：第十回(commit+Reconciliation)
本文将介绍隔离fiber两个阶段：Reconciliation、Commit前文的瑕疵在上一篇文章中，我们介绍了基于fiber架构及requestIdleCallback，实现react快速渲染的demo.但是存在一点问题。仔细观察下面的代码：
const performUnitOfWork = (fiber) => {
console.log('<<<<<<<<<<<<<<<<performUnitOfWork>>>>>>>>>>>>>')
console.log('fiber>>>', fiber)
if (!fiber.dom) {
fiber.dom = createDom(fiber)
}
if (fiber.parent) {
fiber.parent.dom.appendChild(fiber.dom)
}
const elements = fiber?.props?.children ...
CSS系列：目下大前端样式的终极解决方案
本文主要介绍tailwind，这个在我看来，能够解决目前前端领域中，各种样式问题的终极解决方案，的库。
前端跟css相关的几个典型场景：移动端适配、页面换肤。相信做过的同学,无一不疯狂的掉过头发。倒不是说因为这个有多难，而是很烦，很杂。研发和产品互掐的重灾区。一套代码多端适用，确实很美好，但是这就要求项目从一开始就要严格关注到这个问题，以便后期的适配。
最近在帮一家海外的公司做项目时，发现他们的项目大量使用tailwind。更让我惊讶的是，他们的项目中，所使用到的组件，全部都是自己的开发人员自己实现的，搭配tailwind，对设计图的还原度，无限接近百分百，让我叹为观止。在接触他们之前的职业生涯中，基本上都是做的toB的业务，重逻辑功能的实现，至于ui，只要不是难看到人神共愤，基本上就可以了。接触了toC的业务之后突然发现，专业的前端，除了具备技术技能，还需要锻炼自身的美感。
tailwind这个库方便在哪？
极大的简化了css相关的代码
完美解决各端适配的问题举例：
在tailwind的配置文件中设定好自身需要的几种端的大小
screens: {
xs: '300p ...
React系列：第九回(concurrentmode、fiber)
本文介绍，react快速渲染的基石：concurrentmode、fiber上一代版本存在的问题在第一回中，我们通过手撕myCreateElement和myRender实现了基本的功能，但是仔细观察下之前写的render，是否存在什么问题？
const myRender = (element, container) => {
const dom = element.type === 'text'? document.createTextNode(element.props.nodeValue): document.createElement(element.type)
Object.keys(element.props).filter((item) => item !== 'children').forEach((item) => dom[item] = element.props[item])
element?.props?.children?.forEach((child) => myRender(child, dom))
container.append ...
发布自己的npm包
本文主要提一下，往公网上发布自己的npm包，大概的流程。目前的公司，稍微正经点的，都会有贴合自身业务的一套组件库，封装成所谓的“SDK层”，这样能够极大的减少前端项目的代码量。当然，这需要业务自身足够的稳定，否则，懂得都懂。
1. github创建一个仓库，npm初始化一下，完善包的一些必要字段。2. 假如自己想要复用的代码3. 登陆发布npm login
npm publish
具体操作参考下面文章，写的非常详细
https://juejin.cn/post/7039140144250617887
整个流程还是很简单的，当然在实操过程中碰到一个小问题。npm login 没有出现 username,反而是跳转到了cnpm注册...,解决方案：npm config set registry https://registry.npmjs.org/
更新包的版本// patch：补丁号，修复bug，小变动，如 v1.0.0->v1.0.1
npm version patch
// minor：次版本号，增加新功能，如 v1.0.0->v1.1.0
npm version minor ...
CSS系列：渐进式展示文本效果的实现
本文主要介绍一下渐进式的展示文本效果实现先给一张最终效果图：
这个效果的实现，主要是借助animate和framer-motion库的几个钩子函数useTransform、useMotionValue。
1. html部分return <motion.h2 className={className}>{displayText}</motion.h2>;
2. useTransform、useMotionValue// text为props传入的值
const textIndex = useMotionValue(0);
const baseText = useTransform(textIndex, () => text);
const rounded = useTransform(count, (latest) => Math.round(latest));
const displayText = useTransform(
rounded,
(latest) => `${baseText.get().slice(0, ...
Webpack系列：第八回
本文简单聊聊webpack同vite的差异众所周知，webpack是大部分项目的标配，而vite，更是后起之秀。原因在于vite的极速开发体验，一个字儿：快。vite是怎么做到的呢？Webpack 是 “先打包再干活”，Vite 是 “边干活边打包”——Vite 快的本质，是跳过了 “全量打包” 的冗余步骤，只在需要时才处理文件。
前者全量打包，后者按需编译，没有打包。vite利用浏览器能直接识别 ES Module（import/export）的特性，启动时只搭好服务器，不碰任何文件。浏览器要哪个文件，Vite 才去编译哪个，相当于 “按需开工”，启动速度自然秒级。注意，在开发环境下，vite是没有打包的动作的，这里的编译指的是把 “浏览器不认识的文件” 转成 “浏览器能认识的文件”，比如 TS→JS、Vue 组件→JS+CSS、Sass→CSS）。在生产环境中才会用rollup去打包
编译工具的不同。前者用的babel，后者用的esbuild(go),比 JS 快 10-100 倍
热更新。一旦代码改动，前者会编译打包变动部分，后者也是编译变化的那部分，但是没有打包的动 ...
Webpack系列：第七回
本文杂记，记录一些webpack使用过程中碰到的奇奇怪怪的问题和知识点
react18初始化项目时，没有webpack默认是隐藏的，仔细观察可以发现，项目如下方式启动
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"analyze": "source-map-explorer 'build/static/js/*.js'"
},
此时需要暴露：
npm run eject
Sourcemap（源映射）是一种文件，用于将编译后的代码映射回原始源代码。说白了就是在开发模式时，在浏览器中调试代码时，看到的是源码而不是杂乱无章的变异之后的代码
React系列：第八回(createElement、render)
本文开始，我们将用几篇文章记录下，我们的my_react的实现逻辑。类似于vue的学习过程，我们将尝试手写react的重要组成部分，以便更为彻底的理解其底层实现。涉及的内容包括：createElement、render、cocurrent mode、fiber、render commit、reconcilliation及function components。本文介绍createElement和render。
渲染整体逻辑const content = React.createElement(
'div',
{
title: 'title',
id: 'id',
},
'川崎重工'
)
console.log('content>>>', content)
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(content)
从上面代码不难看出，通过调用createElement，会生成一种dom的数据 ...
区块链文档0
本系列文章，将围绕实践中的项目，用于记录开发过程中，遇到的那些个事儿本项目也是一个极具挑战性的任务：基于opensuim开发一套前端代码编辑器，没错，就是要把vscode搬到页面上。我们的最终目的， 是为区块链开发者提供一整套在线敲代码的集成环境，渐进式提供各种链。
在正式内容开始前，先见到介绍些区块链相关的背景知识。
1.什么是区块链？区块链最好的解释就是一个公共数据库公链：任何人都可以参与的区块链，如比特币和以太坊。联盟链：需要得到许可的参与者才能加入的区块链，如R3 Corda和Hyperledger Fabric。私有链：仅允许特定组织或个人参与的区块链。
去中心化是基于P2P网络的，没有一台机器作为中心化的服务器的功能，网络中的每一台电脑都是平等的，任何一台掉线、宕机，都不会影响整个网络继续运行。
定量法币通常与背后的黄金或者所谓的GDP挂钩，算是相对固定（经济低迷时的过量发行暂且别考虑了）。加密货币，可以算作绝对的固定数量，或者少量的增发（可以弥补一些丢失的币等），防止通货膨胀。
加密
上面就是加密货币的三个典型特征，第一点借助p2p网络实现没问题，但是后面的二三两点存 ...