Javascript 在React中，使用功能组件和只返回React节点的函数之间有什么区别？

我只是想知道这两种处理代码的方法是否相同

对我来说，创建一个常规函数似乎更容易，它返回

React node

。它还可以返回

React节点

的

数组

，在函数调用期间可以很容易地建立这些数组

有理由选择一个而不是另一个吗？看起来钩子也可以用在这两个地方

export function Sandbox () {

    return <>
        <FunctionComponent animalName={'dog'} />
        {renderFunction('dog')}
    </>;
};

function FunctionComponent (props:{animalName:string}) {

    return <div>
        {props.animalName}
    </div>

}

function renderFunction (animalName:string) {

    return <div>
        {animalName}
    </div>

}

导出函数沙盒（）{
返回
{renderFunction（'dog'）}
;
};
函数FunctionComponent（props:{animalName:string}）{
返回
{props.animalName}
}
函数renderFunction（动物名称：字符串）{
返回
{animalName}
}

---

感谢您的提示：）

本质上，函数组件已经只是一个返回

反应节点的函数。
请注意，返回类型
ReactNode
实际上已经允许数组和
string
等

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray;
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

type ReactText=string | number；
类型ReactChild=ReactElement | ReactText；
接口ReactNodeArray扩展数组{}
类型ReactFragment={}| ReactNodeArray；
类型ReactNode=ReactChild | ReactFragment | ReactPortal | boolean | null |未定义；

将其作为函数组件编写的主要优点是能够使用JSX语法调用函数。您还可以使用嵌套JSX在函数上自动设置
子类
属性

您不需要使用JSX。在您的示例中，可以调用
FunctionComponent（{animalName:'dog'}）
（注意：您不能对类组件执行此操作）。在这种情况下，它与
renderFunction（'dog'）
之间的主要区别在于，一方将其所有参数放入一个单独的props对象中，另一方则没有。
首先，为了组织代码，很可能会选择组件而不是函数。另外，如果您需要一个函数来包含它自己的状态，例如模态等，那么使用组件而不是常规函数是一个主要的好处。我相信可伸缩性是我将外包到组件而不是功能中的另一个原因。我觉得在一个页面中有一堆不同的函数会变得相当混乱，过一段时间后很难维护。因此，不能在违反hooksWell规则的嵌套函数中调用hook，也不必有一堆函数（它们可以很好地分支），这些函数也可以用大写字母作为第一个名称，甚至IDE可以用不同的颜色专门标记这些返回节点的函数，这可能没有必要。我理解一些感受，尽管我希望有一个技术上可证实的证据。不过还是谢谢你的回复。O:-）我想知道React是否最终编译了相同的函数。钩子是JavaScript函数，但它们附加了两个规则：只在顶层调用钩子。不要在循环、条件或嵌套函数中调用钩子。仅限React函数组件的调用挂钩。感谢您的回答，我将等待一段时间，但如果没有其他答案，我会将您的标记为正确。O:-）