设为首页 - 加入收藏 92站长网 (http://www.92zhanzhang.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 为什么 中国 苹果
当前位置: 首页 > 综合聚焦 > 移动互联 > 评测 > 正文

重构复杂的React组件:编写高效且可读组件的5个优秀实践

发布时间:2019-10-30 04:43 所属栏目:[评测] 来源:王强
导读:问题 React.js 已成为 Web 组件中很受欢迎的视图库。一路进化下来,它发展出了众多特性,如今已成为创建优秀的 Web 应用程序的一套完整工具。 它的社区经历了爆发式增长,尤其在过去的 2-3 年中,网络上出现了成千上万有关这项技术的教程。 因此,每位初学

?问题

React.js 已成为 Web 组件中很受欢迎的视图库。一路进化下来,它发展出了众多特性,如今已成为创建优秀的 Web 应用程序的一套完整工具。

重构复杂的React组件:编写高效且可读组件的5个优秀实践

它的社区经历了爆发式增长,尤其在过去的 2-3 年中,网络上出现了成千上万有关这项技术的教程。

因此,每位初学者在开始学习 React 时都应该做一件事情,那就是阅读其文档或教程进而创建他们的第一个组件,就像我在 Codeworks 上开始我的学习旅途一样:

https://codeworks.me/?utm_source=medium&utm_medium=organic&utm_campaign=marco_ghiani_hackernoon_how_to_write_clean_react_components

但我的问题是:你能肯定你的 React 组件遵循了优秀实践吗?简单来说,它们是不是正常工作呢?

脏组件长什么样

为了更好地说明我的观点,让我们来看看下面的 React 组件:

  1. import?React?from?'react';?
  2. import?'./Listcomponent.css';?
  3. class?Listcomponent?extends?React.Component?{?
  4. ?constructor(props)?{?
  5. ?super(props);?
  6. ?this.state?=?{?
  7. ?lastClickedButton:?''?
  8. ?};?
  9. ?}?
  10. ?render()?{?
  11. ?return?(?
  12. ?
    ?
  13. ?The?last?clicked?button?is?{this.state.lastClickedButton}?
  14. ?
      ?
  15. ?
  16. ?
  17. ?<>
  18. ?onClick={()?=>?{?
  19. ?this.setState({?lastClickedButton:?'Create'?});?
  20. ?this.props.createSomething();?
  21. ?}}?
  22. ?className="my-button">?
  23. ?Create?
  24. ??
  25. ?
  26. ?
  27. ?
  28. ?
  29. ?<>
  30. ?onClick={()?=>?{?
  31. ?this.setState({?lastClickedButton:?'Read'?});?
  32. ?this.props.readSomething();?
  33. ?}}?
  34. ?className="my-button">?
  35. ?Read?
  36. ??
  37. ?
  38. ?
  39. ?
  40. ?
  41. ?<>
  42. ?onClick={()?=>?{?
  43. ?this.setState({?lastClickedButton:?'Update'?});?
  44. ?this.props.updateSomething();?
  45. ?}}?
  46. ?className="my-button">?
  47. ?Update?
  48. ??
  49. ?
  50. ?
  51. ?
  52. ?
  53. ?<>
  54. ?onClick=?{()?=>?{?
  55. ?this.setState({?lastClickedButton:?'Destroy'?});?
  56. ?this.props.destroySomething();?
  57. ?}}?
  58. ?className="my-button">?
  59. ?Destroy?
  60. ??
  61. ?
  62. ?
  63. ??
  64. ?
?
  • ?);?
  • ?}?
  • }?
  • 一个肮脏的 React 组件

    这是一个完全正常工作的 React 组件,可以在整个应用程序中多次使用。它渲染了一个按钮列表,这些按钮会触发某个事件,组件还会显示最近被点击的是哪个按钮。总之很简单。

    你可能会想:“好吧……如果能用,那就没什么问题!”

    但如果有人告诉你,现在这个用 62 行代码写成的组件其实用少得多的代码也能做出来呢?所以我们开始做扫除吧!

    1. 优先使用 React Hooks 实现函数组件

    随着 React 16.8 引入 Hooks,我们就可以在类声明中使用函数组件来构成有状态组件(如果我们需要处理任何逻辑)了。

    在本文中,我们不会深入讨论类与函数组件或 React Hooks。但在 React 社区中众所周知的是,最好优先创建函数组件,尤其是现在我们有了 Hooks 这么好用的工具。

    Hooks 允许你复用状态逻辑,而无需更改组件层次结构。

    接下来让我们看一下第一次重构后组件的样子:

    1. import?React,?{?useState?}?from?'react';?
    2. import?'./ListComponent.css';?
    3. const?ListComponent?=?props?=>?{?
    4. ?const?[lastClickedButton,?setLastClickedButton]?=?useState('');?
    5. ?return?(?
    6. ?
      ?
    7. ?The?last?clicked?button?is?{lastClickedButton}?
    8. ?
        ?
    9. ?
    10. ?
    11. ?<>
    12. ?onClick={()?=>?{?
    13. ?setLastClickedButton('Create');?
    14. ?props.createSomething();?
    15. ?}}?
    16. ?className="my-button">?
    17. ?Create?
    18. ??
    19. ?
    20. ?
    21. ?
    22. ?
    23. ?<>
    24. ?onClick={()?=>?{?
    25. ?setLastClickedButton('Read');?
    26. ?props.ReadSomething();?
    27. ?}}?
    28. ?className="my-button">?
    29. ?Read?
    30. ??
    31. ?
    32. ?
    33. ?
    34. ?
    35. ?<>
    36. ?onClick={()?=>?{?
    37. ?setLastClickedButton('Update');?
    38. ?props.updateSomething();?
    39. ?}}?
    40. ?className="my-button">?
    41. ?Update?
    42. ??
    43. ?
    44. ?
    45. ?
    46. ?
    47. ?<>
    48. ?onclick={()?=>?{?
    49. ?setLastClickedButton('Destroy');?
    50. ?props.DestroySomething();?
    51. ?}}?
    52. ?className="my-button">?
    53. ?Destroy?
    54. ??
    55. ?
    56. ?
    57. ??
    58. ?
    ?
  • ?);?
  • };?
  • 用 React Hooks 重构成函数组件很好,我们的组件已经短一些了,我们还删除了 类 语法,但仍然需要做许多优化工作。

    2. 利用好它!

    【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

    相关内容
    网友评论
    推荐文章
    热点阅读
    随机内容