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

开发 前端
在本文中,我分享几个技巧,这些技巧将改善你的React代码,希望对你有所帮助!

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

在本文中,我想分享几个技巧,这些技巧将改善你的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.         <CoffeeCard 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.         <div> 
  7.             <h1>{props.coffee.name}</h1> 
  8.             <p>Price: {props.coffee.price}$</p> 
  9.             <p>Size: {props.coffee.size} oz</p> 
  10.         </div> 
  11.     ); 
  12. }; 
  13.  
  14. 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.         <div> 
  8.             <h1>{name}</h1> 
  9.             <p>Price: {price}$</p> 
  10.             <p>Size: {size} oz</p> 
  11.         </div> 
  12.     ); 
  13. }; 
  14.  
  15. 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 <ContactInfo 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.         <div> 
  21.             <h1>{name}</h1> 
  22.             <p> E-mail: {email}</p> 
  23.             <p> Phone: {phone}</p> 
  24.         </div> 
  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.             <tbody> 
  8.                 <tr> 
  9.                     <Columns /> 
  10.                 </tr> 
  11.             </tbody> 
  12.         </table
  13.     ); 
  14. }; 
  15.  
  16. export default Table 

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

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

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

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

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

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

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

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

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

展示组件

  • 主要关注UI,它们负责组件的外观。
  • 数据由 props 提供,木偶组件中不应该调用API,这是智能组件的工作
  • 除了UI的依赖包,它们不需要依赖应用程序
  • 它们可能包括状态,但仅用于操纵UI本身-它们不应存储应用程序数据。

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

容器组件

  • 它们不关注样式,通常不包含任何样式
  • 它们用于处理数据,可以请求数据,捕获更改和传递应用程序数据
  • 负责管理状态,重新渲染组件等等
  • 可能依赖于应用程序,调用 Redux,生命周期方法,API和库等等。

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

  • 更好的可读性
  • 更好的可重用性
  • 更容易测试

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

示例

让我们看一个简单的例子。这是一个 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 <p>Loading...</p>; 
  18.     }; 
  19.  
  20.     const renderBooks = () => { 
  21.         return ( 
  22.             <ul> 
  23.                 {books.map(book => ( 
  24.                     <li>{book.name}</li> 
  25.                 ))} 
  26.             </ul> 
  27.         ); 
  28.     }; 
  29.  
  30.     return <>{isLoading ? renderLoading() : renderBooks()}</>; 
  31. }; 
  32. export default BookList;  

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

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

  1. import React from 'react'
  2.  
  3. const BookList = ({ books, isLoading }) => { 
  4.     const renderLoading = () => { 
  5.         return <p>Loading...</p>; 
  6.     }; 
  7.  
  8.     const renderBooks = () => { 
  9.         return ( 
  10.             <ul> 
  11.                 {books.map(book => ( 
  12.                     <li key={book.id}>{book.name}</li> 
  13.                 ))} 
  14.             </ul> 
  15.         ); 
  16.     }; 
  17.  
  18.     return <>{isLoading ? renderLoading() : renderBooks()}</>; 
  19. }; 
  20. export default BookList; 
  21. import React, { useState, useEffect } from 'react'
  22. import BookList from './BookList'
  23.  
  24. const BookListContainer = () => { 
  25.     const [books, setBooks] = useState([]); 
  26.     const [isLoading, setLoading] = useState(false); 
  27.  
  28.     useEffect(() => { 
  29.         setLoading(true); 
  30.         fetch('/api/books'
  31.             .then(res => res.json()) 
  32.             .then(books => { 
  33.                 setBooks(books); 
  34.                 setLoading(false); 
  35.             }); 
  36.     }, []); 
  37.  
  38.     return <BookList books={books} isLoading={isLoading} />; 
  39. }; 
  40.  
  41. 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.         <Grid> 
  27.             <Col> 
  28.                 <MySCButton mainColor='#ee6352' primary>My 1st Button</MySCButton> 
  29.                 <MySCButton mainColor='#ee6352'>My 2st Button</MySCButton> 
  30.                 <MySCButton mainColor='#ee6352'>My 3st Button</MySCButton> 
  31.             </Col> 
  32.             <Col> 
  33.                 <MySCButton mainColor='#515052' primary>My 4st Button</MySCButton> 
  34.                 <MySCButton mainColor='#515052'>My 5st Button</MySCButton> 
  35.                 <MySCButton mainColor='#515052'>My 6st Button</MySCButton> 
  36.             </Col> 
  37.         </Grid> 
  38.     ); 
  39.  
  40. export default App; 

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

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2013-04-17 09:32:31

2020-06-23 07:50:13

Python开发技术

2020-06-23 07:48:18

Python开发技术

2020-10-04 13:15:37

代码技术开发

2020-08-06 00:25:38

Python代码开发

2020-08-06 16:34:48

Python开发工具

2010-12-01 09:15:35

基础架构

2014-07-29 13:55:10

程序员代码

2017-08-30 19:32:08

代码程序员编程

2021-03-17 08:00:59

JS语言Javascript

2017-08-30 11:10:25

代码

2016-12-13 10:06:25

编写Java单元测试技巧

2017-09-14 12:45:35

2022-12-07 15:01:47

2023-10-10 08:00:00

2014-04-21 10:14:52

PromisesJavaScript

2021-04-25 11:31:45

React代码整洁代码的实践

2022-06-08 08:55:15

JavaScript代码前端

2024-01-30 08:54:05

JavaScript技巧代码

2021-02-23 10:48:30

Python代码开发
点赞
收藏

51CTO技术栈公众号