使用 React 组件的 3 个最佳实践
（本文最初发表于我们的博客，链接 在此 ）。
React.js（也称为 ReactJS 或 React）是一个流行的 JavaScript 库，用于创建出色的用户界面。
React 的一个显著特点是它依赖于以组件为中心的方法来构建交互式用户界面。
Maxim-Filimonov 在软件开发行业拥有超过十年的经验，目前教授人们他的技能。他表示：“在创建组件时遵循 React API 最佳实践将有助于你编写高质量和简洁的 React 代码。”
点击这里观看并学习他的一个项目，了解如何使用 React Native 构建跨平台移动应用程序。
以下是三个提升你的 React 开发技能所需的技巧和最佳实践。
1. 避免不必要地创建新组件
以下是一个 React 组件示例：
export default class Liveedu extends PureComponent {
static propTypes = {
userIsLearning: PropTypes.bool,
user: PropTypes.shape({
_id: PropTypes.string,
}).isNeeded,
}
static defaultProps = {
userIsLearning: false,
}
render() {
const { userIsLearning, user } = this.props;
if (!userIsLearning) return <Learning />;
return (
<div>
<div className="two-col">
<section>
<LearnOnline userId={user.id} />
<Watching projects userId={user._id} />
</section>
<aside>
<UserDetails user={user} />
<WatchProjects user={user} />
</aside>
</div>
<div className="one-col">
{isInfo('student', user={user._id} &&
<LearnersInfo userId={user._id} />
}
</div>
</div>
)
}
}
如上文代码所示，我们只有一个名为Liveedu 的组件。在这个庞大的组件中，我们包含了LearnOnline和WatchProjects等其他组件。
由于所有数据都来自同一位置（用户），我们原本可以将各个组件分别声明。但是，为了代码简洁，我们选择将较小的组件合并到一个组件中。
虽然对于如何为 React 代码创建新组件并没有绝对的规则，但以下指导原则值得参考：
- 如果要重复使用代码，请考虑为每个功能创建新组件。
- 如果你希望每个组件代表特定的功能，那么创建新组件可能是一个好主意。
- 如果你的代码变得臃肿杂乱，可以通过创建新组件来提高可读性。
2. 了解何时使用组件、无状态函数组件和纯组件
编写 React 代码时，另一个最佳实践是了解何时使用各种类型的组件。
以下代码示例展示了如何创建无状态函数组件：
const Liveedu = () => (
<WatchProjects>
<H1>Programming Projects</H1>
<div className="learn_online">
<Link className="liveedu_project_image" to="/">
<img alt="experts building projects" src="liveedu.jpg">
</Link>
<div className="Project Learning Platform">
<h2 className="create">Programming Projects</h2>
<li>JavaScript</li>
<li>PHP</li>
<li>Angular</li>
</div>
</div>
</WatchProjects>
);
这类组件将帮助您编写简洁清晰的 React 代码。
你可以使用它们来创建不依赖于任何类型的引用、状态或其他生命周期方法的组件。
因此，您无需担心状态操作或生命周期方法，也无需为了执行测试而安装库。
顾名思义，这个组件没有任何状态；它只是一个函数。因此，它可以帮助你将组件定义为一个返回所需数据的常量函数。
换句话说，它是一个用于返回 JSX 的函数。
在上面的第一个代码示例中，您可能已经注意到，我们将Liveedu声明为PureComponent而不是使用传统的Component。
PureComponent通常用于防止 React 不必要地重新渲染。每当组件接收到新的 prop 时，它都会自动重新渲染。
即使组件接收到新的属性而没有任何更改，也会发生这种情况。
例如，如果一个 prop 引用一个字符串或布尔值，并且发生了更改，PureComponent可以检测到这一点。
另一方面，当对象内部的属性发生任何变化时，PureComponent无法启动 React 重新渲染。
因此，您可以使用PureComponent代替Component，以确保仅在必要时才进行重新渲染。
3. 谨慎使用散列属性
… （三个点）扩展运算符有助于在 React 代码中实现简洁。
以下代码示例选择组件使用的特定 props，并使用扩展运算符传递整个 props 对象。
const Liveedu = props => {
const { kind, ...other } = props;
const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
return <button className={className} {...other} />;
};
const App = () => {
return (
<div>
<Button kind="primary" onClick={() => console.log("clicked to start learning")}>
Watch Experts Create Practical Projects
</Button>
</div>
);
};
在上述代码中，kind属性的使用没有任何问题。此外，它也没有传递给文档对象模型（DOM）中的<button>元素。
此外，其他属性是通过 ` …other`对象传递的，这为该组件增加了一些灵活性。实际上，它会传递 ` onClick`和`children`属性，如代码所示。
虽然在组件中使用扩展属性可能是有益的，但这会增加将不必要的属性传递给不需要它们的组件的可能性。
此外，这种语法可能会导致将不必要的 HTML 属性传递给 DOM。
因此，最好谨慎使用。
总结
React 组件是创建强大而直观的用户界面的基石。
上述最佳实践将使您有信心驾驭 React.js，并将您的前端开发技能提升到一个新的水平。
你还知道哪些 React.js 最佳实践？
请在下方分享您的评论。
文章来源：https://dev.to/educationecosystem/3-best-practices-for-working-with-react-components-3j44