如果你是一个高度互动的人 如果你'如果您是 UI 风格 UI 的前端开发人员,那么您的工具箱中很可能有 React。当使用 React 驱动的创作时,你应该小心你所做的事情以符合 React 最佳实践。这有助于使代码更有条理。
如您所知,React 是 Facebook 创建的一个库,允许与许多有趣的组件集成。实际上,任何开发人员都可以创建自己的组件并让社区可以访问它们。
今天,我们将讨论并向您展示 React 最基本的最佳实践:
?1.保持组件小且功能特定
众所周知,使用 React,您可以拥有执行大量任务的庞大组件。但是设计组件的一种更好的方法是使它们保持较小,以便一个组件对应一个功能。理想情况下,各个组件应该呈现页面的特定部分或修改特定行为。这有很多好处:
- 特定于功能的组件可以是独立的,这使得测试和维护更加容易。
- 每个小部件都可以在多个项目中重复使用。
- 社区可以使用执行通用功能的组件。
- 使用更小的组件,可以更轻松地实现性能优化。
- 更新较小的组件更容易。
- 更大的组件一定更难实现,也可能更难维护。
创建一个简洁的组件和创建多个特定于功能的组件之间的平衡因组织而异。毕竟,您可以拥有任意数量的组件并以您希望的任何方式重新组合它们以获得相同的最终结果。
♻️2.可重用性很重要,因此请尽量减少新组件的创建
通过遵守一个功能 = 一个组件的规则,您可以提高组件的可重用性。这意味着如果该功能的组件已经存在,则应跳过为该功能构建新组件的尝试。
通过在一个项目中或跨任意数量的项目重用组件,您不仅可以实现一致性,还可以为社区做出贡献。
另一方面,如果任何组件变得庞大、笨重且难以维护,最好将其分解为所需的较小组件。
例如,您甚至可以更进一步,创建一个可以处理图标的 Button 组件。然后,只要您需要一个按钮,您就可以使用一个组件。使其更加模块化将使您能够使用相同的代码涵盖许多情况。你必须瞄准中间的某个地方。您的组件应该足够抽象,但不要过于复杂。
class IconButton extends React.Component {(...) render() { return ( ); 3. 合并重复代码——杀死你的代码
所有代码的一般规则是尽可能简洁。
这里也不例外,因为 React 最佳实践还指导您保持代码简洁和精确。一种方法是避免重复——不要重复自己(干)。
您可以通过仔细检查代码的模式和相似性来做到这一点。如果发现任何问题,您可能正在重新编码并且可以消除重复。最有可能的是,稍微重写一下可以使它更简洁。
这在很大程度上依赖于 React 中的可重用性原则。假设你想添加多个包含图标的按钮,而不是为每个按钮添加一个标记,你可以简单地使用我们上面展示的 IconButton 组件。您甚至可以将所有内容映射到一个数组中。
const buttons = ('facebook', 'twitter', 'youtube'); return (
{ buttons.map ((button) => { return (