10 praktische Tipps zum Schreiben sauberer React-Code

In diesem Artikel werden 10 praktische Tipps zum Schreiben von einfacherem React-Code zusammengestellt und weitergegeben. Ich hoffe, dass er für alle hilfreich ist!

1. JSX-Abkürzung

Wie kann man gegebenen Requisiten echten Wert verleihen? [Verwandte Empfehlungen: Redis-Video-Tutorial, Programmiervideo]

Verwenden Sie im folgenden Beispiel prop showTitle, um den Titel der Anwendung in der Navigationsleistenkomponente anzuzeigen: 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

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

Hier wird showTitle wird explizit auf einen booleschen Wert true gesetzt, was nicht notwendig ist, da jedes auf der Komponente bereitgestellte prop den Standardwert wahr . Sie müssen also nur einen showTitle übergeben, wenn Sie die Komponente aufrufen:

// src/components/Navbar.js
export default function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

Außerdem ist es nicht nötig, curly zu verwenden, wenn Sie einen String als props übergeben müssen Klammern { Paket, können Sie den String-Inhalt in doppelte Anführungszeichen setzen und übergeben:

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

2. Verschieben Sie irrelevanten Code in eine separate Komponente

Der einfachste und wichtigste Weg, saubereren React-Code zu schreiben, besteht darin, Ihren Code gut in separate React-Komponenten zu abstrahieren.

Sehen wir uns ein Beispiel an. Oben in der Anwendung wird eine Navigationsleiste angezeigt, und die Daten in beiträgen werden durchlaufen, um den Artikeltitel darzustellen:

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

Wie können wir das machen? Dieser Code-Reiniger? Wir können den Code in der Schleife (Beitragstitel) abstrahieren und in eine separate Komponente ziehen, die wir FeaturedPosts nennen. Der extrahierte Code lautet wie folgt:

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

Wie Sie sehen können, können Sie ihn in der App-Komponente schnell anhand der Komponentennamen erkennen: Navbar und FeaturedPosts Die Rolle von die Anwendung.

3. Erstellen Sie separate Dateien für jede Komponente

Im obigen Beispiel haben wir drei Komponenten in einer Datei implementiert. Wenn die Komponentenlogik klein ist, ist das Schreiben dieser Codes kein Problem. Wenn die Komponentenlogik jedoch komplexer ist, ist die Lesbarkeit des auf diese Weise geschriebenen Codes sehr schlecht. Um die Lesbarkeit Ihrer App-Dateien zu verbessern, können Sie jede Komponente in einer separaten Datei ablegen.

Dies hilft uns, Anliegen in unserer Bewerbung zu trennen. Das bedeutet, dass jede Datei nur für eine Komponente verantwortlich ist, sodass Sie die Quelle der Komponente nicht verschleiern, wenn Sie sie in Ihrer App wiederverwenden möchten:

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

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, &#39;clicked!&#39;);
        }} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

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

Darüber hinaus vermeiden Sie dies, indem Sie jede einzelne Komponente in eine eigene Datei aufnehmen a Die Datei wird zu groß.

4. Verschieben Sie die gemeinsame Funktion in einen React-Hook.

Angenommen, Sie möchten in der FeaturedPosts-Komponente Artikeldaten von der API abrufen, anstatt gefälschte Daten zu verwenden. Sie können die Abruf-API verwenden, um dies zu erreichen:

export default function App() {
  return (
    <main style={{ textAlign: &#39;center&#39; }}>
      <Navbar title="大标题" />
    </main>
  );
}

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

Aber was ist, wenn Sie diese Datenanforderung für mehrere Komponenten ausführen möchten?

Angenommen, dass es zusätzlich zur FeaturedPosts-Komponente eine weitere Komponente namens Posts gibt, die dieselben Daten enthält. Wir müssen die Logik zum Abrufen der Daten kopieren und in die Komponente einfügen. Um das Duplizieren von Code zu vermeiden, können Sie einen neuen React-Hook definieren, den Sie useFetchPosts nennen können:

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

  return (
    <main style={styles.main}>
      <Navbar title="大标题" />
    </main>
  );
}

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

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

Auf diese Weise können Sie ihn in jeder Komponente wiederverwenden, einschließlich der FeaturedPosts-Komponente:

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user && user.userId;
    
  return isPostAuthor ? <EditButton /> : null;
}

5. Entfernen Sie JS aus JSX

Eine weitere Möglichkeit, Ihre Komponenten zu vereinfachen, besteht darin, so viel JavaScript wie möglich aus JSX zu entfernen. Schauen Sie sich das folgende Beispiel an:

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user?.userId;
    
  return isPostAuthor ? <EditButton /> : null;
}

Hier versuchen wir, das Klickereignis des Artikels zu verarbeiten, und Sie können sehen, dass unser JSX schwieriger zu lesen ist. Da die Funktion als Inline-Funktion enthalten ist, verschleiert sie den Zweck dieser Komponente und der damit verbundenen Funktionen. Wie kann dieses Problem gelöst werden? Sie können die Inline-Funktion, die onClick enthält, in eine separate Handler-Funktion extrahieren und ihr den Namen handlePostClick geben. Dies macht JSX besser lesbar:

export default function App() {
  return (
    <Layout>
      <Routes />
    </Layout>
  );
}

6. Formatieren Sie Inline-Stile

🎜Wenn Sie zu viele Inline-Stile in JSX schreiben, wird der Code schwerer lesbar und aufgebläht: 🎜

const App = () => (
  <Layout>
    <Routes />
  </Layout>
);

export default App;

🎜 Wir möchten Inline-Stile nach Möglichkeit in CSS-Stylesheets verschieben . Oder organisieren Sie sie in Objekten: 🎜

function PostList() {
  const posts = usePostData();  
    
  return posts.map(post => (
    <PostListItem key={post.id} post={post} />  
  ))
}

🎜 Im Allgemeinen ist es am besten, diese Stile in einem CSS-Stylesheet zu schreiben. Wenn der Stil dynamisch generiert werden muss, kann er in einem Objekt definiert werden. 🎜🎜🎜7. Mit dem optionalen Verkettungsoperator🎜🎜🎜In JavaScript müssen wir zunächst sicherstellen, dass ein Objekt existiert, bevor wir auf seine Eigenschaften zugreifen können. Wenn der Wert des Objekts undefiniert oder null ist, führt dies zu einem Typfehler. 🎜🎜Sehen Sie sich unten ein Beispiel an, in dem Benutzer ihre veröffentlichten Beiträge bearbeiten können. Die EditButton-Komponente wird nur angezeigt, wenn isPostAuthor „true“ ist, d. h. wenn die ID des authentifizierten Benutzers mit der ID des Beitragsautors übereinstimmt. 🎜

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user && user.userId;
    
  return isPostAuthor ? <EditButton /> : null;
}

这段代码的问题是 user 可能是 undefined. 这就是为什么我们必须在尝试获取 userId 属性之前使用 && 运算符来确保 user 是一个对象。如果我要访问一个对象中的另一个对象，就不得不再包含一个 && 条件。 这会导致代码变得复杂、难以理解。

JavaScript 可选链运算符（?.）允许我们在访问属性之前检查对象是否存在。用它来简化上面的代码：

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user?.userId;
    
  return isPostAuthor ? <EditButton /> : null;
}

这样将防止任何类型错误，并允许我们编写更清晰的条件逻辑。

8. 带括号的隐式返回

在 React 应用中可以使用 function 关键字的函数声明语法编写组件，也可以使用设置为变量的箭头函数。使用 function 关键字的组件必须在返回任何 JSX 之前使用 return 关键字。

export default function App() {
  return (
    <Layout>
      <Routes />
    </Layout>
  );
}

通过将返回的代码包裹在一组括号中，可以通过隐式返回（不使用 return 关键字）从函数返回多行 JavaScript 代码。

对于使用箭头函数的组件，不需要包含 return 关键字，可以只返回带有一组括号的 JSX。

const App = () => (
  <Layout>
    <Routes />
  </Layout>
);

export default App;

此外，当使用 .map() 迭代元素列表时，还可以跳过 return 关键字并仅在内部函数的主体中使用一组括号返回 JSX。

function PostList() {
  const posts = usePostData();  
    
  return posts.map(post => (
    <PostListItem key={post.id} post={post} />  
  ))
}

9. 使用空值合并运算符

在 JavaScript 中，如果某个值是假值（如 null、undefined、0、''、NaN），可以使用 || 条件来提供一个备用值。

例如，在产品页面组件需要显示给定产品的价格，可以使用 || 来有条件地显示价格或显示文本“产品不可用”。

export default function ProductPage({ product }) {    
  return (
     <>
       <ProductDetails />
       <span>
          {product.price || "产品不可用"}
       </span>
     </>
  );
}

现有的代码存在一个问题，如果商品的价格为0，也不会显示产品的价格而显示"产品不可用"。如果左侧为null或者undefined，而不是其他假值，就需要一个更精确的运算符来仅返回表达式的右侧。

这时就可以使用空值合并运算符，当左侧操作数为null或者 undefined 时，将返回右侧操作数。 否则它将返回其左侧操作数：

null ?? 'callback';
// "callback"

0 ?? 42;
// 0

可以使用空值合并运算符来修复上面代码中的问题：

export default function ProductPage({ product }) {    
  return (
     <>
       <ProductDetails />
       <span>{product.price ?? "产品不可用"}
     </>
  );
}

10. 使用三元表达式

在 React 组件中编写条件时，三元表达式是必不可少的，经常用于显示或隐藏组件和元素。

当然，我们用可以使用三元表达式和模板字符串来给 React 元素动态添加或删除类名。

export default function App() {
  const { isDarkMode } = useDarkMode();
    
  return (
    <main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}>
      <Routes />
    </main>
  );
}

这种条件逻辑也可以应用于任何 props：

export default function App() {
  const { isMobile } = useDeviceDetect();
    
  return (
    <Layout height={isMobile ? &#39;100vh&#39; : &#39;80vh&#39;}>
      <Routes />
    </Layout>
  );
}

【推荐学习：javascript视频教程】

Das obige ist der detaillierte Inhalt von10 praktische Tipps zum Schreiben sauberer React-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!