作者：大家的林语冰
链接：https://www.zhihu.com/question/36516604/answer/3279585231
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
React 整洁代码的 10 个最佳实践（译）免责声明 本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 Top 10 React.js Best Practices for Clean Code。整洁的代码对于任何软件项目的可维护性和可扩展性都至关重要，React.js 也不例外。React 组件筑基的架构为整洁且可重用的代码打 call，但如果您不遵循最佳实践，那很容易引入复杂性和混乱。在此博客中，我们将探讨 React.js 的 10 个最佳实践，帮助您维护整洁且有组织的代码。我们将为每个实践提供详细的解释和代码示例。1. 使用函数式组件函数式组件是编写 React 组件的首选方式。祂们比类组件更简洁、更容易阅读。这是一个例子：function MyComponent(props) {
return <div>{props.text}</div>
}2. 解构 Props解构组件参数级别的 props 可以使您的代码更整洁且更具可读性。function MyComponent({ text }) {
return <div>{text}</div>
}3. 诉诸 Hook 管理状态使用 useState 和 useEffect 等 React Hook 进行状态管理和副作用。Hook 使您的代码更简洁且更易推理。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 的预期数据类型。这有助于及早捕获错误并记录组件的接口。import PropTypes from 'prop-types'
function MyComponent(props) {
// ...
}
MyComponent.propTypes = {
text: PropTypes.string.isRequired
}
6. 避免在 JSX 中进行条件渲染代替 JSX 中复杂的三元运算符，根据 return 语句外部的变量或状态按需渲染组件。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，防止多余的重新渲染。import React, { PureComponent } from 'react'
class MyComponent extends PureComponent {
// ...
}
10. 关注组件层次结构请注意您的组件层次结构。深度嵌套的组件会使代码更难理解。考虑使用上下文或状态管理库来避免过度的 prop 穿透。总而言之，遵循这些最佳实践将帮助您维护整洁、可读且可维护的 React.js 代码。整洁的代码不仅使您的开发过程更加丝滑，而且还确保您的 App 更加鲁棒且更易于与其他开发者协作。愉快撸码！您现在收看的是直男翻译系列，学废了的小伙伴可以点赞友情赞助本系列，我们每天佛系投稿，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~<img src="https://pic1.zhimg.com/50/v2-8ce67861a0285b1de0c6b4c50cb0042c_720w.gif?source=2c26e567" data-caption="" data-size="normal" data-rawwidth="500" data-rawheight="380" data-original-token="v2-8ce67861a0285b1de0c6b4c50cb0042c" data-thumbnail="https://picx.zhimg.com/50/v2-8ce67861a0285b1de0c6b4c50cb0042c_720w.jpg?source=2c26e567" data-default-watermark-src="https://picx.zhimg.com/50/v2-8ce67861a0285b1de0c6b4c50cb0042c_720w.jpg?source=2c26e567" class="origin_image zh-lightbox-thumb" width="500" data-original="https://picx.zhimg.com/v2-8ce67861a0285b1de0c6b4c50cb0042c_r.jpg?source=2c26e567"/>编辑于 2023-11-19 02:22・IP 属地广东真诚赞赏，手留余香