【译】React 整洁代码的 10 个最佳实践

大家好，这里是大家的林语冰。

免责声明

本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Top 10 React.js Best Practices for Clean Code。

整洁的代码对于任何软件项目的可维护性和可扩展性都至关重要，React.js 也不例外。

React 组件筑基的架构为整洁且可重用的代码打 call，但如果您不遵循最佳实践，那很容易引入复杂性和混乱。在此博客中，我们将探讨 React.js 的 10 个最佳实践，帮助您维护整洁且有组织的代码。

我们将为每个实践提供详细的解释和代码示例。

1. 使用函数式组件

函数式组件是编写 React 组件的首选方式。祂们比类组件更简洁、更容易阅读。这是一个例子：

jsx 复制代码

function MyComponent(props) {
  return <div>{props.text}</div>
}

2. 解构 Props

解构组件参数级别的 props 可以使您的代码更整洁且更具可读性。

jsx 复制代码

function MyComponent({ text }) {
  return <div>{text}</div>
}

3. 诉诸 Hook 管理状态

使用 useState 和 useEffect 等 React Hook 进行状态管理和副作用。Hook 使您的代码更简洁且更易推理。

jsx 复制代码

import React, { useState, useEffect } from 'react'

function MyComponent() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = `Count: ${count}`
  }, [count])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

4. 组件的关注点分离

遵循单一职责原则。将您的 App 划分为更小的、可重用的组件，专注于一项特定任务。

5. 使用 Prop Types 或 TypeScript

使用 Prop Types 或 TS（TypeScript）定义组件 props 的预期数据类型。这有助于及早捕获错误并记录组件的接口。

js 复制代码

import PropTypes from 'prop-types'

function MyComponent(props) {
  // ...
}

MyComponent.propTypes = {
  text: PropTypes.string.isRequired
}

6. 避免在 JSX 中进行条件渲染

代替 JSX 中复杂的三元运算符，根据 return 语句外部的变量或状态按需渲染组件。

jsx 复制代码

function MyComponent({ isLoading, data }) {
  if (isLoading) {
    return <LoadingSpinner />
  }

  return <DataComponent data={data} />
}

7. 使用 CSS 模块或样式组件

要保持简洁和模块化的样式，请使用 CSS 模块或样式组件来封装组件专属样式。

8. 避免内联样式

避免在 JSX 中使用内联样式，因为祂们会使代码更难维护。相反，请使用 CSS 或样式解决方案（比如样式组件）。

9. 使用 PureComponent 或 React.memo 优化渲染

为了优化性能，请对类组件使用 PureComponent，对函数式组件使用 React.memo，防止多余的重新渲染。

js 复制代码

import React, { PureComponent } from 'react'

class MyComponent extends PureComponent {
  // ...
}

10. 关注组件层次结构

请注意您的组件层次结构。深度嵌套的组件会使代码更难理解。考虑使用上下文或状态管理库来避免过度的 prop 穿透。

总而言之，遵循这些最佳实践将帮助您维护整洁、可读且可维护的 React.js 代码。整洁的代码不仅使您的开发过程更加丝滑，而且还确保您的 App 更加鲁棒且更易于与其他开发者协作。

愉快撸码！

友情赞助

您现在收看的是直男翻译系列，学废了的小伙伴可以点赞友情赞助本系列，我们每天佛系投稿，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~