Javascript
5个技巧助你编写更好的React代码
原文链接：levelup.gitconnected.com/5-tips-to-w…
第一步，征得作者同意。
第二步，进入正文。
在本文中，我想分享几个技巧，这些技巧将改善你的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';
复制代码关于导入模块的理想顺序有很多不同的观点。我建议多参考，然后找到适合你自己的那种。
至于我自己，我通常按类型对导入进行分组，并按字母顺序对它们进行排序（这是可选操作）。我也倾向于保持以下顺序：
- 标准模块
- 第三方模块
- 自己代码导入（组件）
- 特定于模块的导入（例如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'
复制代码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…
-
Vue新手入门教程：从零开始学习Vue框架11-23
-
如何集成Ant Design Vue的图标11-23
-
如何集成Ant Design Vue图标11-23
-
使用vue CLI快速搭建Vue项目教程11-23
-
Vue CLI多环境配置简单教程11-23
-
Vue3入门教程：轻松搭建你的第一个Vue3应用11-23
-
Vue3+Vite快速上手指南11-23
-
Vue3阿里系UI组件入门指南11-23
-
Vue3的阿里系UI组件入门指南11-23
-
Vue3公共组件入门教程11-23
-
Vue3核心功能响应式变量入门教程11-23
-
集成Ant Design Vue的图标学习11-23
-
集成Ant Design Vue图标学习：新手入门指南11-23
-
Vue3入门：新手必读的简单教程11-21
-
Vue3教程：新手入门与基础详解11-21
