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

時間  2020-05-09
標籤 技巧 編寫 更好 react 代碼 欄目 React 简体版
原文   原文鏈接

原文連接：levelup.gitconnected.com/5-tips-to-w…css

第一步，徵得做者贊成。react

第二步，進入正文。git

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

1. 解構 props

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

//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 進行解構，咱們的代碼將像下面這樣:shell

//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，幸運的是，咱們能夠經過解構來簡化它。npm

//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。好比：json

//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. 保持導入模塊的順序

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

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. 特定於模塊的導入（例如CSS，PNG等）
  5. 僅用於測試的代碼

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

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 中。有時，這樣的解決方案會有問題。好比下面的這個例子中：

咱們要建立一個 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中的其它提示和技巧，請隨時在下面的評論部分中分享它們。

最後：

點評：翻譯得很爛，還不如機翻。哈哈哈哈。

最近沒什麼輸出，不過並無偷懶啦，雖然近期工做較多，可是也有好好學習。新的文章也在認真編寫中了，努力吧，程序員們~

點個Star鼓勵： github.com/YvetteLau/B…

掘金使用
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程