5个技巧助你编写更好的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;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.css3.使用 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;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;这只是样式化组件如何工作的一个简单示例，但是它们可以做的还远远不止这些。你可以在其官方文档中了解有关样式化组件的更多信息。