在本文中，我想分享一些可以改进您的React代码的技巧。1.解构props在JS中解构对象（尤其是props）可以大大减少代码重复。请参见以下示例：//ParentComponentimportReactfrom'react';importCoffeeCardfrom'./CoffeeCard';constCafeMenu=()=>{constcoffeeList=[{id:'0',name:'Espresso',price:'2.00',size:'16'},{id:'1',name:'Cappuccino',price:'3.50',size:'24'},{id:'2',name:'CaffeeLatte',price:'2.70',size:'12'}];returncoffeeList.map(item=>());};exportdefaultCafeMenu;CafeMenu组件用于存储可用饮品列表，现在我们要创建另一个可以显示饮料的组件。如果不解构props，我们的代码将如下所示：//ChildComponentimportReactfrom'react';constCoffeeCard=props=>{return(

);};exportdefaultCoffeeCard;如您所见，它看起来并不好，每次我们需要获取某个属性时，我们都必须重复props.coffee，幸运的是我们可以通过解构来简化它。//ChildComponent(afterdestructuringprops)importReactfrom'react';constCoffeeCard=props=>{const{name,price,size}=props.coffee;return();};exportdefaultCoffeeCard;如果我们要给子组件传递大量的参数，也可以直接在构造器（或函数组件的参数）中解构props。例如：//ParentComponentimportReactfrom'react';importContactInfofrom'./ContactInfo';constUserProfile=()=>{constname='JohnLocke';constemail='john@locke.com';constphone='01632960668';return;};exportdefaultUserProfile;//ChildComponentimportReactfrom'react';constContactInfo=({name,email,phone})=>{return(

{姓名}

电子邮箱：{email}

电话：{phone}

);};exportdefaultContactInfo;2.有时保持导入模块的顺序（尤其是在“容器组件”中），我们需要使用许多不同的模块，组件导入看起来有点混乱，例如：import{Auth}from'aws-amplify';importReactfrom'react';importSidebarNavigationfrom'./components/SidebarNavigation';import{EuiPage,EuiPageBody}from'@elastic/eui';import{keyCodes}from'@elastic/eui/lib/services';import'./index.css'importHeaderNavigationfrom'./components/HeaderNavigation';从'./Routes'导入路由；关于导入模块的理想顺序有很多不同的意见。我建议做大量研究并找到适合您的方法。至于我自己，我通常按类型对导入进行分组并按字母顺序对它们进行排序（这是可选的）。我也倾向于保持以下顺序：标准模块3rd方模块自己的代码导入（组件）特定于模块的导入（例如CSS、PNG等）代码仅用于测试快速重构，我们的模块导入看起来更舒服结束了.importReactfrom'react';import{Auth}from'aws-amplify';import{EuiPage,EuiPageBody}from'@elastic/eui';import{keyCodes}from'@elastic/eui/lib/services';importHeaderNavigationfrom'。/components/HeaderNavigation';importSidebarNavigationfrom'./components/SidebarNavigation';importRoutesfrom'./Routes';import'./index.css'3.使用Fragment在我们的组件中，我们经常返回多个元素。一个React组件不能返回多个子节点，所以我们通常将它们包装在一个div中。有时这样的解决方案可能会有问题。例如，在下面的示例中：我们要创建一个Table组件，其中包含一个Columns组件。importReactfrom'react';importColumnsfrom'./Columns';constTable=()=>{return();};exportdefaultTable;Columns组件包含一些td元素。由于我们不能返回多个子节点，所以我们需要将这些元素包裹在一个div中。importReactfrom'react';constColumns=()=>{return(

HelloWorld

);};exportdefaultColumns;然后就报错了，因为tr一个div不能放在一个标签里面。我们可以使用Fragment标签来解决这个问题，如下：importReact,{Fragment}from'react';constColumns=()=>{return(HelloWorld);};exportdefaultColumns;我们可以把Fragment当作一个不可见的div。它将元素包装在子组件的标签中，将其带到父组件并消失。您也可以使用更短的语法，但它不支持键和属性。importReactfrom'react';constColumns=()=>{return(<HelloWorld/>);};exportdefaultColumns;应用程序的组件分为表示（木偶）组件和容器（智能）组件。如果你不知道这些是什么，这里有一个介绍：PresentationComponents主要关注UI，他们负责组件的外观。数据由props提供，API不应该在puppeteer组件中调用，这是智能组件的工作除了UI的依赖包之外，它们不需要依赖应用程序它们可能包括状态，但仅用于操作UI本身——它们不应该存储应用程序数据。Puppet组件有：加载指示器、模态、按钮、输入。ContainerComponents它们不关心样式，通常不包含任何样式它们用于处理数据，可以请求数据，捕获更改并传递应用程序数据，负责管理状态，重新渲染组件等。可能取决于应用程序、调用Redux、生命周期方法、API和库等。使用展示组件和容器组件的好处更好的可读性更好的可重用性更容易测试此外，它符合“单一职责原则”——一个组件负责外观，另一个组件负责数据。例子让我们看一个简单的例子。这是一个BookList组件，它从API获取图书数据并将其显示在列表中。importReact,{useState,useEffect}from'react';constBookList=()=>{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);});},[]);constrenderLoading=()=>{return

正在加载...

;};constrenderBooks=()=>{return(

{books.map(book=>(
• {book.name}
))}

);};return<>{isLoading?renderLoading():renderBooks()};};exportdefaultBookList;这个组件的问题在于它需要注意太多的事情。它获取并呈现数据。它还绑定到一个特定的界面，因此如果不重复代码，您就不能使用该组件为特定用户显示图书列表。现在，让我们尝试将此组件分成表示组件和容器组件。importReactfrom'react';constBookList=({books,isLoading})=>{constrenderLoading=()=>{return

Loading...

;};constenderBooks=()=>{return(

{books.map(book=>({book.name}))}

);};return<>{isLoading?renderLoading():renderBooks()};};exportdefaultBookList;importReact,{useState,useEffect}from'react';importBookListfrom'./BookList';constBookListContainer=()=>{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;};exportdefaultBookListContainer;5.为React组件使用styled-components样式化一直是一个挑战。查找拼写错误的类名、维护大型CSS文件、处理兼容性问题有时会很痛苦。styled-components是js类库中常用的css。和所有同类型的类库一样，通过js赋能解决了原生css不具备的能力，比如变量、循环、函数等。要开始使用styled-components，你需要首先安装依赖：npmistyled-components下面是一个示例：importReactfrom'react';importstyledfrom'styled-components';constGrid=styled.div`display:flex;`;constCol=styled.div`display:flex;flex-direction:column;`;constMySCButton=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.5em1em;border:2pxsolid${props=>props.mainColor};border-radius:15px;`;functionApp(){return(My1stButtonMy2stButtonMy3stButtonMy4stButtonMy5stButtonMy6stButton);}exportdefaultApp;这只是样式组件如何工作的一个简单示例，但它们可以做的远不止于此。您可以在其官方文档中阅读有关样式组件的更多信息。