React 中你应该避免的10个错误

错误会拖慢开发速度，导致应用程序效率和性能降低。

因此，本文将讨论在使用 React 时开发者必须避免的十个错误。通过理解并避免这些错误，开发者可以确保有效高效地使用 React。

1. 构建单体式 React 应用

在使用 React 时，构建单体应用一直是首选。例如，你可能会使用 “create-react-app” 来启动你的 React 项目。

问题：这样做会构建一个庞大的单体 React 应用，随着项目的增长可能会导致可维护性和可扩展性问题。

解决方案：利用像 Bit 这样的下一代构建系统来为任何 React 项目设计和开发独立的组件。Bit 允许你在独立的环境中创建组件，使其可以在任何上下文中使用，同时跟踪它被使用的位置。

此外，它使用 Ripple CI 来自动传播组件树上的更改，以确保所有使用都使用最新版本。

2. 导入超出需要的内容

导入比需要更多的组件或模块会增加捆绑大小，并对性能产生负面影响。

问题：较大的捆绑大小会导致加载时间变慢，可能会影响用户体验。

解决方案：仅从模块中导入你需要的特定组件或函数。使用代码分割来按需加载组件。

// 仅导入特定组件
import { Button } from './components';

// 代码分割
import React, { lazy, Suspense } from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
<Suspense fallback={<div>Loading...</div>}>
  <OtherComponent />
</Suspense>

3. 没有将业务逻辑与组件逻辑分离

直接在组件内混合业务逻辑（数据获取、转换等）可能会使代码不够可重用，并且更难以测试和维护。

问题：这会导致组件耦合度高，独立测试业务逻辑困难。

解决方案：创建单独的函数或服务来处理业务逻辑，并从组件中调用它们。

// 数据获取服务
function fetchUserData() {
  // ...
}

// 组件
function UserDetails() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUserData().then(setUser);
  }, []);
  // 渲染用户数据
}

4. 属性传递

属性传递指的是通过多个组件级别传递属性，通常是不必要的，以达到深度嵌套组件。

问题：这会使代码变得难以阅读，更难以维护，并且更容易出错。

解决方案：使用 React 上下文或像 Redux 这样的状态管理库来更有效地在组件之间共享数据，而不必进行属性传递。

// 上下文
const UserContext = React.createContext();

// 提供者
<UserContext.Provider value={{ user }}>
  {/* 子组件可以在不使用属性的情况下访问用户数据 */}
</UserContext.Provider>
// 消费者
<UserContext.Consumer>
  {(user) => {
    // 在这里使用用户数据
  }}
</UserContext.Consumer>

5. 在每次渲染中重复工作

在组件的渲染函数中执行昂贵的计算或操作可能会导致性能问题，特别是频繁重新渲染时。

问题：每次渲染重新计算可能会导致卡顿和潜在的性能瓶颈。

解决方案：使用像 React.memo、useMemo 或 useCallback 这样的技术来进行记忆化，缓存值并防止不必要的重新渲染。

// 记忆化组件
const MyComponent = React.memo(function MyComponent(props) {
  // ...
});

// 记忆化值
const memoizedValue = useMemo(() => computeExpensiveValue(props), [props]);

6. 忽视代码可读性和结构

编写混乱、无组织的代码会使理解、维护和协作变得困难。

问题：没有组织的代码难以导航、调试和重构，降低了开发效率。

解决方案：遵循一致的编码风格，使用描述性的变量名，正确缩进代码，并将复杂函数拆分为更小、可重用的单元。

// 可读性和结构化的代码
function MyComponent() {
  const [count, setCount] = useState(0);
  function incrementCount() {
    setCount(count + 1);
  }
  return (
    <div>
      <button onClick={incrementCount}>增加 ({count})</button>
    </div>
  );
}
// 组织不好的代码（避免！）
function MyComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        ({count}) + 1
      </button>
    </div>
  );
}

7. 过度使用状态和不必要的重新渲染

在组件中不必要地管理状态会导致性能问题和不必要的重新渲染。

问题：频繁的状态更新会触发重新渲染，即使这些更改对渲染的 UI 来说是无关紧要的。

解决方案：仔细考虑组件是否需要状态，并优化状态更新以最小化重新渲染。对于复杂的状态管理，使用 useReducer。

// 使用记忆化进行优化
const MyComponent = React.memo(() => {
  const [text, setText] = useState('');
  const filteredText = useMemo(() => text.toUpperCase(), [text]);
  return <p>{filteredText}</p>;
});

// 未优化（避免使用记忆化）
const MyComponent = () => {
  const [text, setText] = useState('');
  return <p>{text.toUpperCase()}</p>;
};

8. 没有正确使用 useEffect 钩子

useEffect 钩子是处理 React 组件中副作用的强大工具，但正确使用它以避免意外后果至关重要。

问题：没有正确使用 useEffect 可能会导致无限循环、内存泄漏或意外行为。

解决方案：理解 useEffect 的依赖数组，并使用它来控制何时运行效果。注意清理函数以防止内存泄漏。

useEffect(() => {
  // 仅当 count 发生变化时运行
}, [count]);

9. 忽视错误处理和日志记录

不有效地处理错误会导致用户体验不佳和难以调试的问题。

问题：未处理的错误会导致应用程序崩溃，不足够的日志记录使诊断和修复问题变得困难。

解决方案：实现 try-catch 块来优雅地处理错误，并使用像 react-error-boundary 这样的库来处理组件级错误。利用诸如 winston 或 debug 这样的日志记录库进行结构化日志记录和轻松调试。

try {
  // 执行操作
} catch (error) {
  console.error(error);
  // 优雅地处理错误
}

// 错误边界示例
<ErrorBoundary>
  {/* 受保护的组件 */}
</ErrorBoundary>

10. 重复造轮子

花费时间重新编写现有的库或组件可能是低效且不必要的。

问题：重复现有功能会浪费时间和精力，可能导致错误和不一致性。

解决方案：利用现有、得到良好维护的库和组件来实现标准功能，如路由、状态管理、表单处理等。仅在确实需要时编写自定义组件。

总结

掌握 React 包括学习其高级特性，并理解并遵守最佳实践，以确保编写高效且易于维护的代码。通过避免本文中概述的常见错误，开发者可以显著提升他们的 React 开发体验，并构建高质量的应用程序。

通过利用现有的库和组件来避免重复造轮子，节省时间并确保代码库的一致性。通过及时了解 React 社区的最新动态并持续提升自己的技能，你可以发挥 React 的全部潜力，并为你的应用程序提供卓越的用户体验。