正确实践：直接在渲染阶段生成列表

对于那些在组件渲染时就已经可用的数据（例如通过props传递或在组件内部声明的常量），我们完全可以直接在组件的渲染逻辑中生成JSX元素列表，而无需使用useEffect。这种方法更简洁、直观，并且符合React的渲染机制。

import React, { ReactElement } from 'react';
import { useRouter } from 'next/router';

// 假设 navRoutes 是一个包含导航数据的数组或对象
interface NavRoute {
    href: string;
    name: string;
}
const navRoutes: { [key: string]: NavRoute } = {
    home: { href: '/', name: 'Home' },
    about: { href: '/about', name: 'About' }
};

const MenuList = (): ReactElement => {
    const router = useRouter();
    const liElements: ReactElement[] = []; // 声明一个数组来存储 JSX 元素

    // 直接在组件的渲染逻辑中填充 liElements
    for (let elemKey in navRoutes) {
        liElements.push(
            
 {/* 添加 key 属性以优化列表渲染 */}
                
                    {navRoutes[elemKey].name}
                
            
        );
    }

    return (
        

            {liElements.map((elem: ReactElement) => elem)}
        
    );
};

export { MenuList };

在这个修正后的版本中，liElements数组在每次组件渲染时都会被填充。由于列表生成是渲染逻辑的一部分，当navRoutes（如果它是props或state的一部分）发生变化时，组件会重新渲染，从而显示更新后的列表。请注意，在渲染列表时为每个元素添加唯一的key属性是React的最佳实践，有助于优化列表的更新性能。

何时以及如何正确使用useEffect

useEffect钩子是React中处理“副作用”的强大工具。副作用是指那些与组件渲染本身无关的操作，例如数据获取、订阅、手动修改DOM等。当这些操作会影响到组件的UI或行为时，它们通常需要与useState结合使用以触发组件的重新渲染。

以下是useEffect的常见应用场景及其正确用法：

1. 数据获取与状态管理 当组件需要从API或其他异步源获取数据时，useEffect是理想的选择。获取到的数据应该存储在组件的state中，以便数据更新时能触发组件的重新渲染。

   import React, { useState, useEffect, ReactElement } from 'react';
   
   interface User {
       id: number;
       name: string;
   }
   
   const UserProfile = (): ReactElement => {
       const [user, setUser] = useState(null);
       const [loading, setLoading] = useState(true);
       const [error, setError] = useState(null);
   
       useEffect(() => {
           const fetchUser = async () => {
               try {
                   setLoading(true);
                   const response = await fetch('/api/user/1'); // 假设这是一个API请求
                   if (!response.ok) {
                       throw new Error(`HTTP error! status: ${response.status}`);
                   }
                   const data: User = await response.json();
                   setUser(data);
               } catch (err: any) {
                   setError(err.message);
               } finally {
                   setLoading(false);
               }
           };
   
           fetchUser();
       }, []); // 空依赖数组表示只在组件挂载时运行一次
   
       if (loading) return 
   加载中...
   ;
       if (error) return 
   错误: {error}
   ;
       if (!user) return 
   没有用户数据。
   ;
   
       return (
           
               
   {user.name}
               
   ID: {user.id}
           
       );
   };

   在这个例子中，useEffect用于发起网络请求并更新user、loading和error这些状态变量。useState确保了当这些状态变化时，组件能够重新渲染以显示最新的数据或加载/错误信息。

2. DOM操作或订阅/取消订阅useEffect也适用于需要直接操作DOM（例如设置文档标题、集成第三方库）或设置事件监听器/订阅的场景。对于这类副作用，通常需要一个“清理函数”来撤销副作用，以防止内存泄漏。

   import React, { useEffect, useState, ReactElement } from 'react';
   
   const DocumentTitleUpdater = (): ReactElement => {
       const [count, setCount] = useState(0);
   
       useEffect(() => {
           document.title = `你点击了 ${count} 次`; // 副作用：修改文档标题
           console.log('文档标题已更新');
   
           // 返回一个清理函数
           return () => {
               console.log('组件卸载或 count 变化前清理');
               // 可以在这里进行一些清理工作，例如移除事件监听器
           };
       }, [count]); // 依赖数组包含 count，表示当 count 变化时重新运行 effect
   
       return (
           
               
   你点击了 {count} 次
                setCount(count + 1)}>点击我
           
       );
   };

   在这个例子中，useEffect在count变化时更新文档标题。返回的函数会在下一次effect运行前或组件卸载时执行，用于清理上一次effect留下的资源。

注意事项

• 避免在useEffect外部修改组件渲染所需的数据：除非是通过useState更新状态。直接修改局部变量不会触发重新渲染。
• 理解useEffect的执行时机：useEffect在每次渲染（包括初次渲染）之后执行。其执行频率可以通过依赖项数组来控制。