如何编写Cleaner React代码

大家好，我是小弋。

今天分享的内容是如何编写干净的React代码。

正文

作为React开发者，我们都希望写出更干净的代码，更简单，更容易阅读。

在本指南中，我把一些编写更干净的React代码的七个顶级方法放在一起，使得构建React项目和审查你的代码更容易。

总的来说，学习如何编写更干净的React代码将使你成为一个更有价值的、整体上更快乐的React开发者，所以让我们马上开始吧!

主要涉及以下几个点：

• 合理使用jsx。
• 把不相关的代码移到一个独立的组件中。
• 为每个组件创建单独的文件。
• 将共享功能移入React hooks。
• 尽可能多地从你的JSX中删除JavaScript。
• 格式化内联样式，减少臃肿的代码。
• 合理使用React context。

合理使用JSX

你如何向一个给定的prop传递一个true的值?

在下面的例子中，我们使用showTitle在Navbar组件中显示我们应用程序的标题。

1. // src/App.js 
2.  
3. export default function App() { 
4.   return ( 
5.     <main> 
6.       <Navbar showTitle={true} /> 
7.     </main> 
8.   ); 
9. } 
10.  
11. function Navbar({ showTitle }) { 
12.   return ( 
13.     <div> 
14.       {showTitle && <h1>My Special App</h1>} 
15.     </div> 
16.   ) 
17. } 

我们是否需要明确地将showTitle设置为布尔值true?我们不需要!

一个快速的速记方法是，在一个组件上提供的任何prop的默认值都是true。

因此，如果我们在Navbar上添加showTitle，我们的标题元素就会显示出来。

1. // src/App.js 
2.  
3. export default function App() { 
4.   return ( 
5.     <main> 
6.       <Navbar showTitle /> 
7.     </main> 
8.   ); 
9. } 
10.  
11. function Navbar({ showTitle }) { 
12.   return ( 
13.     <div> 
14.       {showTitle && <h1>My Special App</h1>} // title shown! 
15.     </div> 
16.   ) 
17. } 

另一个要记住的有用的速记法涉及到传递字符串prop。

当你传递一个字符串的值时，你不需要用大括号把它包起来。

如果我们要设置导航条的标题，使用title的prop时，我们可以把它的值放在双引号中。

1. // src/App.js 
2.  
3. export default function App() { 
4.   return ( 
5.     <main> 
6.       <Navbar title="My Special App" /> 
7.     </main> 
8.   ); 
9. } 
10.  
11. function Navbar({ title }) { 
12.   return ( 
13.     <div> 
14.       <h1>{title}</h1> 
15.     </div> 
16.   ) 
17. } 

 把不相关的代码移到一个独立的组件中

可以说，编写更干净的React代码的最简单和最重要的方法是善于将我们的代码抽象成独立的React组件。

让我们看一下下面的例子：

1. // src/App.js 
2.  
3. export default function App() { 
4.   const posts = [ 
5.     { 
6.       id: 1, 
7.       title: "How to Build YouTube with React" 
8.     }, 
9.     { 
10.       id: 2, 
11.       title: "How to Write Your First React Hook" 
12.     } 
13.   ]; 
14.  
15.   return ( 
16.     <main> 
17.       <Navbar title="My Special App" /> 
18.       <ul> 
19.         {posts.map(post => ( 
20.           <li key={post.id}> 
21.             {post.title} 
22.           </li> 
23.         ))} 
24.       </ul> 
25.     </main> 
26.   ); 
27. } 
28.  
29. function Navbar({ title }) { 
30.   return ( 
31.     <div> 
32.       <h1>{title}</h1> 
33.     </div> 
34.   ); 
35. } 

我们的应用程序正在显示一个导航条组件。我们正在用.map()遍历一个帖子数组，并在页面上显示其标题。

我们思考一个问题，我们怎样才能使它更干净呢?

我们为什么不把我们正在循环的代码，抽象化，并在一个单独的组件中显示它们，我们称之为FeaturePosts。

让我们看看改进后的结果：

1. // src/App.js 
2.  
3. export default function App() { 
4.  return ( 
5.     <main> 
6.       <Navbar title="My Special App" /> 
7.       <FeaturedPosts /> 
8.     </main> 
9.   ); 
10. } 
11.  
12. function Navbar({ title }) { 
13.   return ( 
14.     <div> 
15.       <h1>{title}</h1> 
16.     </div> 
17.   ); 
18. } 
19.  
20. function FeaturedPosts() { 
21.   const posts = [ 
22.     { 
23.       id: 1, 
24.       title: "How to Build YouTube with React" 
25.     }, 
26.     { 
27.       id: 2, 
28.       title: "How to Write Your First React Hook" 
29.     } 
30.   ]; 
31.  
32.   return ( 
33.     <ul> 
34.       {posts.map((post) => ( 
35.         <li key={post.id}>{post.title}</li> 
36.       ))} 
37.     </ul> 
38.   ); 
39. } 

正如你所看到的，我们现在可以只看我们的App组件。

通过阅读其中的组件名称，即Navbar和FeaturePosts，我们可以准确地看到我们的应用程序所显示的内容。

为每个组件创建单独的文件

从我们之前的例子来看，我们把所有的组件都放在一个文件里，即app.js文件。

类似于我们将代码抽象成独立的组件以使我们的应用程序更具可读性，为了使我们的应用程序文件更具可读性，我们可以将我们拥有的每个组件放在一个单独的文件中。

这又一次帮助我们在应用程序中分离关注点。这意味着每个文件只负责一个组件，如果我们想在我们的应用程序中重复使用一个组件，就不会混淆它的来源了。

1. // src/App.js 
2. import Navbar from './components/Navbar.js'; 
3. import FeaturedPosts from './components/FeaturedPosts.js'; 
4.  
5. export default function App() { 
6.   return ( 
7.     <main> 
8.       <Navbar title="My Special App" /> 
9.       <FeaturedPosts /> 
10.     </main> 
11.   ); 
12. } 

我们来看看Navbar中的代码：

1. // src/components/Navbar.js 
2.  
3. export default function Navbar({ title }) { 
4.   return ( 
5.     <div> 
6.       <h1>{title}</h1> 
7.     </div> 
8.   ); 
9. } 

接着我们看看FeaturedPosts中代码：

1. // src/components/FeaturedPosts.js 
2.  
3. export default function FeaturedPosts() { 
4.   const posts = [ 
5.     { 
6.       id: 1, 
7.       title: "How to Build YouTube with React" 
8.     }, 
9.     { 
10.       id: 2, 
11.       title: "How to Write Your First React Hook" 
12.     } 
13.   ]; 
14.  
15.   return ( 
16.     <ul> 
17.       {posts.map((post) => ( 
18.         <li key={post.id}>{post.title}</li> 
19.       ))} 
20.     </ul> 
21.   ); 
22. } 

此外，通过将每个单独的组件包含在自己的文件中，我们可以避免一个文件变得过于臃肿。如果我们想把所有的组件都加入到app.js文件中，我们很容易看到我们的app.js文件变得非常大。

将共享功能移入React hooks

看看我们的FeaturePosts组件，假设我们不是显示静态的帖子数据，而是想从一个API中获取我们的帖子数据。

我们可以用fetch API来做。你可以看到下面这个结果:

1. // src/components/FeaturedPosts.js 
2.  
3. import React from 'react'; 
4.  
5. export default function FeaturedPosts() { 
6.   const [posts, setPosts] = React.useState([]);      
7.      
8.   React.useEffect(() => { 
9.     fetch('https://jsonplaceholder.typicode.com/posts') 
10.       .then(res => res.json()) 
11.       .then(data => setPosts(data)); 
12.   }, []); 
13.  
14.   return ( 
15.     <ul> 
16.       {posts.map((post) => ( 
17.         <li key={post.id}>{post.title}</li> 
18.       ))} 
19.     </ul> 
20.   ); 
21. } 

然而，如果我们想在多个组件中执行这一数据请求，该怎么办?

比方说，除了FeaturePosts组件外，我们还想创建一个具有相同数据的Post组件。我们将不得不复制我们用来获取数据的逻辑，并将其粘贴到该组件中。

为了避免这样做，我们为什么不使用一个新的React钩子，我们可以称之为useFetchPosts:

1. // src/hooks/useFetchPosts.js 
2.  
3. import React from 'react'; 
4.  
5. export default function useFetchPosts() { 
6.   const [posts, setPosts] = React.useState([]);      
7.      
8.   React.useEffect(() => { 
9.     fetch('https://jsonplaceholder.typicode.com/posts') 
10.       .then(res => res.json()) 
11.       .then(data => setPosts(data)); 
12.   }, []); 
13.  
14.   return posts; 
15. } 

一旦我们在一个专门的 "钩子 "文件夹中创建了这个钩子，我们就可以在任何我们喜欢的组件中重复使用它，包括我们的FeaturePosts组件:

1. // src/components/FeaturedPosts.js 
2.  
3. import useFetchPosts from '../hooks/useFetchPosts.js'; 
4.  
5. export default function FeaturedPosts() { 
6.   const posts = useFetchPosts() 
7.  
8.   return ( 
9.     <ul> 
10.       {posts.map((post) => ( 
11.         <li key={post.id}>{post.title}</li> 
12.       ))} 
13.     </ul> 
14.   ); 
15. } 

 尽可能多地从你的JSX中删除JavaScript

另一个非常有用的，但经常被忽视的清理组件的方法是尽可能多地从我们的JSX中删除JavaScript。

让我们看一下下面的例子:

1. // src/components/FeaturedPosts.js 
2.  
3. import useFetchPosts from '../hooks/useFetchPosts.js'; 
4.  
5. export default function FeaturedPosts() { 
6.   const posts = useFetchPosts() 
7.  
8.   return ( 
9.     <ul> 
10.       {posts.map((post) => ( 
11.         <li onClick={event => { 
12.           console.log(event.target, 'clicked!'); 
13.         }} key={post.id}>{post.title}</li> 
14.       ))} 
15.     </ul> 
16.   ); 
17. } 

我们正试图处理一个帖子的点击事件。你可以看到，我们的JSX变得更加难以阅读。鉴于我们的函数是作为一个内联函数包含的，它掩盖了这个组件的目的，以及它的相关函数。

我们能做什么来解决这个问题呢?我们可以把与onClick相连的内联函数提取出来，变成一个单独的处理程序，我们可以给它一个合适的名字，如handlePostClick。

一旦我们这样做，我们的JSX就会再次变得可读。

1. // src/components/FeaturedPosts.js 
2.  
3. import useFetchPosts from '../hooks/useFetchPosts.js'; 
4.  
5. export default function FeaturedPosts() { 
6.   const posts = useFetchPosts() 
7.    
8.   function handlePostClick(event) { 
9.     console.log(event.target, 'clicked!');    
10.   } 
11.  
12.   return ( 
13.     <ul> 
14.       {posts.map((post) => ( 
15.         <li onClick={handlePostClick} key={post.id}>{post.title}</li> 
16.       ))} 
17.     </ul> 
18.   ); 
19. } 

 格式化内联样式，减少臃肿的代码

React开发者经常会在他们的JSX中写内联样式。

但是，这使我们的代码更难阅读，更难写出额外的JSX。

1. // src/App.js 
2.  
3. export default function App() { 
4.   return ( 
5.     <main style={{ textAlign: 'center' }}> 
6.       <Navbar title="My Special App" /> 
7.     </main> 
8.   ); 
9. } 
10.  
11. function Navbar({ title }) { 
12.   return ( 
13.     <div style={{ marginTop: '20px' }}> 
14.       <h1 style={{ fontWeight: 'bold' }}>{title}</h1> 
15.     </div> 
16.   ) 
17. } 

我们想把这种关注点分离的概念应用到我们的JSX样式中，把我们的内联样式移到一个CSS样式表中，我们可以把它导入我们喜欢的任何组件。

另一种重写内联样式的方法是将它们组织成对象。你可以看到这种模式是什么样子的:

1. // src/App.js 
2.  
3. export default function App() { 
4.   const styles = { 
5.     main: { textAlign: "center" } 
6.   }; 
7.  
8.   return ( 
9.     <main style={styles.main}> 
10.       <Navbar title="My Special App" /> 
11.     </main> 
12.   ); 
13. } 
14.  
15. function Navbar({ title }) { 
16.   const styles = { 
17.     div: { marginTop: "20px" }, 
18.     h1: { fontWeight: "bold" } 
19.   }; 
20.  
21.   return ( 
22.     <div style={styles.div}> 
23.       <h1 style={styles.h1}>{title}</h1> 
24.     </div> 
25.   ); 
26. } 

 合理使用React context

在你的React项目中，另一个必不可少的模式是使用React Context(特别是如果你有共同的属性，你想在你的组件中重复使用，而你发现自己写了很多重复的props)。

例如，如果我们想在多个组件之间共享用户数据，而不是多个重复的props(一种叫做props drilling的模式)，我们可以使用React库中的context功能。

在我们的例子中，如果我们想在我们的Navbar和FeaturePosts组件中重复使用用户数据，我们所需要做的就是把我们的整个应用包裹在一个提供者组件中。

接下来，我们可以在值prop上传递用户数据，并在useContext钩子的帮助下，在我们的各个组件中消费该上下文。

1. // src/App.js 
2.  
3. import React from "react"; 
4.  
5. const UserContext = React.createContext(); 
6.  
7. export default function App() { 
8.   const user = { name: "Reed" }; 
9.  
10.   return ( 
11.     <UserContext.Provider value={user}> 
12.       <main> 
13.         <Navbar title="My Special App" /> 
14.         <FeaturedPosts /> 
15.       </main> 
16.     </UserContext.Provider> 
17.   ); 
18. } 
19.  
20. // src/components/Navbar.js 
21.  
22. function Navbar({ title }) { 
23.   const user = React.useContext(UserContext); 
24.  
25.   return ( 
26.     <div> 
27.       <h1>{title}</h1> 
28.       {user && <a href="/logout">Logout</a>} 
29.     </div> 
30.   ); 
31. } 
32.  
33. // src/components/FeaturedPosts.js 
34.  
35. function FeaturedPosts() { 
36.   const posts = useFetchPosts(); 
37.   const user = React.useContext(UserContext); 
38.  
39.   if (user) return null; 
40.  
41.   return ( 
42.     <ul> 
43.       {posts.map((post) => ( 
44.         <li key={post.id}>{post.title}</li> 
45.       ))} 
46.     </ul> 
47.   ); 
48. } 

 总结

我希望当你试图改进你自己的React代码，使其更干净，更容易阅读，并最终更愉快地创建你的React项目时，你会发现这个指南很有用。

原文链接：https://mp.weixin.qq.com/s/cS_hLAoAWU-XHqTNUbO