每个人都应该知道的 React Clean 代码技巧......

🤖 TL:DR :

🤖 TL:DR :

React 无疑是编写 Web 应用最著名的框架。由于其处理数据和状态管理的简单方法，它正日益受到欢迎。

用 React编写简单的待办事项应用不需要对实际代码库或底层机制有任何深入的理解。但是，一旦有人计划用 React 编写多页面应用（使用多个第三方库），就必须花费相当多的时间来规划以下几件事：

• 我们将使用哪个状态管理库
• 我们应该使用功能组件还是基于类的组件
• 我们如何分割代码？
• 使用哪个打包工具？以及更多

所以，一旦完成，实际的开销就开始了，也就是编写代码。本文将帮助您减少这种开销，并向您展示一些处理复杂问题的最佳实践，例如

• 角色基础 UI 预览
• 条件渲染最佳实践等等

🔐基于角色的 UI 渲染：

几乎所有应用程序都包含基于角色的基本访问管理系统。根据用户角色处理每个组件的 UI 是每个应用程序的关键因素。通过使用对象字面量，我们可以轻松地管理 UI，如下所示

使用😎“Fragments”代替不必要的😒“div”

当你将多个组件包装在单个

    return (
        <>
            <FirstComponentForUser />
            <SecondComponentForUser />
      </> 
    )

😈 更早地解构属性：

如果组件使用 API 的数据（返回 JSON），那么我们必须提前解构数据。这样可以防止我们获取类似

        Cannot destructure propertie 'blah' of undefined

为了避免这种情况，请这样做

这里又多了一个技巧！我使用默认值解构了属性，如果 API 返回的是 NULL，这将对我们有所帮助。

🤐 严格遵守进口订单 🚚

遵循导入顺序可以让我们清楚地了解哪些是自定义导入，哪些是内置/系统导入。这也有助于识别任何第三方导入，例如axios、moment等。

以高效的方式编写🎇styles🎇：

如果组件之间有通用样式，最好将其提取到 React 的样式部分。但是，即使应用了通用样式后，如果需要修改某些内容，也可以使用 REST 语法。

使用👉SVG 代替 PNG 或 JPEG 图像

始终优先选择 SVG（缩放矢量图形），而不是普通的 PNG 或 JPEG 图像。原因是，SVG 的缩放效果远优于其他任何相关图像格式。
因此，无论屏幕的宽高比如何，图像像素都能清晰地呈现。

🎇 最后的想法🎇：

当你刚开始学习任何技术时，最佳实践总是看起来令人不知所措。但是，一旦你开始构建大型应用程序，它们就会节省你的时间。

🙏感谢您的阅读！

💜 下期再见！💜