像专业人士那样反应：掌握 2024 年的顶尖实践

React，无可争议的 web UI 开发王者，让你能够构建动态且以用户为中心的界面。但随之而来的责任是编写干净、易于维护和高性能的代码。

这篇博客文章将为你提供2024年的React最佳实践，确保你的应用程序高效、可扩展，并且让你在使用中感到愉快。让我们开始吧！出发！

• 解决文件夹混乱问题： 保持一个井井有条的项目结构非常重要。为组件（src/components）、样式（src/styles）和资产（src/assets）分别设定特定文件夹。这种结构可以提高代码库的导航性，尤其是在大型项目中，对于你和你的团队来说尤为重要。
• 可重用性的信仰： 努力开发可重用的组件。这可以避免代码重复并提高代码的可维护性。这里有一个可重用的 Button 组件示例，

    // src/components/按钮.jsx  
    import React from 'react';  
    const Button = ({ children, onClick, variant = 'primary' }) => (  
      <button className={`btn btn-${variant}`} onClick={onClick}>  
        {children}  
      </button>  
    );  

    export default Button;

此组件接受内容、点击处理程序和按钮变体这三种props，使其高度可重复使用于您的应用程序中。

• 功能优先的方法： 大部分情况下，优先使用函数组件而不是类组件。函数组件通常更容易理解和利用 React 钩子（Hook）。钩子允许你在函数组件内部管理状态和副作用，保持代码清晰简洁。
• 使用不可变状态更新更好: 在更新组件状态时，最好创建一个新的状态对象，而不是直接修改现有的对象。React 可以高效地识别变化并优化重新渲染过程。下面是一个例子：

    // src/components/Counter.jsx  
    import React, { useState } from 'react';  
    const Counter = () => {  
    const [count, setCount] = useState(0);  
    const handleClick = () => setCount(count + 1);  

    return (  
        <div>  
          <p>计数器: {count}</p>  
          <button onClick={handleClick}>点击增加</button>  
        </div>  
      );  
    };  
    export default Counter;

• 记忆化技巧： 利用记忆化技术（如使用 React.memo）来避免组件不必要的重新渲染。这对于那些性能关键的组件或依赖于很少改变的属性的组件尤为重要。这里有一个示例：

    // src/components/ExpensiveComponent.jsx  
    import React, { memo } from 'react';const ExpensiveComponent = ({ data }) => {  
      // 在这里使用 data 进行昂贵的计算  
      console.log('组件重新渲染了！');  
      return (  
        <div>  
          {/* Display processed data */}  
        </div>  
      );  
    };  

    export default memo(ExpensiveComponent);

通过使用 memo 包裹组件，这样可以防止在 data props 变化时不必要的重新渲染。

React Hooks 提供了一种管理函数式组件内部状态的强大方式，但是自定义 Hooks 更进一步。这些可重用的 Hooks 封装了可以在多个组件中复用的状态逻辑，促进了代码重用和更佳的代码组织。

这里有一个获取数据的自定义挂钩的例子：

    // src/hooks/useFetchData.js  
    import { useState, useEffect } from 'react';  

    const useFetchData = (url) => {  
      const [data, setData] = useState(null);  
      const [loading, setLoading] = useState(false);  
      const [error, setError] = useState(null);  

      useEffect(() => {  
        const fetchData = async () => {  
          setLoading(true);  
          try {  
            const response = await fetch(url);  
            const fetchedData = await response.json();  
            setData(fetchedData);  
          } catch (error) {  
            setError(error);  
          } finally {  
            setLoading(false);  
          }  
        };  

        fetchData();  
      }, [url]);  

      return { data, loading, error };  
    };  

    export default useFetchData;

这个钩子用于从API抓取数据，处理加载状态以及可能出现的错误。它可以在需要从相同API端点抓取数据的各个组件中重复使用。

• 错误处理和日志记录： 实现适当的错误处理和日志记录，以便捕获和解决React应用程序中的问题。这使调试和识别问题变得更加容易。可以考虑使用sentry等库来进行全面的错误跟踪。
• 测试，测试，1，2，3！
  编写单元测试，确保它们在不同条件下按预期运行。可以考虑使用React Testing Library等测试库来实现简洁的测试实践。
• 为所有用户提供可访问性：
  构建所有人都能使用的应用程序，确保它符合可访问性指南（WCAG）并使用正确的语义HTML。
• 紧跟React的发展步伐：
  React的世界发展迅速！随着库的发展，保持对最新功能和最佳实践的了解。可以通过官方React博客和社区论坛等资源来保持信息更新。

遵循这些最佳实践，您将能够更好地打造出出色的React应用，这些应用不仅性能卓越，而且可扩展，开发和维护起来都很愉快。记住，一个结构合理且优化的代码库是一项长期投资，长期来看收益丰厚！

找我了解更多

Mohamed Tawfik (@mo_tawfik89)