From 72bbdb36865f2380ce91c589ab8b14f54375ec90 Mon Sep 17 00:00:00 2001
From: Max D <max@chainlabx.com>
Date: Mon, 18 Nov 2024 20:55:56 -0800
Subject: [PATCH] feat: add new article

---
 posts/relearn_react_05.md    | 63 ++++++++++++++++++++++++++++++++++++
 posts/relearn_react_05_zh.md | 58 +++++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 posts/relearn_react_05.md
 create mode 100644 posts/relearn_react_05_zh.md

diff --git a/posts/relearn_react_05.md b/posts/relearn_react_05.md
new file mode 100644
index 0000000..3f5944b
--- /dev/null
+++ b/posts/relearn_react_05.md
@@ -0,0 +1,63 @@
+---
+title: Relearn React 05
+published_at: 2024-11-18T15:00:00.000Z
+snippet: Relearning React from react.dev
+---
+
+## From "Responding to Events"
+
+Handling events, managing states, and updating the UI are the most common tasks
+in React development.
+
+We can pass event handlers function to components as props, because functions
+are first-class citizens in JavaScript. This is a very common usage pattern in
+UI frameworks.
+
+## Pitfalls
+
+### The function passed to event handlers
+
+`<button onClick={handleClick}>` vs `<button onClick={handleClick()}>`
+
+- The first one passes the function to the event handler.
+- The second one calls the function and passes the result to the event handler.
+  _This function will execute every time the component renders._ This is not
+  what you want.
+
+We can write the second one as an arrow function to avoid this pitfall.
+
+```jsx
+<button onClick={() => handleClick()}>Click me</button>;
+```
+
+### Event propagation
+
+All events propagate in React except `onScroll`, which only works on the JSX tag
+you attach it to.
+
+We can use `e.stopPropagation()` to stop the event from propagating.
+
+### PreventDefault
+
+We can use `e.preventDefault()` to prevent the default behavior of the event.
+
+## Deep Dives
+
+### Capture phase events
+
+There are three phases in event propagation:
+
+- Capturing phase: from window to target, top to bottom
+- Target phase: reaches the target
+- Bubbling phase: from target to window, bottom to top
+
+```txt
+Capturing Phase (Top to Target)   |   Bubbling Phase (Target to Top)
+----------------------------------|-----------------------------------
+window → document → html → body → div → button
+                                 ↳ button → div → body → html → document → window
+```
+
+## References
+
+- [Arrow Function](https://javascript.info/arrow-functions-basics)
diff --git a/posts/relearn_react_05_zh.md b/posts/relearn_react_05_zh.md
new file mode 100644
index 0000000..4085454
--- /dev/null
+++ b/posts/relearn_react_05_zh.md
@@ -0,0 +1,58 @@
+---
+title: 重新学习 React 05
+published_at: 2024-11-18T15:00:00.000Z
+snippet: Relearning React from react.dev
+---
+
+## 响应事件
+
+在 React 开发中，处理事件、管理状态和更新 UI 是最常见的任务。
+
+由于在 JavaScript 中函数是一等公民，我们可以将事件处理函数作为 props 传递给组件。这是 UI 框架中一个非常常见的使用模式。
+
+## 常见陷阱
+
+### 传递给事件处理器的函数
+
+`<button onClick={handleClick}>` 与 `<button onClick={handleClick()}>`
+
+- 第一种方式将函数传递给事件处理器。
+- 第二种方式调用函数并将结果传递给事件处理器。
+  _这个函数将在组件每次渲染时执行。_ 这不是你想要的结果。
+
+我们可以使用箭头函数来避免这个陷阱：
+
+```jsx
+<button onClick={() => handleClick()}>点击我</button>;
+```
+
+### 事件传播
+
+在 React 中，除了 `onScroll` 只在附加它的 JSX 标签上工作外，所有事件都会传播。
+
+我们可以使用 `e.stopPropagation()` 来阻止事件传播。
+
+### 阻止默认行为
+
+我们可以使用 `e.preventDefault()` 来阻止事件的默认行为。
+
+## 深入理解
+
+### 捕获阶段事件
+
+事件传播有三个阶段：
+
+- 捕获阶段：从 window 到目标元素，自上而下
+- 目标阶段：到达目标元素
+- 冒泡阶段：从目标元素到 window，自下而上
+
+```txt
+捕获阶段（从顶部到目标）      |   冒泡阶段（从目标到顶部）
+----------------------------------|-----------------------------------
+window → document → html → body → div → button
+                                 ↳ button → div → body → html → document → window
+```
+
+## 参考资料
+
+- [箭头函数](https://javascript.info/arrow-functions-basics)
\ No newline at end of file