首页 > 文章 > 前端

编写更好的 React 代码：干净、高效的实践指南

来源：dev.to

时间：2024-11-22 15:57:55 278浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《编写更好的 React 代码：干净、高效的实践指南》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

随着 react 的不断发展，开发人员必须不断更新最佳实践，以增强代码的可读性、可维护性和性能。本指南概述了 2024 年编写更清洁、更高效的 react 应用程序时要遵循的关键实践，包括 react 19 中引入的最新更改。

1.使用功能组件和钩子

带有钩子的功能组件是构建 react 应用程序的标准。它们更简单并促进更好的代码组织。

示例：

import react, { usestate } from 'react';

const counter = () => {
  const [count, setcount] = usestate(0);

  return (
    <div>
      <p>count: {count}</p>
      <button onclick={() => setcount(count + 1)}>increment</button>
    </div>
  );
};

使用 usestate 这样的钩子可以更轻松地进行状态管理，而无需类组件，使您的代码更加简洁和可读。

2. 实施误差边界

错误边界对于在 react 组件中优雅地处理错误至关重要。它们可以防止整个应用程序崩溃并允许您显示后备 ui。

示例：

class errorboundary extends react.component {
  state = { haserror: false };

  static getderivedstatefromerror(error) {
    return { haserror: true };
  }

  componentdidcatch(error, info) {
    console.error("error caught:", error, info);
  }

  render() {
    if (this.state.haserror) {
      return <h1>something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

错误边界有助于隔离应用程序特定部分的错误，从而改善整体用户体验。

3. 使用 react.memo 优化性能

在 react 19 中，react.memo 仍然是一个有价值的工具，用于记忆功能组件以防止不必要的重新渲染。然而，新的 react 编译器引入了优化，可以减少某些情况下手动记忆的需要。

要点：

性能优化：react.memo 对于经常接收相同 props 的组件仍然有用，特别是当它们的渲染成本很高时。
浅层比较：默认情况下，react.memo 对 props 执行浅层比较。如果您要传递复杂的数据结构，请考虑提供自定义比较函数。

示例：

const todoitem = react.memo(({ text }) => {
  return <div>{text}</div>;
});

自定义比较示例：

const areequal = (prevprops, nextprops) => {
  return prevprops.text === nextprops.text; // custom comparison logic
};

const todoitem = react.memo(({ text }) => {
  return <div>{text}</div>;
}, areequal);

4. 智能组件结构

将组件组织成清晰的结构，以促进可重用性。考虑按功能或路线对组件进行分组，这样可以更轻松地管理相关文件。

文件夹结构示例：

src/
  components/
    button/
      button.jsx
      button.css
    dashboard/
      dashboard.jsx
      dashboard.css
  hooks/
    usefetch.js
  utils/
    api.js

组织良好的文件夹结构增强了团队成员之间的可维护性和协作性。

5.有效的状态管理

根据应用程序的需求选择正确的状态管理策略。对特定于组件的数据使用本地状态，对共享数据使用全局状态管理（如 redux toolkit、zustand 或 jotai）。

示例：

import { usestate } from 'react';

const app = () => {
  const [data, setdata] = usestate([]);
  // fetch data and set state
};

利用适当的状态管理工具可以显着提高应用程序的性能和可维护性。

6. 使用 linting 和格式化工具

结合 eslint 和 prettier 等工具来维护代码质量和一致性。这些工具有助于及早发现错误并执行编码标准。

eslint 配置示例：

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "es2021": true
  },
  "rules": {
    "no-unused-vars": "warn",
    "react/react-in-jsx-scope": "off"
  }
}

linting 工具有助于确保一致的代码风格并在潜在错误出现问题之前捕获它们。

7. 延迟加载组件

使用 react 的延迟加载功能仅在需要时加载组件，从而提高应用程序的性能。

示例：

import react, { suspense, lazy } from 'react';

const lazycomponent = lazy(() => import('./lazycomponent'));

const app = () => (
  <suspense fallback={<div>loading...</div>}>
    <lazycomponent />
  </suspense>
);

延迟加载有助于减少应用程序的初始加载时间，增强用户体验。

8. 为您的组件编写测试

使用 jest 和 react 测试库等库对您的组件实施测试。这可确保您的组件按预期运行并有助于及早发现错误。

示例测试：

import { render, screen } from '@testing-library/react';
import counter from './counter';

test('renders count', () => {
  render(<counter />);
  const linkelement = screen.getbytext(/count:/i);
  expect(linkelement).tobeinthedocument();
});

测试对于维护代码质量和确保组件随着时间的推移正常运行至关重要。