双语

Why Do We Write super(props)? — overreacted
15 hours ago
- 在JavaScript中，在类构造函数中使用`this`之前需要调用`super()`；React类组件继承了这一规则。
- 将`props`传递给`super(props)`并非严格必要，因为React会在构造函数运行后赋值`this.props`，但它确保在构造函数中`this.props`可用。
- `super(props)`的惯例可以防止混淆和错误，尤其是在构造函数内部调用方法时。
- React的构造函数还接收`context`作为第二个参数，但不太常用。
- 类字段提案和Hooks在许多情况下消除了显式调用`super()`的需求。
How Does React Tell a Class from a Function? — overreacted
15 hours ago
- React 根据组件是函数还是类来区别对待，需要直接调用函数或用 `new` 实例化类并调用 `render`。
- JavaScript 中的 `new` 运算符用于为类构造函数创建对象，但将其用于箭头函数或非类函数会导致错误或意外行为。
- React 不能简单地对所有组件使用 `new`，因为这会破坏箭头函数并阻止对原始返回类型的支持。
- React 通过检查原型上特殊的 `isReactComponent` 标志来区分类和函数，该标志被添加到 `React.Component` 上。
- 使用 `instanceof` 检查类继承不可靠，因为存在多个 React 副本以及某些转译代码中缺少静态属性等问题。
- `React.Component.prototype` 上的 `isReactComponent` 标志为 React 提供了一种实用且可靠的方法来确定组件类型。
Why Do React Elements Have a $$typeof Property? — overreacted
15 hours ago
- React 元素是通过 JSX（函数调用）创建的普通对象，包含 type、props、key、ref 以及 $$typeof 属性。
- 带有 Symbol 值的 $$typeof 属性是 React 0.14+ 中的一项安全特性，用于防止恶意 JSON 对象引发的 XSS 攻击。
- 如果服务器存在安全漏洞，返回 JSON 而不是文本，$$typeof 的 Symbol 检查会拒绝无效元素，因为 JSON 中无法包含 Symbol。
- 在不支持 Symbol 的浏览器中，$$typeof 被设置为数字 0xeac7（类似于 'React'）以保持一致性，尽管保护性较弱。
My Wishlist for Hot Reloading — overreacted
15 hours ago
- 作者讨论了他们对热重载的长期兴趣，以及多次尝试在React中实现它的经历。
- React中的热重载目前可用但不完美，存在类方法替换不可靠等问题。
- 一个关键见解是，热重载函数比类更容易，而有了Hooks，函数组件功能完备，使得这种方法可行。
- 作者提出了一个草图，其中Babel插件将每个函数组件拆分为两部分，使用全局变量交换实现，同时通过保持Hook调用顺序来保留状态。
- 文章列出了评估热重载实现的原则：正确性（编辑前不可观察，遵循React规则）、局部性（最小化重新执行，保留父/兄弟状态）和反馈（视觉成功/失败指示，最小干扰）。
- 关键规则包括确保元素类型匹配，支持所有React类型如lazy/memo/forwardRef，并在正确性不可靠时优先选择状态丢失。
- 愿望清单还包括保留子组件状态、支持自定义Hook、渲染属性和高阶组件，当假设变化时回退到状态重置。
- 反馈机制应包括语法错误覆盖层、修复后自动消除，以及// !强制重挂载或// inspect调试等工具。
- 作者旨在优化快速迭代、优雅处理错误，并通过可预测性维护信任，同时承认JavaScript的局限性。
How Does setState Know What to Do? — overreacted
15 hours ago
- `react` 包只提供定义组件的API，而实际实现（如DOM更新）则由像 `react-dom` 这样的渲染器处理。
- `React.Component` 中的 `setState` 并不直接更新DOM；它委托给组件实例上设置的渲染器特定的 `updater` 字段。
- 像 `useState` 这样的 Hook 使用类似的模式，通过一个 `dispatcher` 对象，该对象在渲染组件之前由渲染器设置。
- 这种分离使得React能够在不同平台（DOM、React Native等）上工作而无需更改组件代码，并且它是一种依赖注入的形式。
How Are Function Components Different from Classes? — overreacted
15 hours ago
- 函数组件通过闭包捕获特定渲染的props和state，从而避免了类组件中可变的`this`导致的bug。
- 类组件从`this.props`或`this.state`中读取数据，这些数据是可变的，可能会导致在异步回调（如定时器）中获取到错误的值。
- 要修复类组件中的bug，开发者通常显式传递props或在`render`中使用闭包，而闭包是函数组件天然具备的特性。
- 同样的原则也适用于Hooks：函数组件在渲染时捕获状态，确保在异步处理程序中的行为正确。
- 要读取最新的props或state，可以使用`useRef`作为逃生舱，但这需要手动管理，并非默认行为。
- Hooks中的过时闭包通常是由于对值稳定性的错误假设；闭包本身是一个提高正确性的特性。
- 函数组件和类组件之间的性能差异可以忽略不计；选择取决于思维模型和代码清晰度。
Writing Resilient Components — overreacted
15 hours ago
- 样式指南和代码检查可能会分散注意力；应专注于组件设计原则以提高韧性。
- 原则1：不要让数据流中断——避免将props复制到state中，确保副作用尊重prop/state的变化，并使用带有显式依赖项的useEffect等钩子。
- 原则2：始终准备进行渲染——避免依赖像componentWillReceiveProps这样的旧版生命周期方法；组件应优雅地处理重新渲染。
- 原则3：没有组件是单例——设计组件使其在多个实例挂载时也能正确工作（例如，避免在卸载时清理全局状态）。
- 原则4：保持本地状态隔离——区分真正的本地状态（例如，UI交互）和全局状态（例如，服务器数据）；不要不必要地提升本地状态。
- 使用Prettier进行格式化，使用代码检查来发现错误，而不是强制遵循任意的样式规则。
Algebraic Effects for the Rest of Us — overreacted
15 hours ago
How Does the Development Mode Work? — overreacted
15 hours ago
- 开发模式包含有助于检测错误的警告，但会增加打包体积并降低性能。
- __DEV__ 常量在构建时被替换，而压缩工具会在生产环境中移除死代码。
- 像 webpack 这样的打包工具会将 process.env.NODE_ENV 模式替换为字符串字面量。
- 死代码消除需要静态条件；复杂的表达式或模块边界可能无法生效。
- 像 Create React App 这样的现代工具将开发和生产构建分离为不同的命令。
- 开发警告应默认开启，以便尽早捕获错误，尤其是针对新用户。
- process.env.NODE_ENV 的约定源自 Node.js，并被 browserify 和 React 采用。
- React 现在预编译了开发和生产环境的分离包，以避免运行时检查。
- 文章倡导将模式作为 JavaScript 环境中的一等概念。
My Decade in Review — overreacted
15 hours ago
- 以17岁大学新生的身份在俄罗斯开启这十年，失去动力后辍学，转而投身软件开发。
- 第一份工作在一家外包公司，年薪1.8万美元；后来辞职，通过一个免费志愿者项目学习网页开发。
- 被一家俄罗斯社交媒体公司的理想职位拒绝后，被Roman Mazurenko聘用，在莫斯科开发iPad应用（Stampsy）。
- 2014年转向使用React进行网页开发，创建了热模块替换和Redux等开源工具。
- 2015年在ReactEurope上首次发表关于React和时光旅行调试的会议演讲，因此获得Facebook伦敦办公室的工作邀请。
- 2015年底迁居伦敦，面临语言、官僚体系和税务挑战；远程加入React核心团队。
- 2016年共同创建了Create React App，并为React 16重写做出贡献；以解释和构建UI工具为职业。
- 个人里程碑：结婚、朋友Roman Mazurenko去世，以及在公开演讲和副项目中的成长。
- 以专注于教学和构建结束这十年，承认自己的特权以及开源贡献的影响。
Before You memo() — overreacted
15 hours ago
The Two Reacts — overreacted
15 hours ago
- React 组件可以在客户端（用户设备）或服务器（创建者设备）上运行，各自具有不同的优势。
- 客户端组件通过使用本地状态并避免网络延迟来实现即时交互（例如计数器），遵循 UI = f(state)。
- 服务器端组件可以访问本地数据源（例如文件系统），并在发送仅需要的 UI 之前预处理数据，遵循 UI = f(data)。
- 这两种范式看似不兼容：客户端需要状态和低延迟，服务器需要数据和集中处理。
- 实际应用通常需要两种模式，促使需要在不同环境间拆分组件，同时保持 React 的可组合性。
What Does "use client" Do? — overreacted
15 hours ago
- 'use client' 和 'use server' 指令将向客户端发送代码（作为脚本）和通信回传（作为 fetch）抽象化，使得客户端/服务器边界在模块系统中成为语法层面的一部分。
- 'use server' 允许将服务器函数导出，并从客户端作为异步 HTTP 调用进行调用，提供了一种类型安全、可静态分析的 RPC 机制。
- 'use client' 允许服务器代码导入客户端组件作为引用，这些引用会变为 <script> 标签，并可选择性地进行服务器端预渲染以生成初始 HTML。
- 这两个指令共同使得将客户端/服务器应用程序建模为跨越两个环境的单一程序成为可能，具备类型安全、死代码分析和可复用抽象。
- 这些指令并非 React 专有；它们代表了一种类似于结构化编程或 async/await 的范式，在模块层面表达了网络鸿沟。
- 两个指令在导入时都不会执行代码；它们仅提供引用（客户端引用或异步函数）来桥接两个运行时环境。
Static as a Server — overreacted
15 hours ago
I'm Doing a Little Consulting — overreacted
15 hours ago
- 2023年7月离开Meta，随后在Bluesky工作了近两年，专注于React Native和工程管理。
- 离开Bluesky后休假了一段时间，目前处于自由状态，对自己的技能和行业的未来感到不确定。
- 重启了博客，主要撰写关于React Server Components的内容，现在通过1对1按小时通话提供UI工程（React/React Native）咨询。
The Electron view that stayed blank until you resized the window
13 days ago
- 通过WebContentsView嵌入Chromium会导致原生视图始终置顶，需在覆盖层打开时隐藏和显示。
- 零尺寸视图会失去合成器表面；通过停放在1×1像素处修复。
- 长时间隐藏会驱逐帧；恢复需要跨事件循环轮次的两步尺寸更改。
- React效果清理和去重缓存错误可能阻止适当的边界更新，导致空白视图。
- 调试必须针对实际故障层，因为应用截图可能误导屏幕空白情况。

react

Why Do We Write super(props)? — overreacted

How Does React Tell a Class from a Function? — overreacted

Why Do React Elements Have a $$typeof Property? — overreacted

My Wishlist for Hot Reloading — overreacted

How Does setState Know What to Do? — overreacted

How Are Function Components Different from Classes? — overreacted

Writing Resilient Components — overreacted

Algebraic Effects for the Rest of Us — overreacted

How Does the Development Mode Work? — overreacted

My Decade in Review — overreacted

Before You memo() — overreacted

The Two Reacts — overreacted

What Does "use client" Do? — overreacted

Static as a Server — overreacted

I'm Doing a Little Consulting — overreacted

The Electron view that stayed blank until you resized the window