From b4a4365a63ce043493dbcfa4a522bfda3bfb9bf4 Mon Sep 17 00:00:00 2001
From: xszxc <2112067692@qq.com>
Date: Sun, 16 Feb 2025 23:19:45 +0800
Subject: [PATCH] =?UTF-8?q?day4:=20React=E5=9F=BA=E7=A1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Hoshino_FullStack_Compass.md | 61 ++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/Hoshino_FullStack_Compass.md b/Hoshino_FullStack_Compass.md
index f732fa8..53fbd54 100644
--- a/Hoshino_FullStack_Compass.md
+++ b/Hoshino_FullStack_Compass.md
@@ -57,4 +57,65 @@ JSX 要求标签明确关闭：像 `<img>` 这样的自闭合标签必须写成
 
 可以使用[转换器](https://transform.tools/html-to-jsx)，将现有的`html`代码转换为`JSX`代码。
 
+### 02.16
+
+今天主要过了一遍React基础部分。了解基本用法，然后准备直接上手Nxet.js框架了。
+
+- React 应用程序是由*组件*组成的。组件是 UI（用户界面）的一部分，具有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。
+- React 组件是返回 markup 的 JavaScript 函数。
+- React 组件名称必须始终以大写字母开头，而 HTML 标签必须为小写。
+- 在 React 中，使用 `className` 指定 CSS 类。然后，在单独的 CSS 文件中编写它的 CSS 规则。React 没有规定如何添加 CSS 文件。在最简单的情况下，直接向 HTML 添加 [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) 标签即可。
+
+在React中要使用响应式的变量需要从 React 导入 [`useState`](https://react.dev/reference/react/useState) ，并在代码中使用它来定义变量：
+
+```react
+import { useState } from 'react';
+
+function MyButton() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <button onClick={handleClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
+如果多次渲染同一个组件，每个组件都会得到它自己的状态。
+
+以 `use` 开头的函数称为 *Hook。*`useState` 是 React 提供的内置 Hook。Hook 比其他函数更具限制性。只能在组件（或其他 Hook）*的顶部*调用 Hook。如果想在条件或循环中使用 `useState`，需要提取一个新组件并将其放在那里。
+
+React的组件共享数据我感觉比Vue简单多了。在上面的代码中，数据是被定义在组件内的，所以每一个单独的组件的数据是隔离的。只要将数据定义在组件的上一级节点中，通过传参的方式就能实现组件的数据共享。
+
+```react
+export default function MyApp() {
+  const [count, setCount] = useState(0);
+
+  function handleClick() {
+    setCount(count + 1);
+  }
+
+  return (
+    <div>
+      <h1>Counters that update together</h1>
+      <MyButton count={count} onClick={handleClick} />
+      <MyButton count={count} onClick={handleClick} />
+    </div>
+  );
+}
+
+function MyButton({ count, onClick }) {
+  return (
+    <button onClick={onClick}>
+      Clicked {count} times
+    </button>
+  );
+}
+```
+
 <!-- Content_END -->
\ No newline at end of file