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网络实现没问题，但是后面的二三两点存 ...
React系列：第七回(组件的设计模式)
本文我们聊聊react组件的设计模式(逻辑复用)一. render props在前面讲解登陆态持久化的文章中，我们实际上已经实践了render props：
const AuthRoute = ({ children}) => {
const token = getToken()
if (token) {
return <>{children}</>
} else {
return <Navigate to='/login' replace />
}
}
通过打印props我们能够看到，包裹着内容，实际上会在props中，以children的属性传递给AuthRoute组件。在AuthRoute中，我们将token的判断逻辑扔在了该组件中，其中包裹着目标组件。若有token，跳转到目标页面，否则，跳转到login。高效复用逻辑代码。
二. 高阶组件函数包裹组件，之前提到的memo就是一个实例，下面写一个HO ...
React系列：第六回(React的渲染流程)
本文简单聊聊React的渲染流程在前面介绍vue的系列文章中，我们通过手写vue类的方式，将vue的渲染流程基本介绍了，其框架底层的逻辑如下：
初次加载时， 数据的响应式处理和模版编译，完成初始化页面的显示。所谓数据的响应式就是让我们能够知道，什么地方用到了数据，然后在数据变化时，通知那些用到该数据的地方重新编译。而模版编译则是将模版代码转换成html代码，让页面能够显示
状态数据变化时， 以更新数据后的新虚拟dom和旧的虚拟dom为输入，经过diff和patch，找出差异， 更新差异，最后重新渲染
一. 那么在react中， 这个过程又是如何的呢？实际上无论什么前端框架，其渲染的逻辑都是一致的，只是实现的方式不同，react亦是如此。
初始渲染：JSX 编译 → React.createElement调用 → 执行调用生成虚拟 DOM → 基于虚拟 DOM 构建 Fiber 树 → 提交（Commit）阶段：根据 Fiber 树创建真实 DOM 挂载到页面 → 执行副作用。
更新渲染：状态变化，触发重渲染 → 生成新的虚拟 DOM → 进入调和阶段：基于新虚拟 DOM 和旧 F ...
React系列：第五回(事件)
本文记录一下原生事件和react事件机制的差异一. 基本介绍原生dom事件： 事件捕获 —> 目标dom —> 事件冒泡react事件系统（合成事件）： 事件在具体的dom节点上触发后， 会被冒泡到document上，document上所绑定的统一事件处理程序，会将事件分发到具体的组件实例中去。这一套机制被称为合成事件。
二. 执行顺序
原生事件优先执行，合成事件后执行。子元素原生事件执行、父元素原生事件执行、子元素合成事件执行、父元素合成事件执行、document原生事件执行。
阻止合成事件间的冒泡: e.stopPropagation()；阻止合成事件与最外层document上事件的冒泡： e.nativeEvent.stopImmediatePropagation()
三. 为什么要用合成事件前面说了，合成事件会模拟原生dom的行为，那么为什么不直接用原来的呢，非要自己搞一套？主要是为了平台兼容。
四：差异
绑定方式：原生事件绑定在真实 DOM，React 事件绑定在虚拟 DOM
执行机制：React 事件通过事件委托到 document 统一处理，原生是直接绑定
...