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

更新日期: 2020-05-08阅读: 2.4k标签: 代码

在本文中,我想分享几个技巧,这些技巧将改善你的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;

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;

如你所见,它看起来并不好,每次我们需要获取某个属性时,都要重复 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;

如果我们想将大量参数传递给子组件,我们还可以直接在构造函数(或函数组件的参数)中解构 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;


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. 特定于模块的导入(例如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;

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

原文:https://levelup.gitconnected.com/5-tips-to-write-better-react-code-a5bca3f9531c


链接: https://www.fly63.com/article/detial/8945

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!