为什么 React 会让你感到惊讶（以及如何驯服它）

如果您曾经使用过 React，您可能有过自我怀疑的时刻。我也遇到过这种情况——想知道我是否遗漏了一些基本的东西，结果发现问题不在于我，而在于 React 的特性。

在这里，我将分享一些意想不到的行为、背后的原因以及我自己的经历。希望这能让你免去我所经历的一些令人头疼的事情！

---

1. 状态更新：延迟反应

你调用了setState，但是UI并没有立即改变。为什么？ React 批量状态更新以提高性能。这常常让新开发者措手不及，因为它与即时反馈的期望相矛盾。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

为什么会发生：
React 的状态更新是异步的。这允许 React 优化重新渲染，但这意味着 setState 不会立即更新计数。新的状态只有在组件重新渲染后才会反映出来。

专业提示：使用 setState 的函数形式来避免依赖过时状态：

setCount(prevCount => prevCount + 1);

---

2. Hooks 中的依赖数组：为什么没有重新运行？

另一个常见的陷阱：您添加了 useEffect 挂钩，但它似乎没有按您期望的方式运行。

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

然后，你意识到更新 someVar 并不会触发效果。调试后发现someVar是一个对象或者数组。

为什么会发生：
React 的依赖数组使用引用相等。即使两个对象或数组看起来相同，如果它们的引用不同，它们也会被视为不同。如果您不小心，这可能会导致意外行为。

专业提示： 使用 useDeepCompareEffect 等实用程序或记住您的依赖项。

---

3. 重新渲染困境：为什么要重新渲染？

您优化了组件，却发现它仍然不必要地重新渲染。

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

即使 count 没有改变，组件也会重新渲染，因为父组件会重新渲染并传递新的 prop 引用。

为什么会发生：
React 的默认行为是重新渲染子组件，除非你使用像 React.memo 这样的优化。

专业提示：使用 React.memo 来记忆你的组件或 useCallback 来防止 prop 引用发生不必要的更改。

---

4. 关键道具：有什么大不了的？

您忘记向列表项添加键，突然间您的 UI 行为变得不稳定。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Still logs the old count
};

为什么会发生：
React 使用 key 来跟踪哪些项目已更改、添加或删除。如果没有唯一键，React 可能会错误地重用 DOM 节点。

专业提示：使用唯一标识符作为键（例如，数据中的 id）。

---

5. 事件处理：神秘的双重触发器

是否曾经有过两次按钮单击事件触发并想知道您的浏览器是否被闹鬼的情况？

setCount(prevCount => prevCount + 1);

您单击按钮，然后“单击！”在开发模式下在控制台中显示两次。

为什么会发生：
React 的严格模式在开发过程中有意安装和卸载组件两次，以突出潜在的副作用。这可能会导致事件处理程序多次触发。

专业提示：不要惊慌——它只是在开发中。

---

6. 不受控制的组件：谁在控制这里？

您创建了一个输入元素并为其分配了一个值，期望 React 能够无缝管理它，但您收到了警告。

useEffect(() => {
  console.log("Effect ran");
}, [someVar]);

为什么会发生：
React 区分受控组件（由 React 状态管理）和非受控组件（由 DOM 管理）。混合这两种会导致问题。

专业提示：如果您想要受控组件，请始终将 value 与 onChange 配对：

const MyComponent = ({ count }) => {
  console.log("Rendered");
  return <div>{count}</div>;
};

---

7. 参考：为什么我不能只使用常规变量？

您尝试使用变量在渲染之间存储值，但它每次都会重置。

<ul>
  {items.map(item => (
    <li>{item}</li>
  ))}
</ul>

为什么会发生：
React 在每次渲染时重新初始化变量。对于持久值，请使用 useRef:

<button onClick={() => console.log("Clicked!")}>Click Me</button>

---

结束语

当您知道“为什么”时，您不仅仅是做出反应，而是掌控一切。 React 很棒，但有时会有点令人困惑。了解事情为何如此运作可以让事情变得不那么令人沮丧。如果你明白为什么会出现这种情况，你会节省大量时间并减少挫败感。这都是其独特（有时令人困惑）魅力的一部分。

以上是为什么 React 会让你感到惊讶（以及如何驯服它）的详细内容。更多信息请关注PHP中文网其他相关文章！