编写更简洁React代码的技巧有哪些

这篇文章主要介绍“编写更简洁React代码的技巧有哪些”，在日常操作中，相信很多人在编写更简洁React代码的技巧有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”编写更简洁React代码的技巧有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联建站于2013年成立，是专业互联网技术服务公司，拥有项目做网站、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元磐石做网站,已为上家服务,为磐石各地企业和个人服务,联系电话:13518219792

1. JSX 简写

如何将 true 值传递给给定的 props？

在下面的示例中，使用 prop showTitle 在导航栏组件中显示应用的标题：

export default function App() {
  return (
    

    
  
);
}

function Navbar({ showTitle }) {
  return (
    

      {showTitle && 
标题
}
    
  )
}

这里将 showTitle 显式设置为布尔值 true，其实这是没必要的，因为组件上提供的任何 prop 都具有默认值 true。因此只需要在调用组件时传递一个 showTitle 即可：

export default function App() {
  return (
    

      
    
  );
}

function Navbar({ showTitle }) {
  return (
    

      {showTitle && 
标题
}
    
  )
}

另外，当需要传递一个字符串作为 props 时，无需使用花括号 {} 包裹，可以通过双引号包裹字符串内容并传递即可：

export default function App() {
  return (
    

      
    
  );
}

function Navbar({ title }) {
  return (
    

      
{title}
    
  )
}

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

编写更简洁的 React 代码的最简单和最重要的方法就是善于将代码抽象为单独的 React 组件。

下面来看一个例子，应用中最上面会有一个导航栏，并遍历 posts 中的数据将文章标题渲染出来：

export default function App() {
  const posts = [
    {
      id: 1,
      title: "标题1"
    },
    {
      id: 2,
      title: "标题2"
    }
  ];

  return (
    

      
      

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

function Navbar({ title }) {
  return (
    

      
{title}
    
  );
}

那我们怎样才能让这段代码更加清洁呢？我们可以抽象循环中的代码（文章标题），将它们抽离到一个单独的组件中，称之为 FeaturedPosts。抽离后的代码如下：

export default function App() {
 return (
    

      
      
    
  );
}

function Navbar({ title }) {
  return (
    

      
{title}
    
  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "标题1"
    },
    {
      id: 2,
      title: "标题2"
    }
  ];

  return (
    

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

如你所见，在 App 组件中，通过其中的组件名称：Navbar 和 FeaturedPosts，就可以快速地看到应用的作用。

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

在上面的例子中，我们将三个组件在一个文件中实现。如果组件逻辑较少，这些写还没啥问题，但是如果组件逻辑较为复杂，那这样写代码的可读性就很差了。为了使应用文件更具可读性，可以将每个组件放入一个单独的文件中。

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

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

export default function App() {
  return (
    

      
      
    
  );
}

// src/components/Navbar.js
export default function Navbar({ title }) {
  return (
    

      
{title}
    
  );
}

// src/components/FeaturedPosts.js
export default function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "标题1"
    },
    {
      id: 2,
      title: "标题2"
    }
  ];

  return (
    

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

此外，通过将每个单独的组件包含在其自己的文件中，可以避免一个文件变得过于臃肿。

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 (
    

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

但是，如果想在多个组件执行这个数据请求怎么办？

假设除了 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 (
    

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

5.  从 JSX 中删除JS

另一种简化组件的方式就是从 JSX 中删除尽可能多的 JavaScript。来看下面的例子：

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

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

  return (
    

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

这里我们尝试处理文章的点击事件，可以看到我们的 JSX 变得更加难以阅读。 鉴于函数是作为内联函数包含的，它掩盖了这个组件的用途，以及它的相关函数。

那该如何来解决这个问题？可以将包含 onClick 的内联函数提取到一个单独的处理函数中，给它一个名称 handlePostClick。这样 JSX 的可读性就变高了：

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

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

  return (
    

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

6. 格式化内联样式

在 JSX 中编写过多的内联样式就会让代码更难阅读并且变得臃肿：

export default function App() {
  return (
    
      
    
  );
}

function Navbar({ title }) {
  return (
    
      {title}