ctocto / ctocto.github.io Goto Github PK

• 等待执行完上一轮渲染的 useEffect
• 重置一些全局变量(如：workInProgressRoot)
• 更新副作用列表 effect list。根节点的副作用列表是不包括自身的，如果根节点有副作用, 则需要把根节点添加到副作用列表的末尾
• 渲染
• 执行 componentDidMount、componentDidUpdate
• 执行 useLayoutEffect 的回调函数
• 注册 useEffect 的回调函数和销毁函数，等 commit 阶段结束后再异步执行
• 执行 DOM 增删改
• 执行 useLayoutEffect 的销毁函数
• 执行 getSnapshotBeforeUpdate
• 调度 useEffect
• beforeMutation
• mutation
• 切换当前 fiber 树(root.current = finishedWork)，使得 fiberRoot 的 current 指向的是当前页面展示的 fiber 树。
  layout

Developer Roadmaps

Web 组件

• wangEditor：开源 Web 富文本编辑器，开箱即用，配置简单
• GSAP: 面向现代网络的专业级JavaScript动画
• imaskjs：一个框架无关的 input 输入代理工具，基于此可以轻松一个 input 变体组件，类似常见的 InputNumber。支持Vue、React等主流框架。
• CodeMirror：Web的代码编辑器组件。它可以在网站中用于实现文本输入字段，并支持许多编辑功能，并具有丰富的编程接口以允许进一步扩展。
• particles.js：用于创建粒子的轻量级JavaScript库。

React

• AG Grid：table组件，支持js、react、vue、angular
• react-flow：流程图
• react-diagrams：流程图
• 一个基于JS的数据驱动的节点式编排组件库
• dnd kit: 重量轻、性能好、易于接近且React的可扩展拖放工具包。
• React-Resizable: 一个可以通过手柄调整大小的简单小部件。
• GGEditor: 基于 G6 和 React 的可视化图编辑器
• React Flip Numbers: 翻转数字组建
• Recoil: React 状态管理库

Web 桌面端

• Electron: 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
• Tauri: 使用web前端构建更小、更快、更安全的桌面应用程序。

Node.js Web 服务框架

• Nest.js: 渐进Node.js框架，用于构建高效、可靠和可扩展的服务器端应用程序。
• Midway: 淘宝前端架构团队，基于渐进式理念研发的 Node.js 框架，通过自研的依赖注入容器，搭配各种上层模块，组合出适用于不同场景的解决方案。
• Lad: Lad是最好的Node.js框架。由前Express TC和Koa团队成员制作。

Node.js ORM 框架

• Sequelize: 是一种现代TypeScript和Node.js ，用于Postgres、MySQL、MariaDB、SQLite和SQL Server等的js ORM。具有可靠的事务支持、关系、即时和延迟加载、读取复制等功能。
• TypeOrm: TypeScript and JavaScript support. Supports MySQL / MariaDB / Postgres / CockroachDB / SQLite / Microsoft SQL Server / Oracle / SAP Hana / sql.js.
• Prisma: Prisma客户端可用于任何Node.js或TypeScript后端应用程序（包括无服务器应用程序和微服务）。这可以是REST API、GraphQL API、gRPC API或任何需要数据库的其他API。

运行时

• Node.js: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
• Deno: Deno is a simple, modern and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust.
• Bun: Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in.

Web3D

引擎

• threejs:
• babylonjs: Web3D渲染引擎
• lingo3d：是一个 Web 端 3D 游戏开发工具链，能让开发者通过 React/Vue 和 JavaScript 开发出炫目的3D沉浸式体验。
• Oasis Engine：是一套 Web 为先，移动优先的互动引擎，使用 Typescript 编写。

例子

• dragonir/3d：海岛、数字城市、地球。。。
• Three.js实现汽车VR看内饰

Web3

• Web3.js: Web3是一套和以太坊节点进行通信的API，如果我们需要基于以太坊来开发去中心化应用，就可能需要使用web3（或者使用 ethers.js ），例如需要通过Web3来获取节点状态，获取账号信息，调用合约、监听合约事件等等。
• ethers.js: 为以太坊区块链及其生态系统提供一个小而完整的 JavaScript API 库 它最初是与 ethers.io 一起使用，现在已经扩展为更通用的库。ethers.js 对比使用 web3.js 代码量更少，接口也更简洁，推荐优先使用 ethers.js 。

好文

• 你可能不知道 tree shaking
• JavaScript 算法与数据结构
• 算法笔记
• 前端灰度发布落地方案
• 【Nginx配置教程】upstream与proxy_pass实现反向代理配置教程
• 重学JSON.stringify
• 基于less和sass的在webpack或vite中的动态主题的实现方案
• 区块链技术:
• 透过console.log来看stream.write: 这篇文章从console.log入手，对流的写入进行层层剖析。
• React 实现keepalive：React中没有keepalive？没事！手把手教你从零到一设计并实现一个！
• 前端第一次做游戏，竟然选择做个3D游戏: CocosCreator可以用TS写游戏
• [] == ![] ？揭晓你不知道的 ==：基本数据比较：转化为number再进行比较，复杂数据类型比较：先调用 object的valueOf方法，若结果为基本数据类型，则返回结果进行比较；否则调用object的toString方法，若结果为基本数据类型，则返回结果进行比较，否则抛出错误。
• React Fiber结构解析：一个Fiber是一个包含组件及其输入、输出信息的JS对象，一个Fiber对应一个堆栈帧，也可以对应一个组件实例。
• 一文搞懂React中props导致的更新：为什么组件没有接收state的值，也会被更新...
• pnpm才是前端工程化项目的未来：pnpm的出现完美解决了依赖包重复安装的问题，并且实现了yarn带来的所有优秀体验

工具

• crontab执行时间计算：Linux 、Java(Spring) 、Java(Quartz)
• 生成在线占位图：在线的，自定义大小、颜色
• nodejs javascript 语法支持快查表：nodejs 所支持的javascript
• 一个实现汉字与拼音互转的小巧web工具库: 一个实现汉字与拼音互转的小巧web工具库，另外还包含一个非常非常简单的JS版拼音输入法。
• SVGPathEditor：SVG路径编辑器
• Portainer：是一个轻量级的“通用”管理GUI，可用于轻松管理Docker、Swarm、Kubernetes和ACI环境。
• transform.tools：json-to-jsdoc、json-to-typescript、svg-to-jsx、html-to-jsx、css-to-js...
• electerm：基于electron/ssh2/node pty/xterm/antd/subx和其他libs的终端/ssh/sftp客户端（linux、mac、win）。
• bpmn-js：BPMN 2.0查看器和编辑器。
• 一个基于JS的数据驱动的节点式编排组件库
• cascader-address-options.js: 省市区
• css3test: 此测试检查CSS3具有浏览器识别的哪个特征，而不是是否正确实现。
• GeoJSON：地理坐标数据生成
• lath: 纯前端容器，带来与本地应用程序相当的交互体验。
• memlab: 是一个E2E测试和分析框架，用于查找JavaScript内存泄漏和优化机会。
• Satori：将HTML和CSS转换为SVG🫥
• CSS Grid Generator：是一个在线工具, 可以帮助用户在线创建和设计CSS Grid布局. 用户可以使用该工具来设置网格的行和列，设置网格线的间隔以及定义网格项目的大小和位置。这个工具同时也支持预览，你可以在实时预览中查看效果，并可以直接复制和粘贴生成的CSS代码到你的项目中使用。
• Learn Css Grid：Css Grid 学习指南
• Fancy Border Radius Generator：是一个在线工具，允许用户生成自定义的CSS代码来创建带有边框弧度的图像。用户可以使用滑块或文本字段来调整各个角的弧度，并在实时预览中查看效果。
• CSS Clip-path Maker：是一种工具，可让您轻松创建惊人的复杂形状，然后为您生成 CSS 代码。
• Shadow Brumm：一个在线工具，可用于生成基于 CSS 的阴影。
• Get Waves：如果你想为你的网站设计生成漂亮的 SVG 波浪形状，Get Waves 将帮助你。
• Neumorphism：是一种设计风格，它通过使用软阴影和浮雕效果来表现出物体的立体感。这种设计风格的灵感来自于物理世界中的物体形态，特别是它们的凹凸、浮雕和阴影。
• Animista：是一个在线 CSS 动画生成工具。它允许您使用预定义的动画类型和参数，快速创建自定义动画。
• CSS Gradient：是一个在线工具，可以帮助用户创建并生成 CSS 渐变代码。
• PageSpy：是一款用来调试远程 Web 项目的工具。
• SVG Tutorial：了解如何使用SVG在HTML中编码图像。