2023年需要遵循的10个React优秀实践-51CTO.COM

译者 | 布加迪

审校 | 孙淑娟

React是流行的JavaScript前端框架之一。不像Angular之类的其他框架，它非常地unopinionated（不自成一体）。因此，得由您来决定自己想要如何编写React代码或设计架构。

下面介绍了您为了提升应用程序性能应该遵循的React优秀实践。

1. 使用函数组件和钩子而不是类

在React中，您可以使用带有钩子的类或函数组件。然而，您应该更经常地使用函数组件和钩子，因为与类相比，它们会生成更简洁更可读的代码。

考虑以下显示来自NASA API的数据的类组件。

class NasaData extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        this.setState({
          data: json,
        });
      });
  }

  render() {
    const { data } = this.state;

    if (!data.length)
      return (
        <div>
          <h1> Fetching data.... </h1>{" "}
        </div>
      );

    return (
      <>
        <h1> Fetch data using Class component </h1>{" "}
        {data.map((item) => (
          <div key={item.id}>{item.title}</div>
        ))}
      </>
    );
  }
}

您可以使用钩子来编写相同的组件：

const NasaData = () => {
  const [data, setdata] = useState(null);

  useEffect(() => {
    fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
      .then((res) => res.json())
      .then((json) => {
        setdata(json);
      });
  }, [data]);

  return (
    <>
      <h1> Fetch data using Class component </h1>{" "}
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </>
  );
};

尽管上面的代码块执行与类组件同样的任务，但比较简单、简洁且易于理解。

2. 尽量避免使用状态

React状态跟踪数据；数据一发生变化，会触发React组件重新渲染。在构建React应用程序时，尽可能避免使用状态，因为您使用的状态越多，应用程序中要跟踪的数据就越多。

尽量减少使用状态的一种方法是仅在必要时声明它。比如说，如果您从API获取用户数据，将整个用户对象存储在状态中，而不是存储单个属性。

不要这么做：

const [username, setusername] = useState(’’)
const [password, setpassword] = useState(’’)

应该这么做：

const [user, setuser] = useState({})

3.将与同一组件相关的文件存储在一个文件夹中

在决定React应用程序的文件夹结构时，应选择以组件为中心的结构。这意味着将有关一个组件的所有文件存储在一个文件夹中。

比如说，如果您在创建Navbar组件，应创建一个名为Navbar的文件夹，其中含有组件文件、样式表以及组件中使用的其他JavaSript和资产文件。

含有组件所有文件的单个文件夹使用户易于重用、共享和调试。如果您需要查看一个组件如何工作，只需打开一个文件夹。

React文件夹的其他优秀实践如下：

使用索引文件来抽取组件文件的实现细节。拿Navbar例子来说，创建Navbar文件夹，并在该文件夹中添加一个名为index.js（或.ts）文件的组件文件。
将可重用组件保存在一个单独的文件夹中。如果您的组件被应用程序的多个部分使用，请考虑将它们保存在一个名为components的文件夹中。这可以帮助您更容易找到它们。
将实用程序函数保存在一个单独的文件夹中，比如lib或helpers文件夹。这将使以后更容易管理和重用这些函数。

4. 避免使用索引作为键道具

React使用键以独特方式标识数组中的项。使用键，React可以精确地指出哪些项已更改、添加或从数组中删除。

在渲染数组时，可以使用索引作为键。

const Items = () => {
  const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={index}>{elem}</li>;
      })}
    </>
  );
};

虽然这有时切实可行，但使用索引作为键可能会带来问题，当列表预计发生变化时更是如此。考虑这个列表。

const arr = ["item1", "item2", "item3", "item4", "item5"];

目前，第一个列表项“Item1”位于索引0，但如果您在列表开头添加了另一个项，“Item1”索引就会变成1，这将改变数组的行为。

解决办法就是使用唯一值作为索引，以确保列表项的标识得到维护。

5. 尽可能选择片断而不是Divs

React组件需要返回用单个标记包装的代码，这标记通常是<div>或React片段（fragment）。您应该尽可能选择片段。

使用<div>会增加DOM大小，尤其是在大型项目中，因为您拥有的标记或DOM节点越多，网站需要的内存就越多，浏览器加载网站所花的开销就越大。这会导致页面打开速度较慢、用户体验可能很差。

消除不必要的<div>标记的一个例子是在返回单个元素时不使用<div>标记。

const Button = () => {
  return <button>Display</button>;
};

6. 遵循命名约定

在命名组件时，您应该始终使用PascalCase，以便将它们与其他非组件JSX文件区分开来，比如TextField、NavMenu和SuccessButton。

对于在React组件中声明的函数，比如handleInput()或showElement()，应使用camelCase。

7. 避免重复代码

如果您注意到自己在编写重复的代码，将其转换成可重用的组件。

比如说，为导航菜单创建一个组件比在每个需要菜单的组件中重复编写代码更明智。

这就是基于组件的架构具有的优势。您可以将项目分解成能够在整个应用程序中重用的小组件。

8. 为道具使用对象解构

不要传递道具对象，而是使用对象解构来传递道具名称。这样避免了每次需要使用道具对象时都要引用它。

比如说，下面是按原样使用道具的组件。

const Button = (props) => {
  return <button>{props.text}</button>;
};

使用对象解构，您直接引用文本。

const Button = ({text}) => {
  return <button>{text}</button>;
};

9. 使用Map动态渲染数组

使用map()动态渲染重复的HTML块。比如说，您可以使用map()渲染<li>标记中的项列表。

const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];

  return (
    <>
      {arr.map((elem, index) => {
        <li key={elem+index}>{elem}</li>;
      })}
    </>
  );
};

为了进行比较，下面是在没有map()的情况下渲染列表的方法。这种方法非常重复。

const List = () => {
  return (
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  );
};

10. 为每个React组件编写测试

为您创建的组件编写测试，因为这样做就可以减少出错的可能性。测试确保组件的行为符合您的预期。最常用的React测试框架之一是Jest，它提供了可以执行测试的环境。

React是一款功能强大的工具，但您必须遵循某些实践。虽然React在您使用它的方面非常灵活，但遵循特定的实践将帮助您最大限度地改善体验。

在遵循这些技巧时，应牢记您的特定项目和目标，因为不同的React优秀实践可能在不同的环境下更重要。比如说，团队规模小、范围有限的项目可能不需要与多个团队一起工作的大型项目同样级别的文件夹组织管理。

原文标题：10 React Best Practices You Need to Follow In 2023，作者：Mary Gathoni