React组件中动态渲染HTML列表的常见陷阱与useEffect使用指南

本文探讨了在next.js/react组件中动态渲染html元素时，因误用useeffect导致的常见渲染问题。我们分析了将列表生成逻辑置于useeffect内的错误原因，并提供了直接在渲染阶段生成列表的正确方法。此外，文章详细阐述了useeffect的正确应用场景，强调其作为处理副作用的钩子，并通常需要与usestate结合使用以实现组件的响应式更新。

React组件中动态渲染HTML列表的常见陷阱与useEffect使用指南

在React或Next.js开发中，我们经常需要根据数据动态生成HTML元素列表。一个常见的误解是将这种列表生成逻辑放置在useEffect钩子内部，这可能导致列表无法按预期渲染。本文将深入探讨这一问题，并提供正确的解决方案及useEffect的详细使用指南。

动态列表渲染的常见误区

许多开发者在尝试动态构建一个HTML元素数组并渲染时，可能会倾向于将构建逻辑放入useEffect中，期望在组件加载后执行。考虑以下示例代码：

import React, { useEffect, 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: any[] = []; // 声明一个数组来存储 JSX 元素

    useEffect(() => {
        // 尝试在 useEffect 中填充 liElements
        for (let elemKey in navRoutes) {
            const htmlElement = (
                <li>
                    <a href={navRoutes[elemKey].href}>
                        {navRoutes[elemKey].name}
                    </a>
                </li>
            );
            liElements.push(htmlElement);
        }
        console.log(liElements, 'dups in useEffect'); // 在这里可能看到元素被添加
    }, []); // 空依赖数组表示只运行一次

    console.log(liElements, 'dups outside useEffect'); // 在这里可能看到数组为空或不完整

    return (
        <ul className={''}>
            {liElements.map((elem: any) => elem)}
        </ul>
    );
};

export { MenuList };

上述代码的问题在于，useEffect钩子在组件的初次渲染之后才执行。当MenuList组件首次渲染时，liElements数组是空的。return语句中的liElements.map会在一个空数组上执行，因此页面上不会渲染任何<li>元素。即使useEffect随后执行并填充了liElements，直接修改一个在组件函数作用域内声明的普通变量并不会触发组件的重新渲染。React组件只有在其state或props发生变化时才会重新渲染。

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

对于那些在组件渲染时就已经可用的数据（例如通过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(
            <li key={elemKey}> {/* 添加 key 属性以优化列表渲染 */}
                <a href={navRoutes[elemKey].href}>
                    {navRoutes[elemKey].name}
                </a>
            </li>
        );
    }

    return (
        <ul className={''}>
            {liElements.map((elem: ReactElement) => elem)}
        </ul>
    );
};

export { MenuList };

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

先见AI

数据为基，先见未见

95

查看详情

何时以及如何正确使用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<User | null>(null);
       const [loading, setLoading] = useState<boolean>(true);
       const [error, setError] = useState<string | null>(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 <p>加载中...</p>;
       if (error) return <p>错误: {error}</p>;
       if (!user) return <p>没有用户数据。</p>;
   
       return (
           <div>
               <h1>{user.name}</h1>
               <p>ID: {user.id}</p>
           </div>
       );
   };

   登录后复制

   在这个例子中，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 (
           <div>
               <p>你点击了 {count} 次</p>
               <button onClick={() => setCount(count + 1)}>点击我</button>
           </div>
       );
   };

   登录后复制

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

注意事项

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

以上就是React组件中动态渲染HTML列表的常见陷阱与useEffect使用指南的详细内容，更多请关注php中文网其它相关文章！