大家好，我是 CUGGZ。
今天来分享 10 个编写更简洁 React 代码的实用小技巧！
1. JSX 简写
如何将 true 值传递给给定的 props？
在下面的示例中，使用 prop showTitle 在导航栏组件中显示应用的标题：
export default function App() { return ( <main> <Navbar showTitle={true} /> </main> ); } function Navbar({ showTitle }) { return ( <div> {showTitle && <h1>标题</h1>} </div> ) }
这里将 showTitle 显式设置为布尔值 true，其实这是没必要的，因为组件上提供的任何 prop 都具有默认值 true。因此只需要在调用组件时传递一个 showTitle 即可：
export default function App() { return ( <main> <Navbar showTitle /> </main> ); } function Navbar({ showTitle }) { return ( <div> {showTitle && <h1>标题</h1>} </div> ) }
另外，当需要传递一个字符串作为 props 时，无需使用花括号 {} 包裹，可以通过双引号包裹字符串内容并传递即可：
export default function App() { return ( <main> <Navbar title="标题" /> </main> ); } function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ) }
2. 将不相关代码移动到单独的组件中
编写更简洁的 React 代码的最简单和最重要的方法就是善于将代码抽象为单独的 React 组件。
下面来看一个例子，应用中最上面会有一个导航栏，并遍历 posts 中的数据将文章标题渲染出来：
export default function App() { const posts = [ { id: 1, title: "标题1" }, { id: 2, title: "标题2" } ]; return ( <main> <Navbar title="大标题" /> <ul> {posts.map(post => ( <li key={post.id}> {post.title} </li> ))} </ul> </main> ); } function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ); }
那我们怎样才能让这段代码更加清洁呢？我们可以抽象循环中的代码（文章标题），将它们抽离到一个单独的组件中，称之为 FeaturedPosts。抽离后的代码如下：
export default function App() { return ( <main> <Navbar title="大标题" /> <FeaturedPosts /> </main> ); } function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ); } function FeaturedPosts() { const posts = [ { id: 1, title: "标题1" }, { id: 2, title: "标题2" } ]; return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
如你所见，在 App 组件中，通过其中的组件名称：Navbar 和 FeaturedPosts，就可以快速地看到应用的作用。
3. 为每个组件创建单独的文件
在上面的例子中，我们将三个组件在一个文件中实现。如果组件逻辑较少，这些写还没啥问题，但是如果组件逻辑较为复杂，那这样写代码的可读性就很差了。为了使应用文件更具可读性，可以将每个组件放入一个单独的文件中。
这可以帮助我们在应用中分离关注点。 这意味着每个文件只负责一个组件，如果想在应用中重用它，就不会混淆组件的来源：
// src/App.js import Navbar from './components/Navbar.js'; import FeaturedPosts from './components/FeaturedPosts.js'; export default function App() { return ( <main> <Navbar title="大标题" /> <FeaturedPosts /> </main> ); }
// src/components/Navbar.js export default function Navbar({ title }) { return ( <div> <h1>{title}</h1> </div> ); }
// src/components/FeaturedPosts.js export default function FeaturedPosts() { const posts = [ { id: 1, title: "标题1" }, { id: 2, title: "标题2" } ]; return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
此外，通过将每个单独的组件包含在其自己的文件中，可以避免一个文件变得过于臃肿。
4. 将共享函数移动到 React hook 中
在 FeaturedPosts 组件，假设想要从 API 获取文章数据，而不是使用假数据。可以使用 fetch API 来实现：
import React from 'react'; export default function FeaturedPosts() { const [posts, setPosts] = React.useState([]); React.useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(data => setPosts(data)); }, []); return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
但是，如果想在多个组件执行这个数据请求怎么办？
假设除了 FeaturedPosts 组件之外，还又一个名为 Posts 的组件，其中包含相同的数据。 我们必须复制用于获取数据的逻辑并将其粘贴到该组件中。为了避免重复编写代码，可以定义一个新的 React hook，可以称之为 useFetchPosts：
import React from 'react'; export default function useFetchPosts() { const [posts, setPosts] = React.useState([]); React.useEffect(() => { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(data => setPosts(data)); }, []); return posts; }
这样就可以在任何组件中重用它，包括 FeaturedPosts 组件：
import useFetchPosts from '../hooks/useFetchPosts.js'; export default function FeaturedPosts() { const posts = useFetchPosts() return ( <ul> {posts.map((post) => ( <li key={post.id}>{post.title}</li> ))} </ul> ); }
你可能需要的React开发小技巧！（下）https://developer.aliyun.com/article/1411416
