译者 | 布加迪

审校 | 孙淑娟​

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 (
        

          
 Fetching data.... 
{" "}
        

      );

    return (
      <>
        
 Fetch data using Class component 
{" "}
        {data.map((item) => (
          
{item.title}

        ))}
      
    );
  }
}

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

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 (
    <>
      
 Fetch data using Class component 
{" "}
      {data.map((item) => (
        
{item.title}

      ))}
    
  );
};

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

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) => {
        
{elem}
;
      })}
    
  );
};

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

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

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

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

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

React组件需要返回用单个标记包装的代码，这标记通常是

const Button = () => {
  return Display;
};

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

const Button = ({text}) => {
  return {text};
};

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

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

const List = () => {
  return (
    

      
Item1

      
Item2

      
Item3

      
Item4

      
Item5

    

  );
};