React查缺补漏

React组件的重新渲染

当在 React 中调用 useState 提供的 状态更新函数时，React 会触发该组件的重新渲染。也就是说组件的主体部分会再次执行。

Vue在改变某个变量的状态时不会重新执行onMounted。虽然Vue 和 React 都是响应式框架，但它们的更新机制不同。React 是“重新执行组件函数”，而 Vue 是“依赖追踪+局部更新”。

重新渲染 ≠ 重新操作 DOM，React 重新渲染组件时，不是直接操作 DOM，而是：重新执行组件函数（产生新的虚拟 DOM），用 Diff 算法比较“上一次” vs “这一次”的虚拟 DOM，只把变化的部分同步到真实 DOM（非常快）， 所以，即使组件很大，只要 JSX 渲染逻辑不复杂，React 的开销也不会太大。

React的状态更新机制

<button onClick={() => {
setNumber(number + 1);
setNumber(number + 1);
setNumber(number + 1);
}}>+3</button>

在react中只会让number加1，而在vue中则会让number加3，因为它们的响应式更新机制不同。

在react中，setNumber 是异步的、不可立即更新的，多个 setNumber(number + 1) 调用时，它们使用的是 旧的 number 值。所以三次加的都是 number + 1，结果就是只加了 1

除非改成这样的写法才能加3：

setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

而Vue 的响应式是通过 ref 包装的对象，在你给 number.value 赋值时，它就会立刻更新这个响应式值，没有批量异步合并行为（除非你在 nextTick 环境中强制合并）。

假如我在 setCount(count + 1);之后想要使用新的值，怎么办？

方法1：函数式更新 + 中间变量

setCount(prev => {
const newValue = prev + 1;

// 你可以在这里使用 newValue 做其他事情
console.log('新值:', newValue);

return newValue;
});

方法 2：使用 useEffect 监听更新后的 count，相当于Vue的Watch

useEffect(() => {
// 这个 effect 在 count 更新后运行
console.log('count 更新后:', count);
}, [count]);

单一功能原理

也就是说，一个组件理想情况下应仅做一件事情。但随着功能的持续增长，它应该被分解为更小的子组件。

标签语义化

确保为事件处理程序使用适当的 HTML 标签。例如，要处理点击事件，请使用 而不是 。使用真正的浏览器 启用内置的浏览器行为，如键盘导航。如果你不喜欢按钮的默认浏览器样式，并且想让它看起来更像一个链接或不同的 UI 元素，你可以使用 CSS 来实现。