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

2023-02-27

name 组件 from

在本文中，我想分享几个技巧，这些技巧将改善你的React代码。1.解构props在JS中解构对象(尤其是props)可以大大减少代码中的重复。看下面的例子：复制//Parent Component import React from 'react';

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

1. 解构 props

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

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

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

//Child Component 
import React from 'react'; 
 
const CoffeeCard = props => { 
    return ( 
        <div> 
            <h1>{props.coffee.name}</h1> 
            <p>Price: {props.coffee.price}$</p> 
            <p>Size: {props.coffee.size} oz</p> 
        </div> 
    ); 
}; 
 
export default CoffeeCard;  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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

//Child Component (after destructuring props) 
import React from 'react'; 
 
const CoffeeCard = props => { 
    const { name, price, size } = props.coffee; 
    return ( 
        <div> 
            <h1>{name}</h1> 
            <p>Price: {price}$</p> 
            <p>Size: {size} oz</p> 
        </div> 
    ); 
}; 
 
export default CoffeeCard;  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

如果我们想将大量参数传递给子组件，我们还可以直接在构造函数(或函数组件的参数)中解构 props。比如：

//Parent Component 
import React from 'react'; 
 
import ContactInfo from './ContactInfo'; 
 
const UserProfile = () => { 
    const name = 'John Locke'; 
    const email = 'john@locke.com'; 
    const phone = '01632 960668'; 
 
    return <ContactInfo name={name} email={email} phone={phone} />; 
}; 
 
export default UserProfile; 
//Child Component 
import React from 'react'; 
 
const ContactInfo = ({ name, email, phone }) => { 
    return ( 
        <div> 
            <h1>{name}</h1> 
            <p> E-mail: {email}</p> 
            <p> Phone: {phone}</p> 
        </div> 
    ); 
}; 
 
export default ContactInfo; 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

2. 保持导入模块的顺序

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

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

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

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

标准模块
第三方模块
自己代码导入(组件)
特定于模块的导入(例如CSS，PNG等)
仅用于测试的代码

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

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

3.使用 Fragments

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

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

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

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

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

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

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

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

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

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

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

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

展示组件

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

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

容器组件

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

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

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

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

示例

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

import React, { useState, useEffect } from 'react';  
const BookList = () => { 
    const [books, setBooks] = useState([]); 
    const [isLoading, setLoading] = useState(false); 
 
    useEffect(() => { 
        setLoading(true); 
        fetch('api/books') 
            .then(res => res.json()) 
            .then(books => { 
                setBooks(books); 
                setLoading(false); 
            }); 
    }, []); 
 
    const renderLoading = () => { 
        return <p>Loading...</p>; 
    }; 
 
    const renderBooks = () => { 
        return ( 
            <ul> 
                {books.map(book => ( 
                    <li>{book.name}</li> 
                ))} 
            </ul> 
        ); 
    }; 
 
    return <>{isLoading ? renderLoading() : renderBooks()}</>; 
}; 
export default BookList;  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.

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

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

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

5. 使用 styled-components

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

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

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

npm i styled-components 
1.

下面是一个示例：

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