你可能需要的React开发技巧！

)}另外，当需要传递一个字符串作为props时，不需要使用花括号{}wrap，可以使用doublequotes把字符串内容包起来传过去：exportdefaultfunctionApp(){return(

);}functionNavbar({title}){return()}2.将不相关的代码移动到单独的组件中编写更简洁的React代码最简单也是最重要的方法是善于将代码抽象为单独的组件React组件。让我们看一个例子。应用顶部会有一个导航栏，会遍历posts中的数据渲染文章标题：exportdefaultfunctionApp(){constposts=[{id:1,title:"Title1"},{id:2,title:"标题2"}];return(

{posts.map(post=>({post.title}))}

);}functionNavbar({title}){return();}那么我们如何让这段代码更简洁呢？我们可以抽象循环中的代码（帖子标题）并将它们提取到一个单独的组件中，称为FeaturedPosts。提取出来的代码如下：);}functionFeaturedPosts(){constposts=[{id:1,title:"Title1"},{id:2,title:"标题2"}];返回(

{posts.map((post)=>({post.title}))}

);}可以看到，在App组件中，通过组件名称：Navbar和FeaturedPosts，可以快速看出应用的作用。3.为每个组件创建一个单独的文件在上面的例子中，我们在一个文件中实现了三个组件。如果组件逻辑少，这些写是没有问题的，但是如果组件逻辑比较复杂，这样写的代码可读性就很差。为了使您的应用程序文件更具可读性，您可以将每个组件放在一个单独的文件中。这可以帮助我们在应用程序中分离关注点。这意味着每个文件只负责一个组件，如果你想在你的应用程序中复用它，你不会混淆组件的来源：//src/App.jsimportNavbarfrom'./components/Navbar.js';从'./components/FeaturedPosts.js'导入FeaturedPosts；导出默认函数App(){return(

);}//src/组件/导航栏。jsexport默认函数Navbar({title}){return();}//src/components/FeaturedPosts.jsexport默认函数FeaturedPosts(){constposts=[{id:1,title:"标题1"},{id:2,title:"标题2"}];return(

{posts.map((post)=>({post.title}))}

);}此外，通过包括每个单独的组件在其自己的文件中，您可以防止一个文件变得过于臃肿。4.将共享函数移动到React挂钩中在FeaturedPosts组件中，假设您想从API获取帖子数据而不是使用虚假数据。这可以使用fetchAPI来实现：importReactfrom'react';导出默认函数FeaturedPosts(){const[posts,setPosts]=React.useState([]);React.useEffect((){fetch('https://jsonplaceholder.typicode.com/posts').then(resres.json()).then(datasetPosts(data));},[]);return(

{posts.map((post)=>({post.title}))}

);}但是如果你想怎么办在多个组件中执行此数据请求？假设除了FeaturedPosts组件之外，还有另一个名为Posts的组件包含相同的数据。我们必须复制获取数据的逻辑并将其粘贴到该组件中。为避免重复代码，定义一个新的React钩子，将其命名为useFetchPosts：importReactfrom'react';导出默认函数useFetchPosts(){const[posts,setPosts]=React.useState([]);反应.useEffect((){fetch('https://jsonplaceholder.typicode.com/posts').then(resres.json()).then(datasetPosts(data));},[]);returnposts;}这样它就可以在任何组件中重用，包括FeaturedPosts组件：importuseFetchPostsfrom'../hooks/useFetchPosts.js';exportdefaultfunctionFeaturedPosts(){constposts=useFetchPosts()return(

{posts.map((post)=>({post.title}))}

);}5.从JSX中移除JS另一个简化的组件最好的方法是从JSX中移除尽可能多的JavaScript。看下面的例子：importuseFetchPostsfrom'../hooks/useFetchPosts.js';导出默认函数FeaturedPosts(){constposts=useFetchPosts()return(

{posts.map((post)=>({console.log(event.target,'clicked!');}}key={post.id}>{post.title}))}

);}这里我们尝试处理文章的点击事件，你可以看到我们的JSX变得更难阅读了。鉴于该函数作为内联函数包含在内，它掩盖了该组件及其相关函数的用途。那么如何解决这个问题呢？包含onClick的内联函数可以提取到一个单独的处理函数中，将其命名为handlePostClick。这使得JSX更具可读性：importuseFetchPostsfrom'../hooks/useFetchPosts.js';导出默认函数FeaturedPosts(){constposts=useFetchPosts()functionhandlePostClick(event){console.log(event.target,'clicked!');}return(

{posts.map((post)=>({post.title}))}

);}6.格式化内联样式在JSX中编写过多的内联样式会使代码更难阅读和臃肿："标题"/>);}functionNavbar({title}){return({title}