给我5分钟！教你写出干净清爽的 React 代码

作为React开发人员，我们都希望编写更简洁、更容易阅读的代码。

在这篇指南中，我总结了七种最重要的方法，你可以从今天开始编写更干净的React代码，让构建React项目和检查代码变得更容易。

一般来说，学习如何编写更清晰的React代码将使你成为一个更有价值、更快乐的React开发人员，所以让我们开始吧!

1. 使用JSX简写

如何将true的值传递给给定的prop?

在下面的例子中，我们使用showTitle这个prop来在导航栏组件中显示我们应用的标题。

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle={true} />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>}
    </div>
  )
}

我们需要显式设置showTitle为布尔值true吗?不!一个要记住的简单方法是，组件上提供的任何prop都有一个默认值true。

因此，如果我们在导航栏上添加showTitle prop，我们的title元素将显示:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar showTitle />
    </main>
  );
}

function Navbar({ showTitle }) {
  return (
    <div>
      {showTitle && <h1>My Special App</h1>} // title shown!
    </div>
  )
}

另一个需要记住的有用的速记方法是传递字符串 prop 。当你传递一个字符串的prop 值时，你不需要用花括号包装它。

如果我们要设置导航栏的标题，使用title prop，我们只需要在双引号中包含它的值:

// src/App.js

export default function App() {
  return (
    <main>
      <Navbar  />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  )
}

2. 将不相关的代码移动到单独的组件中

毫无疑问，要想编写更清晰的React代码，最简单也是最重要的方法就是将代码抽象到单独的React组件中。

让我们看看下面的例子。我们的代码在做什么?

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

// src/App.js

export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to Build App with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <main>
      <Navbar  />
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul>
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

我们怎样才能使它更干净呢?

为什么我们不抽象我们正在循环的代码——我们的post，并在一个单独的组件中显示它们，我们将其称为featuredpost。

让我们来看看结果:

// src/App.js

export default function App() {
 return (
    <main>
      <Navbar  />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build App with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

如你所见，我们现在只需要看看我们的App组件。通过读取其中组件、导航栏和FeaturedPosts的名称，我们可以准确地看到我们的应用程序正在显示什么。

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

在前面的例子中，我们把所有的组件都包含在一个单独的文件app.js中。

就像我们将代码抽象到单独的组件中以使我们的应用程序更具可读性，使我们的应用程序文件更具可读性一样，我们可以将每个组件放到一个单独的文件中。

这再次帮助我们分离应用程序中的关注点。这意味着每个文件只负责一个组件，如果我们想在整个应用中重用它，就不会混淆组件来自哪里:

// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';

export default function App() {
  return (
    <main>
      <Navbar  />
      <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: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

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

4. 将公共的功能移到React Hooks中

看看我们的FeaturedPosts组件，我们要从API中获取post数据，而不是显示静态的post数据。

我们可以使用fetch API。你可以看到下面的结果:

// src/components/FeaturedPosts.js

import React from 'react';

export default function FeaturedPosts() {
  const [posts, setPosts] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('https://example.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

但是，如果我们想跨多个组件执行这个数据请求，该怎么办呢?

假设除了FeaturedPosts组件外，我们还想创建一个名为just Posts的组件，该组件具有相同的数据。我们必须复制用于获取数据的逻辑，并将其粘贴到该组件中。

为了避免这样做，为什么我们不使用一个新的React Hooks 我们可以叫它useFetchPosts:

// src/hooks/useFetchPosts.js

import React from 'react';

export default function useFetchPosts() {
  const [posts, setPosts] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('https://example.com/posts')
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return posts;
}

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

// src/components/FeaturedPosts.js

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>
  );
}

5. 从JSX中移除尽可能多的JavaScript

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

让我们看看下面的例子:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={event => {
          console.log(event.target, 'clicked!');
        }} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

我们正在处理我们的一个帖子上的点击事件。您可以看到，我们的JSX变得更难阅读了。由于我们的函数是作为内联函数包含的，因此它掩盖了这个组件及其相关函数的用途。

我们能做些什么来解决这个问题呢?我们可以将连接到onClick的内联函数提取到一个单独的处理程序中，我们可以给它一个合适的名称，如handlePostClick。

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

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()
  
  function handlePostClick(event) {
    console.log(event.target, 'clicked!');   
  }

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={handlePostClick} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

6. 格式化内联样式以减少代码的膨胀

React开发人员的一个常见模式是在JSX中编写内联样式。但是，这再次使我们的代码更难读，也更难编写额外的JSX:

// src/App.js

export default function App() {
  return (
    <main style={{ textAlign: 'center' }}>
      <Navbar  />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: '20px' }}>
      <h1 style={{ fontWeight: 'bold' }}>{title}</h1>
    </div>
  )
}

我们希望将关注点分离的概念应用到JSX样式中，方法是将内联样式移动到CSS样式表中，我们可以将CSS样式表导入到任何想要的组件中。

重写内联样式的另一种方法是将它们组织成对象。你可以看到这样的模式看起来像下面:

// src/App.js

export default function App() {
  const styles = {
    main: { textAlign: "center" }
  };

  return (
    <main style={styles.main}>
      <Navbar  />
    </main>
  );
}

function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

7.使用 React context 减少 prop drilling

React项目的另一个基本模式是使用React Context(特别是当你有一些共同的属性，你想要在你的组件中重用，并且你发现自己正在编写许多重复的prop时)。

例如，如果我们想跨多个组件共享用户数据，而不是多个重复的prop(称为props drilling 的模式)，我们可以使用React库中内置的上下文特性。

在我们的例子中，如果我们想要在Navbar和FeaturedPosts组件中重用用户数据，我们只需要将整个应用打包到provider组件中。

接下来，我们可以把用户数据传递到value prop上，并在useContext hook 的帮助下，在各个组件中使用这个上下文:

// src/App.js

import React from "react";

const UserContext = React.createContext();

export default function App() {
  const user = { name: "Reed" };

  return (
    <UserContext.Provider value={user}>
      <main>
        <Navbar  />
        <FeaturedPosts />
      </main>
    </UserContext.Provider>
  );
}

// src/components/Navbar.js

function Navbar({ title }) {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>{title}</h1>
      {user && <a href="/logout">Logout</a>}
    </div>
  );
}

// src/components/FeaturedPosts.js

function FeaturedPosts() {
  const posts = useFetchPosts();
  const user = React.useContext(UserContext);

  if (user) return null;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

总结

我希望，当你试图改进你自己的React代码，使其更清晰、更容易阅读，并最终更享受创建你的React项目时，这篇指南对你有用。