Monaco 是一个代码编辑器，大名鼎鼎的 VS Code 便是基于 Monaco 实现。
背景
在公司里做了一个 PC 端应用，应用名 RPCUI，开发语言 Objective-C。可以在该应用中发起 RPC 调用，调试接口。
RPCUI 实现了一个 JSON 编辑器，用于呈现 RPC 的输入和输出数据。这个编辑器实现原理很简单：使用 WKWebView 加载 Monaco，然后再将 webView 贴到原生视图上。
本文介绍 Monaco 使用的一些实用功能。
置身事内-读书笔记
React 实现原理之异步渲染
React 从 v16 开始逐步引入异步可中断的渲染架构。
React 渲染过程可以分为三个阶段 Scheduling、Reconciliation、Commit。
Scheduling 阶段执行任务调度，Reconciliation 阶段更新虚拟 DOM，本文主要讲述这两个阶段。(Commit 阶段更新 UI。e.g. 在浏览器环境中更新 DOM、在移动端环境中更新 Native 视图。)
本文基于目前最新的 React v18.2.0 代码。
理解 JSX
JSX 简介
JSX 的介绍参考 React 官方文档 JSX 简介。
JSX 编译后会转为名为 React.createElement 的函数调用。
React.createElement 函数签名
1 | function createElement(type: any, props?: any, ...children: ReactNode[]) |
createElement 函数接收三个参数。
第一个参数为节点类型 type。比如，若在 JSX 中是 div，则 type 为 “div” 字符串；若在 JSX 中是自定义函数组件 CustomComponent，则 type 为 CustomComponent 函数。
第二个参数为节点属性 props。比如，若 JSX 中声明 <div className="wrap">，则 props 为 { className: "wrap" }；若 JSX 中声明 <div>，则 props 为 null。
第三个参数为不定参数，每个参数值对应一个当前节点的子节点。