update: 2 posts

posts/relearn_react_11.md

@@ -0,0 +1,67 @@
+---
+title: Relearn React 11
+published_at: 2024-11-26T15:00:00.000Z
+snippet: Relearning React from react.dev, yes, arrays.
+---
+
+## From "Reacting to Input with State"
+
+### Declarative vs Imperative
+
+React is declarative, which means you describe what you want to happen, and React takes care of the rest.
+
+In imperative programming, you describe each step to achieve a result.
+
+```jsx
+// Imperative
+const element = document.createElement("h1");
+element.textContent = "Hello, world!";
+document.body.appendChild(element);
+element.textContent = "Hello, React!";
+```
+
+In declarative programming, you describe the result you want, and React takes care of the rest.
+
+```jsx
+// Declarative
+function Greeting() {
+  const [name, setName] = useState("Hello, world!");
+  return <h1>{name}</h1>;
+}
+
+// in some event handler
+setName("Hello, React!");
+```
+
+### How to develp a component
+
+1. find out all the visual states.
+2. determine the human or computer events that can change each state.
+3. using `useState` to declare the state variables.
+4. remove unnecessary state variables.
+5. connect the event handlers to change the state variables, using `useState`'s setter functions.
+
+## Deep Dive
+
+### Eliminating "impossible" states with a reducer
+
+Reducers let us unify multiple state variables into a single object and consolidate all the related logic. This can help us avoid "impossible" states in our application.
+
+```jsx
+const [state, dispatch] = useReducer(reducer, initialState);
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "increment":
+      return { count: state.count + 1 };
+    case "decrement":
+      return { count: state.count - 1 };
+    default:
+      throw new Error();
+  }
+}
+```
+
+## References
+
+- [Finite state machine](https://en.wikipedia.org/wiki/Finite-state_machine)

posts/relearn_react_11_zh.md

@@ -0,0 +1,71 @@
+---
+title: 重新学习 React 11
+published_at: 2024-11-26T15:00:00.000Z
+snippet: 从 react.dev 重新学习 React，没错，关于数组。
+---
+
+## 来自 “用状态响应输入”
+
+### 声明式 vs 命令式
+
+React 是声明式的，这意味着你只需要描述你想要发生的事情，React 会处理其余部分。
+
+在命令式编程中，你需要描述实现结果的每一步。
+
+```jsx
+// 命令式
+const element = document.createElement("h1");
+element.textContent = "Hello, world!";
+document.body.appendChild(element);
+element.textContent = "Hello, React!";
+```
+
+在声明式编程中，你只需要描述你想要的结果，React 会处理其余部分。
+
+```jsx
+// 声明式
+function Greeting() {
+  const [name, setName] = useState("Hello, world!");
+  return <h1>{name}</h1>;
+}
+
+// 在某些事件处理器中
+setName("Hello, React!");
+```
+
+### 如何开发一个组件
+
+1. 找出所有的视觉状态。
+2. 确定能改变每个状态的人类或计算机事件。
+3. 使用 `useState` 声明状态变量。
+4. 移除不必要的状态变量。
+5. 连接事件处理器，通过 `useState` 的 setter 函数改变状态变量。
+
+## 深入探讨
+
+### 使用 reducer 消除“不可能”的状态
+
+Reducers 让我们可以将多个状态变量合并到一个对象中，并整合所有相关的逻辑。这可以帮助我们避免应用中的“不可能”状态。
+
+```jsx
+const [state, dispatch] = useReducer(reducer, initialState);
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "increment":
+      return { count: state.count + 1 };
+    case "decrement":
+      return { count: state.count - 1 };
+    default:
+      throw new Error();
+  }
+}
+```
+
+## 参考资料
+
+- [有限状态机](https://en.wikipedia.org/wiki/Finite-state_machine)
+
+```
+
+```

posts/relearn_react_12.md

@@ -0,0 +1,98 @@
+---
+title: Relearn React 12
+published_at: 2024-11-27T15:00:00.000Z
+snippet: Relearning React from react.dev, yes, arrays.
+---
+
+## From "Choosing the State Structure"
+
+### Principles of structuring state
+
+#### Group related state.
+
+```jsx
+// Bad
+
+const [name, setName] = useState("Alice Smith");
+const [age, setAge] = useState(42);
+
+// Good(it depends)
+const [user, setUser] = useState({ name: "Alice Smith", age: 42 });
+```
+
+#### Avoid contradictions in state
+
+```jsx
+// Bad
+const [isToggled, setIsToggled] = useState(false);
+const [isDisabled, setIsDisabled] = useState(true);
+```
+
+#### Avoid redundant state
+
+```jsx
+// Image a user object is a props from parent component
+const user = {
+  firstName: "John",
+  lastName: "Doe",
+  birthYear: 1990,
+};
+
+// Derive these values instead of storing them as state
+const fullName = `${user.firstName} ${user.lastName}`;
+const age = new Date().getFullYear() - user.birthYear;
+const canVote = age >= 18;
+```
+
+#### Avoid duplication in state
+
+```jsx
+// BAD: Duplicated state
+const [cart, setCart] = useState([
+  {
+    id: "p1",
+    name: "Laptop", // Duplicated from products
+    price: 999.99, // Duplicated from products
+    quantity: 1,
+    totalPrice: 999.99, // Redundant - can be calculated
+  },
+  // ... more items with duplicated data
+]);
+```
+
+#### Avoid deeply nested state
+
+```jsx
+
+// BAD: Deeply nested state
+const [projects, setProjects] = useState({
+  p1: {
+    tasks: {
+      t1: {
+        subtasks: {
+          s1: { title: "Task 1", completed: false },
+        },
+      },
+    },
+  },
+});
+
+// GOOD: Flattened state
+const [projects, setProjects] = useState({...});
+const [tasks, setTasks] = useState({...});
+const [subtasks, setSubtasks] = useState({...});
+
+```
+
+## Pitfalls
+
+### Update object in state
+
+Directly mutating an state object didn't trigger a re-render. The better way is to create a new object with the updated values.
+
+## Deep Dive
+
+
+## References
+
+- [Normalization in Database](https://learn.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description)