React 基础：快速掌握 State、事件和 Hook
React 基础：快速掌握 State、事件和 Hook
学习 React 的过程可能感觉像是在一片概念的密林中穿梭。但一旦你掌握了核心概念，它就会成为构建动态 Web 应用的强大工具。本文将带你快速回顾支撑大多数 React 应用的几个核心概念：事件、状态（State） 和 Hook。
React 的方式：处理事件和状态
在 React 中，你不会直接操作 DOM。相反，你使用的是一个 合成事件系统（Synthetic Event System），它是一个围绕原生事件（如 click、keydown 和 submit）的跨浏览器封装。事件处理程序的命名约定采用 驼峰式命名（例如 onClick 而非 onclick），并将函数引用作为处理程序传递。
当用户触发事件时，React 会向你的处理程序传递一个合成事件对象，其行为类似于原生事件对象，提供了 type、target 和 currentTarget 等属性。例如，你可以调用 preventDefault() 方法来阻止表单提交时页面刷新，或者使用箭头函数来传递额外的数据，比如 onClick={() => handleDelete(1)}。
任何交互式 React 组件的核心是状态（state）。State 是一个包含动态数据的普通 JavaScript 对象。状态的黄金法则是它是不可变的——你永远不应该直接修改它。当状态更新时，React 会高效地重新渲染组件以反映这些变化。
useState Hook 是你为函数式组件添加状态的首选工具。它返回一个包含两个值的数组：当前状态变量和一个用于更新它的设置函数（setter function）。
const [count, setCount] = useState(0);
当你需要更新状态中的对象或数组时，你必须始终创建一个新的。对于对象，使用扩展语法（...）来复制现有属性，然后再添加或更改新属性。对于数组，使用 filter() 或扩展语法等非变异方法来创建包含所需更改的新数组。这对于 React 检测变化并重新渲染至关重要。
你的组件如何显示在屏幕上：渲染过程
React 的渲染过程是一个三步走的“舞蹈”，让你的组件出现在页面上。
- 触发（Trigger）：当某些东西（通常是状态或属性）发生变化时，它会触发 React，让其知道可能有必要更新 UI。
- 渲染（Render）：React 重新评估组件并构建一个虚拟 DOM——一个轻量级的、内存中的真实 DOM 表示。在这个阶段，React 能够快速找出需要更改的部分。
- 提交（Commit）：React 将从虚拟 DOM 中准备好的更改应用到真实的 DOM 上，使最终结果可见。这就是你在屏幕上看到 UI 更新的时刻。
深入了解：Refs 和 Effects
有时，你需要直接与真实 DOM 交互。这就是 Refs 的用武之地。你可以使用 useRef() Hook 创建一个 ref，并通过 ref 属性将其附加到元素上。真实的 DOM 节点可以通过 ref.current 来访问。这非常适合以编程方式聚焦输入框等任务。请记住，refs 用于访问 DOM，而不是管理状态。
Effects（副作用） 是发生在组件常规渲染流程之外的动作，例如从 API 获取数据、更新浏览器标签页标题或设置事件监听器。useEffect Hook 就是用来处理这些副作用的。
它接受两个参数：一个包含副作用逻辑的函数，以及一个可选的依赖数组，告诉 React 何时重新运行这个副作用。
- 空数组（
[]）：只在首次渲染时运行一次。 - 包含值的数组（
[value]）：在首次渲染和该值更改时运行。 - 无数组：每次渲染时都会运行。
可重用性的力量：自定义 Hook
React 的内置 Hook 很棒，但如果你有一段复杂的逻辑想要在多个组件中复用怎么办？这就是自定义 Hook大放异彩的地方。
自定义 Hook 只是一个以 use 开头的 JavaScript 函数，它可以在内部调用其他 Hook。它允许你将数据获取或防抖计时器等逻辑从组件中提取出来，使你的代码更简洁、更具可重用性。例如，可以创建一个 useDebounce Hook 来延迟一个操作，直到用户停止输入，这非常适合搜索栏。
掌握了这些核心概念，你将能更好地构建健壮而高效的 React 应用。