5個技巧助你編寫更好的React代碼

時間 2020-05-12

標籤技巧編寫更好 react 代碼欄目 React 简体版

原文原文鏈接

原文連接： https://levelup.gitconnected....

在本文中，我想分享幾個技巧，這些技巧將改善你的React代碼。css

1. 解構 `props`

在 JS 中解構對象（尤爲是 props）能夠大大減小代碼中的重複。看下面的例子：react

//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;

CafeMenu 組件用於存儲可用飲料的列表，如今咱們想要建立另外一個能夠顯示一種飲料的組件。若是不對 props 進行解構，咱們的代碼將像下面這樣:git

//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;

如你所見，它看起來並很差，每次咱們須要獲取某個屬性時，都要重複 props.coffee，幸運的是，咱們能夠經過解構來簡化它。shell

//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;

若是咱們想將大量參數傳遞給子組件，咱們還能夠直接在構造函數（或函數組件的參數）中解構 props。好比：npm

//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;

2. 保持導入模塊的順序

有時（尤爲是在「容器組件」中），咱們須要使用許多不一樣的模塊，而且組件導入看上去有些混亂，如:json

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';

關於導入模塊的理想順序有不少不一樣的觀點。我建議多參考，而後找到適合你本身的那種。api

至於我本身，我一般按類型對導入進行分組，並按字母順序對它們進行排序（這是可選操做）。我也傾向於保持如下順序：數組

標準模塊
第三方模塊
本身代碼導入（組件）
特定於模塊的導入（例如CSS，PNG等）
僅用於測試的代碼

快速重構一下，咱們的模塊導入看上去舒服多了了。app

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'

3.使用 `Fragments`

在咱們的組件中，咱們常常返回多個元素。一個 React 組件不能返回多個子節點，所以咱們一般將它們包裝在 div 中。有時，這樣的解決方案會有問題。好比下面的這個例子中：ide

咱們要建立一個 Table 組件，其中包含一個 Columns 組件。

import React from 'react';

import Columns from './Columns';

const Table = () => {
    return (
        <table>
            <tbody>
                <tr>
                    <Columns />
                </tr>
            </tbody>
        </table>
    );
};

export default Table;

Columns 組件中包含一些 td 元素。因爲咱們沒法返回多個子節點，所以須要將這些元素包裝在 div 中。

import React from 'react';

const Columns = () => {
    return (
        <div>
            <td>Hello</td>
            <td>World</td>
        </div>
    );
};

export default Columns;

而後就報錯了，由於tr 標籤中不能放置 div。咱們可使用 Fragment 標籤來解決這個問題，以下所示：

import React, { Fragment } from 'react';

const Columns = () => {
    return (
        <Fragment>
            <td>Hello</td>
            <td>World</td>
        </Fragment>
    );
};

export default Columns;

咱們能夠將 Fragment 視爲不可見的 div。它在子組件將元素包裝在標籤中，將其帶到父組件並消失。
你也可使用較短的語法，可是它不支持 key 和屬性。

import React from 'react';

const Columns = () => {
    return (
        <>
            <td>Hello</td>
            <td>World</td>
        </>
    );
};
export default Columns;

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;

該組件的問題在於，它負責太多事情。它獲取並呈現數據。它還與一個特定的接口關聯，所以在不復制代碼的狀況下，不能使用此組件顯示特定用戶的圖書列表。

如今，讓咱們嘗試將此組件分爲展現組件和容器組件。

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;

如你所見，它看起來要好得多。更重要的是，它使咱們能夠在具備不一樣數據的許多地方使用 BookList 組件。

5. 使用 `styled-components`

對 React 組件進行樣式設置一直是個難題。查找拼寫錯誤的類名，維護大型 CSS 文件，處理兼容性問題有時可能很痛苦。

styled-components 是一個常見的 css in js 類庫，和全部同類型的類庫同樣，經過 js 賦能解決了原生 css 所不具有的能力，好比變量、循環、函數等。

要開始使用 styled-components，你須要首先安裝依賴：

npm i styled-components

下面是一個示例：

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;

這只是樣式化組件如何工做的一個簡單示例，可是它們能夠作的還遠遠不止這些。你能夠在其官方文檔中瞭解有關樣式化組件的更多信息。

謝謝閱讀！到此爲止。但願你學到了一些新知識。若是你知道React中的其它提示和技巧，請隨時在下面的評論部分中分享它們。