掌握 React 重新渲染：如何避免常见陷阱

1.简介

想象一下：您刚刚构建了一个时尚、功能丰富的 React 应用程序，但突然间，性能开始下降。按钮感觉迟钝，数据更新时间太长，而且你不知道为什么。如果这听起来很熟悉，那么您并不孤单。如果处理不当，React 重新渲染通常是性能问题背后的无声罪魁祸首。

掌握 React 中的重新渲染对于旨在构建高效、可扩展应用程序的 Web 开发人员至关重要。让我们深入研究 React 重新渲染的工作原理，并发现优化性能、避免常见陷阱并将您的 React 应用程序转变为极快体验的实用策略。

2. React 重新渲染如何工作？

React 的重新渲染机制是其最强大的功能之一。它允许您的应用程序根据状态或属性的变化动态更新 UI。但是，如果不进行优化，此过程可能会导致不必要的重新渲染，从而导致性能下降。

简单来说，React 每次都会重新渲染：

1. 组件的状态发生变化。
2. 组件接收新的 props。
3. 父组件重新渲染。

但是当组件重新渲染过于频繁时会发生什么？浏览器必须重新绘制屏幕，​​从而导致动画卡顿、交互缓慢和用户沮丧。现在，问问自己：您的应用有多少次感觉速度很慢，而您却无法确切地指出原因？

3.为什么过度重新渲染会损害性能

过多的重新渲染会产生多米诺骨牌效应，使您的整个应用程序变得缓慢。每次重新渲染发生时：

1. React 使更改与虚拟 DOM 协调。
2. 它计算对实际 DOM 进行的最少更新。
3. 浏览器重新绘制屏幕。

在小型应用程序中，这可能不明显。但在具有深层嵌套组件和复杂状态管理的大型应用程序中，即使是最小的不必要的重新渲染也可能会形成性能瓶颈。

这是一个简单的例子：

const UserList = ({ users }) => {
  return users.map(user => <div key="{user.id}">{user.name}</div>);
};

// Inside a parent component:
<userlist users="{users}"></userlist>

现在想象一下，每次父组件更新时，这个 UserList 都会重新渲染，即使用户没有更改。这就是问题所在。我们如何防止这种不必要的重新渲染？

4.常见陷阱（以及如何避免它们）

陷阱 1：不记忆函数和对象

每次父组件重新渲染时，它都会创建新的函数和对象引用，即使实际值没有改变。这会导致子组件不必要地重新渲染。

操作：使用 useCallback 和 useMemo 钩子来记忆函数和对象。

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    // some function logic
  }, []);

  const userDetails = useMemo(() => ({ name: "Rajesh", age: 30 }), []);

  return <childcomponent onclick="{handleClick}" details="{userDetails}"></childcomponent>;
};

它的工作原理： 记忆化可以防止在每次重新渲染时创建新的函数和对象引用，从而减少子组件中不必要的渲染。

陷阱 2：将内联函数或对象作为 Props 传递

每次组件渲染时都会创建内联函数或对象，导致接收组件重新渲染，即使实际值没有更改。

操作：在组件外部声明函数和对象或使用记忆挂钩。

// Avoid this:
<childcomponent onclick="{()"> console.log("clicked")} />

// Instead:
const handleClick = useCallback(() => console.log("clicked"), []);
<childcomponent onclick="{handleClick}"></childcomponent>
</childcomponent>

陷阱 3：未能使用 React.memo

一些组件本质上是纯粹的——它们总是在给定相同的 props 的情况下渲染相同的输出。然而，如果没有 React.memo，当父组件重新渲染时，它们仍然会重新渲染。

操作：用 React.memo 包裹功能组件，以防止不必要的重新渲染。

const ChildComponent = React.memo(({ data }) => {
  return <div>{data.name}</div>;
});

它的工作原理： React.memo 确保组件仅在其 props 更改时重新渲染，避免冗余渲染。

5.如何跟踪和调试 React 重新渲染

有没有想过，“为什么我的组件会重新渲染？” React DevTools 提供了一种很好的方法来跟踪渲染并了解哪里出了问题。

1. 启用“突出显示更新”：这会向您显示哪些组件正在重新渲染。
2. 使用“Profiler”选项卡：它显示渲染时间并帮助识别瓶颈。

您还可以使用像这样的自定义挂钩来记录重新渲染：

const useWhyDidYouRender = (componentName, props) => {
  const previousProps = useRef(props);

  useEffect(() => {
    if (previousProps.current !== props) {
      console.log(`${componentName} re-rendered`);
      previousProps.current = props;
    }
  });
};

6.优化 React 重新渲染的最佳实践

1.在需要时提升状态，而不是总是

有时将状态提升到更高的组件会导致子组件不必要的重新渲染。相反，尽可能在本地管理状态。

2. Use Key Wisely

When rendering lists, ensure each item has a stable, unique key prop. This helps React optimize re-renders by identifying which items have changed.

3. Avoid Re-rendering Unmounted Components

This can cause memory leaks and performance issues. Use the useEffect cleanup function to avoid re-renders in unmounted components.

useEffect(() => {
  return () => {
    // cleanup logic here
  };
}, []);

7. Summary: Master React Re-renders

In short, React re-renders can be a hidden source of performance issues, but with the right techniques, you can prevent unnecessary re-renders, keep your app fast, and ensure smooth user experiences.

• Memoize functions and objects to avoid re-rendering child components.
• Use React.memo to stop unnecessary re-renders in pure components.
• Leverage React DevTools to track, understand, and debug performance bottlenecks.

8. Practical Application: Improving Performance with Intentional Re-renders

Next time you're optimizing a React app, think critically about each re-render. Are they necessary? What happens if you memoize this function? By applying these strategies, you’ll be writing leaner, faster React code and avoiding the common pitfalls that trip up even the most experienced developers.

---

Final Thought: Now that you've learned the ins and outs of React re-renders, go ahead and apply these optimizations to your own apps. You'll not only see better performance but also gain confidence in writing scalable, maintainable React code!

---

以上是掌握 React 重新渲染：如何避免常见陷阱的详细内容。更多信息请关注PHP中文网其他相关文章！