📅 GJ504b 的 React 进阶之路：Day 1
知识清单
1 用 Vite + React 从零构建项目
pnpm create vite@latest 项目名称
pnpm i
pnpm run dev
2 组件化思维：将复杂的页面抽象可复用的 StaticCard 组件
数据向下流动 (Props)，行为向上触发 (Callbacks)
补充：
-
“子传父”其实是状态提升。 当多个组件需要共享数据时，我们把状态保存在共同的父组件中。
-
“蓝色都是通过 props”也可以总结为 声明式 UI 渲染。 我们只负责通过props描述数据长什么样，React 负责把它画出来。
-
StaticCard 就是我设计的的原子组件，具有高度的独立性和可复用性。
3 组件通信和列表渲染
父传子
通过在父组件定义数组对象（json）形式向子组件传递其需要的属性。即：父组件定义子组件需要的属性，子组件通过props的形式接受渲染UI
const navData = [{title:"今日待处理",count:12},{title:"本月新增",count:28},{title:"待审查成功病历",count:5},{title:"需要重新诊断",count:2}
]<StaticCard title = {item.title} count = {item.count} key={i} />//父组件定义子组件需要的props
export default function StaticCard(props) {}//子组件接收通过props子传父
通过在父组件定义函数并传给子组件，实现点击查看详情时，父组件能接收到具体的业务信息。
const handleChildClick = (name) =>{alert("点击： "+name+" 成功")}//父组件展示的方式<StaticCard onCardClick= {handleChildClick} />//接受子组件具体的业务信息<a onClick={()=>props.onCardClick(props.title)}><p>查看详情</p><p>→</p>
</a>//点击a标签区域触发给父组件业务
数据驱动渲染
学会使用 .map() 循环渲染数组数据
{navData.map((item,i) =>{//绑定item和ireturn(<StaticCard title = {item.title} count = {item.count} key={i} onCardClick= {handleChildClick} />)})}
🧀🧀🧀key在diff算法的重要性：
Diff 算法是 React 提升性能的关键。它通过同层对比、组件类型判断以及唯一 Key 标识，把对比的时间复杂度从 O(n³) 降低到了 O(n)。这样当数据变化时，React 能够以最小的代价更新真实 DOM，保证了页面的流畅。
比如当顺序不一样的时候，有了key，diff算法就会聪明的只调组件的位置而不是全部重新渲染
4 状态管理初探 (Hooks)
useState 钩子：告别低级的 alert 弹窗，实现点击卡片后，页面顶部标题实时、异步更新的交互效果。
import { useState } from 'react'const [activeTitle, setActiveTitle] = useState("请选择卡片")const handleChildClick = (name) =>{setActiveTitle(name)}
5 解决的“坑”与思考
-
箭头函数 vs 立即执行：
onClick={() => func()}是绑定
页面刷新时，这个函数只是被存起来了，并没有执行。只有当你真正点击按钮的那一刻，浏览器才会触发这个箭头函数
onClick={func()}是立即执行
页面一刷新，函数就自动运行了 -
div、p 与 button 在实际开发中的选择逻辑与用户体验
- 追求语义化：如果是为了执行一个动作（如：删除、提交、展开），大厂规范要求使用
- 追求无障碍：使用 button 标签，残障人士使用读屏插件时，系统会告诉他“这是一个按钮”，而 p 标签只会被识别为一段文字。
- 万能的 div：在很多复杂的自定义卡片里，程序员也经常直接在 div 上绑定 onClick，只要加上 cursor: pointer，用户体验是一样的
-
组件命名一致性：解决了子传父时 Prop 名字对不上的 Bug（onCardClick），深刻体会到了代码的严谨性
每日一题--力扣 hot 100
题目描述
我最初的解法
两次循环，暴力求解，时间复杂度O(n^2)
/*** @param {number[]} nums* @param {number} target* @return {number[]}*/
var twoSum = function(nums, target) {const n = nums.length;let res = [-1,-1];for(let i = 0;i<n;i++ ){for(let j = 1+i;j<n;j++){//🧀🧀🧀 不可以是j = 1,因为必须保证j,i不一致，如果那样写可能出现i,j一致if(nums[i] + nums[j] == target){res[0] = i;res[1] = j; return res;}}}
};没有必要引入res数组，我们可以直接返回的
var twoSum = function(nums, target) {const n = nums.length;for(let i = 0;i<n;i++ ){for(let j = 1+i;j<n;j++){if(nums[i] + nums[j] == target){return [i,j];}}}
};
更好的解法
哈希表，以空间换时间，用键值对储存已经运算过的信息，避免重复计算，时间复杂度O(n)
/*** @param {number[]} nums* @param {number} target* @return {number[]}*/
var twoSum = function(nums, target) {const n = nums.length;const map = new Map();//构建哈希表for(let i=0;i<n;i++){const nextNumber = target - nums[i];if(map.has(nextNumber)){//has()方法：找哈希表内有无我们的目标值return[map.get(nextNumber),i];//get()方法，得到下标，我们的键}map.set(nums[i],i);//set()方法：每次将值和下标储存入哈希表}
};