文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

5个技巧助你编写更好的React代码

2024-12-24 17:59

关注

在本文中,我想分享几个技巧,这些技巧将改善你的React代码。

1. 解构 props

在 JS 中解构对象(尤其是 props)可以大大减少代码中的重复。看下面的例子:

  1. //Parent Component 
  2. import React from 'react'
  3.  
  4. import CoffeeCard from './CoffeeCard'
  5.  
  6. const CafeMenu = () => { 
  7.     const coffeeList = [ 
  8.         { 
  9.             id: '0'
  10.             name'Espresso'
  11.             price: '2.00'
  12.             size'16' 
  13.         }, 
  14.         { 
  15.             id: '1'
  16.             name'Cappuccino'
  17.             price: '3.50'
  18.             size'24' 
  19.         }, 
  20.         { 
  21.             id: '2'
  22.             name'Caffee Latte'
  23.             price: '2.70'
  24.             size'12' 
  25.         } 
  26.     ]; 
  27.  
  28.     return coffeeList.map(item => ( 
  29.         key={item.id} coffee={item} /> 
  30.     )); 
  31. }; 
  32.  
  33. export default CafeMenu; 

CafeMenu 组件用于存储可用饮料的列表,现在我们想要创建另一个可以显示一种饮料的组件。如果不对 props 进行解构,我们的代码将像下面这样: 

  1. //Child Component 
  2. import React from 'react'
  3.  
  4. const CoffeeCard = props => { 
  5.     return ( 
  6.         
     
  7.              
  8.             

    Price: {props.coffee.price}$

     
  9.             

    Size: {props.coffee.size} oz

     
  10.         
 
  •     ); 
  • }; 
  •  
  • export default CoffeeCard;  
  • 如你所见,它看起来并不好,每次我们需要获取某个属性时,都要重复 props.coffee,幸运的是,我们可以通过解构来简化它。 

    1. //Child Component (after destructuring props) 
    2. import React from 'react'
    3.  
    4. const CoffeeCard = props => { 
    5.     const { name, price, size } = props.coffee; 
    6.     return ( 
    7.         
       
    8.              
    9.             

      Price: {price}$

       
    10.             

      Size: {size} oz

       
    11.         
     
  •     ); 
  • }; 
  •  
  • export default CoffeeCard;  
  • 如果我们想将大量参数传递给子组件,我们还可以直接在构造函数(或函数组件的参数)中解构 props。比如: 

    1. //Parent Component 
    2. import React from 'react'
    3.  
    4. import ContactInfo from './ContactInfo'
    5.  
    6. const UserProfile = () => { 
    7.     const name = 'John Locke'
    8.     const email = 'john@locke.com'
    9.     const phone = '01632 960668'
    10.  
    11.     return name={name} email={email} phone={phone} />; 
    12. }; 
    13.  
    14. export default UserProfile; 
    15. //Child Component 
    16. import React from 'react'
    17.  
    18. const ContactInfo = ({ name, email, phone }) => { 
    19.     return ( 
    20.         
       
    21.              
    22.             

       E-mail: {email}

       
    23.             

       Phone: {phone}

       
    24.          
    25.     ); 
    26. }; 
    27.  
    28. export default ContactInfo; 

    2. 保持导入模块的顺序

    有时(尤其是在“容器组件”中),我们需要使用许多不同的模块,并且组件导入看上去有些混乱,如:

    1. import { Auth } from 'aws-amplify'
    2. import React from 'react'
    3. import SidebarNavigation from './components/SidebarNavigation'
    4. import { EuiPage, EuiPageBody } from '@elastic/eui'
    5. import { keyCodes } from '@elastic/eui/lib/services'
    6. import './index.css' 
    7. import HeaderNavigation from './components/HeaderNavigation'
    8. import Routes from './Routes'

    关于导入模块的理想顺序有很多不同的观点。我建议多参考,然后找到适合你自己的那种。

    至于我自己,我通常按类型对导入进行分组,并按字母顺序对它们进行排序(这是可选操作)。我也倾向于保持以下顺序:

    1. 标准模块
    2. 第三方模块
    3. 自己代码导入(组件)
    4. 特定于模块的导入(例如CSS,PNG等)
    5. 仅用于测试的代码

    快速重构一下,我们的模块导入看上去舒服多了了。

    1. import React from 'react'
    2.  
    3. import { Auth } from 'aws-amplify'
    4. import { EuiPage, EuiPageBody } from '@elastic/eui'
    5. import { keyCodes } from '@elastic/eui/lib/services'
    6.  
    7. import HeaderNavigation from './components/HeaderNavigation'
    8. import SidebarNavigation from './components/SidebarNavigation'
    9. import Routes from './Routes'
    10.  
    11. import './index.css' 

    3.使用 Fragments

    在我们的组件中,我们经常返回多个元素。一个 React 组件不能返回多个子节点,因此我们通常将它们包装在 div 中。有时,这样的解决方案会有问题。比如下面的这个例子中:

    我们要创建一个 Table 组件,其中包含一个 Columns 组件。 

    1. import React from 'react' 
    2. import Columns from './Columns'
    3.  
    4. const Table = () => { 
    5.     return ( 
    6.         <table
    7.              
    8.                  
    9.                      
    10.                  
    11.              
    12.         table
    13.     ); 
    14. }; 
    15.  
    16. export default Table 

    Columns 组件中包含一些 td 元素。由于我们无法返回多个子节点,因此需要将这些元素包装在 div 中。

    1. import React from 'react' 
    2. const Columns = () => { 
    3.     return ( 
    4.         
       
    5.             Hello 
    6.             World 
    7.          
    8.     ); 
    9. }; 
    10.  
    11. export default Columns; 

    然后就报错了,因为tr 标签中不能放置 div。我们可以使用 Fragment 标签来解决这个问题,如下所示:

    1. import React, { Fragment } from 'react'
    2. const Columns = () => { 
    3.     return ( 
    4.          
    5.             Hello 
    6.             World 
    7.          
    8.     ); 
    9. }; 
    10.  
    11. export default Columns; 

    我们可以将 Fragment 视为不可见的 div。它在子组件将元素包装在标签中,将其带到父组件并消失。

    你也可以使用较短的语法,但是它不支持 key 和属性。 

    1. import React from 'react' 
    2. const Columns = () => { 
    3.     return ( 
    4.         <> 
    5.             Hello 
    6.             World 
    7.          
    8.     ); 
    9. }; 
    10. export default Columns; 

    4. 使用展示组件和容器组件

    将应用程序的组件分为展示(木偶)组件和容器(智能)组件。如果你不知道这些是什么,可以下面的介绍:

    展示组件

    木偶组件有:加载指示器,模态,按钮,输入。

    容器组件

    使用展示组件和容器组件的好处

    此外,它还符合“单一责任原则” - 一个组件负责外观,另一个组件负责数据。

    示例

    让我们看一个简单的例子。这是一个 BookList 组件,该组件可从API获取图书数据并将其显示在列表中。 

    1. import React, { useState, useEffect } from 'react' 
    2. const BookList = () => { 
    3.     const [books, setBooks] = useState([]); 
    4.     const [isLoading, setLoading] = useState(false); 
    5.  
    6.     useEffect(() => { 
    7.         setLoading(true); 
    8.         fetch('api/books'
    9.             .then(res => res.json()) 
    10.             .then(books => { 
    11.                 setBooks(books); 
    12.                 setLoading(false); 
    13.             }); 
    14.     }, []); 
    15.  
    16.     const renderLoading = () => { 
    17.         return 

      Loading...

    18.     }; 
    19.  
    20.     const renderBooks = () => { 
    21.         return ( 
    22.             
         
      •                 {books.map(book => ( 
      •                     
      • {book.name}
      •  
      •                 ))} 
      •             
       
    23.         ); 
    24.     }; 
    25.  
    26.     return <>{isLoading ? renderLoading() : renderBooks()}; 
    27. }; 
    28. export default BookList;  

    该组件的问题在于,它负责太多事情。它获取并呈现数据。它还与一个特定的接口关联,因此在不复制代码的情况下,不能使用此组件显示特定用户的图书列表。

    现在,让我们尝试将此组件分为展示组件和容器组件。 

    1. import React from 'react'
    2.  
    3. const BookList = ({ books, isLoading }) => { 
    4.     const renderLoading = () => { 
    5.         return 

      Loading...

    6.     }; 
    7.  
    8.     const renderBooks = () => { 
    9.         return ( 
    10.             
         
      •                 {books.map(book => ( 
      •                     key={book.id}>{book.name}
      •  
      •                 ))} 
      •             
       
    11.         ); 
    12.     }; 
    13.  
    14.     return <>{isLoading ? renderLoading() : renderBooks()}; 
    15. }; 
    16. export default BookList; 
    17. import React, { useState, useEffect } from 'react'
    18. import BookList from './BookList'
    19.  
    20. const BookListContainer = () => { 
    21.     const [books, setBooks] = useState([]); 
    22.     const [isLoading, setLoading] = useState(false); 
    23.  
    24.     useEffect(() => { 
    25.         setLoading(true); 
    26.         fetch('/api/books'
    27.             .then(res => res.json()) 
    28.             .then(books => { 
    29.                 setBooks(books); 
    30.                 setLoading(false); 
    31.             }); 
    32.     }, []); 
    33.  
    34.     return 
    35. }; 
    36.  
    37. export default BookListContainer;  

    5. 使用 styled-components

    对 React 组件进行样式设置一直是个难题。查找拼写错误的类名,维护大型 CSS 文件,处理兼容性问题有时可能很痛苦。

    styled-components 是一个常见的 css in js 类库,和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等。

    要开始使用 styled-components,你需要首先安装依赖: 

    1. npm i styled-components 

    下面是一个示例: 

    1. import React from 'react'
    2. import styled from 'styled-components'
    3.  
    4. const Grid = styled.div` 
    5.     display: flex; 
    6. `; 
    7.  
    8. const Col = styled.div` 
    9.     display: flex; 
    10.     flex-direction: column
    11. `; 
    12.  
    13. const MySCButton = styled.button` 
    14.     background: ${props => (props.primary ? props.mainColor : 'white')}; 
    15.     color: ${props => (props.primary ? 'white' : props.mainColor)}; 
    16.     display: block; 
    17.     font-size: 1em; 
    18.     margin: 1em; 
    19.     padding: 0.5em 1em; 
    20.     border: 2px solid ${props => props.mainColor}; 
    21.     border-radius: 15px; 
    22. `; 
    23.  
    24. function App() { 
    25.     return ( 
    26.          
    27.              
    28.                 '#ee6352' primary>My 1st Button 
    29.                 '#ee6352'>My 2st Button 
    30.                 '#ee6352'>My 3st Button 
    31.              
    32.              
    33.                 '#515052' primary>My 4st Button 
    34.                 '#515052'>My 5st Button 
    35.                 '#515052'>My 6st Button 
    36.              
    37.          
    38.     ); 
    39.  
    40. export default App; 

    这只是样式化组件如何工作的一个简单示例,但是它们可以做的还远远不止这些。你可以在其官方文档中了解有关样式化组件的更多信息。 

     

    来源:前端大全内容投诉

    免责声明:

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

      难度     813人已做
      查看
    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看
    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看
    • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

      难度     435人已做
      查看
    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机
    位置:首页-资讯-后端开发
    咦!没有更多了?去看看其它编程学习网 内容吧
    首页课程
    资料下载
    问答资讯