腾讯|Web前端：2022年每个开发人员都必须遵循的React最佳实践财报|马化腾|负增长

文章图片

在前端框架方面， ReactJS 是一个被普遍接受和知名的平台，但是， React Js 对 60% 的开发人员有用，因此需要了解最佳策略。

ReactJS 是一个灵活的开源 JavaScript 库，用于构建出色的应用程序。在本文中，将重点介绍React最佳实践，以帮助 React Js 开发人员和企业创建出色的高性能应用程序。
2022年应遵循的React Js最佳实践列表
1、创建新的基础react应用程序结构
在创建 React 项目时，需要定义可扩展的项目结构，这对于稳健项目的最佳反应实践非常重要。可以使用 NPM 命令“create-react-app” 。 React 文件夹结构因项目规范和复杂性而异。你将获得在定义项目架构时考虑的各种 React Js 最佳实践的可用性。
2、JS中的CSS
【腾讯|Web前端：2022年每个开发人员都必须遵循的React最佳实践】对于大型项目， React最佳实践中最基本的一个就是样式和主题化。然而，事实证明这是一项具有挑战性的任务，就像维护那些大的CSS文件一样。所以，这就是CSS-in-JS解决方案的由来。在众多的库中，你可以根据需要使用需要的库，比如一些复杂主题的库。
3、props.children
在带有开始和结束标签的精确 JSX 表达式中，这些标签中的内容被承认为一个独特的道具：props.children 。它作为 React 文档的一部分， props.children 用作特殊的prop ，自动传递给每个组件。目标是在调用组件时呈现包含在开始标签和结束标签之间的内容。此外，它还可以在一个组件的内容在另一个组件中的呈现方法中使用。也就是说，有可能将函数作为子道具传递。

4、React 中的可重用性原则
react 开发人员的可重用组件用作应用程序各个部分中使用的 UI 片段，它可以帮助构建的不仅仅是 UI 实例。此外，你可以在应用程序的多个部分中以不同颜色显示按钮组件。因此，可重用性很重要，这就是为什么需要以最低要求创建新组件的原因。一个功能等于一个组件的规则，提高组件的复用性。当你看到该函数有一个组件时， Skip 正在尝试为该函数构建一个新组件。在你的项目中重用组件不仅可以实现一致性，还可以为社区做出贡献。如果你注意到任何组件变得庞大且难以维护，请将其分解为尽可能多的较小组件。例如，创建一个可以处理图标的 Button 组件。你应该确保使其更加模块化以使用相同的代码覆盖许多情况。确保组件应该足够抽象，但不要过于复杂。
5、重复代码的合并
重复代码的合并是react js的最佳实践之一。所有代码的一个共同原则是保持简洁。避免重复的最好方法是遵循“不要重复自己” 。通过仔细检查代码的模式和相似性来实现目标。这样，你将有机会消除重复。重写可以让它更简洁。此外，这个条件在很大程度上取决于React中的可重用性原则。另外，如果你希望添加多个包含图标的按钮，作为为每个按钮添加标记的替代方法，可以使用Icon Button组件。此外，还可以将所有内容映射到一个数组中。
6、高阶组件 (HOC)
将高阶组件视为 Reactjs 开发人员的最佳实践之一。高阶组件作为 React 中的一种高级技术，允许在渲染方法中重用组件逻辑。在考虑高级级别时，将组件转换为组件的更高阶。例如，在用户保持登录状态时显示一些组件，并用每个组件补充相似的代码。
7、停止依赖基于类的组件
React 应用程序遵循的最佳实践是停止依赖基于类的组件。 React 将允许将你的组件编写为基于类的组件。这就是 Java/C# 开发人员倾向于编写类的主要原因。但是，基于类的组件存在一个问题，即它们开始变得复杂，并且你和你的团队成员难以理解。