时间戳

首页 > 解决方案 > 在其他组件中或在单独的文件中创建反应功能组件

reactjs - 在其他组件中或在单独的文件中创建反应功能组件

问题描述

有人可以向我解释为什么我在代码库中找到这种模式。

import React, { useState, useEffect } from "react";

const ParentFC= props => {
    
    const renderChild = (childInfo) => {
        // some component created here 
        return <></>
    };


    return (
        <div>
            <ul>
                {props.childinfos.map(renderChild)}
            </ul>
        </div>
    );
};

export default ParentFC;

对我来说，这似乎非常低效，因为它会在每次重新渲染时重新创建函数，但是代码库经常使用这种模式。有人可以确认这是低效的，还是有理由在这样的功能组件中创建功能组件，而不是在单独的文件中。

标签： reactjs

解决方案

这确实看起来效率低下，但为了便于阅读，它也可能有一些优势。有时子组件可能包含一些条件代码，这些条件代码不是基于 props，而是基于一些父 props 或变量（尽管在我看来，依赖变量应该始终作为 props 传递给组件）。在大多数情况下，这很可能是由于子组件的尺寸较小。如果子组件只包含一两行用于渲染的代码，则将其放入完全独立的文件中可能会过分。

在每次渲染中重新定义组件的低效率可以通过使用 React Hooks 等轻松缓解React.useMemo，以防止每次父级重新渲染时重新定义它。

推荐阅读