<Component />和Component()之间有什么区别？

Question

我最近开始使用JSX元素语法，而不是调用函数，因为它使代码更漂亮。但看起来不一样了。因为在App.js，函数调用会导致无限循环(并抛出错误)，但是JSX元素可以工作。在Dashboard.js中，函数调用工作得很好，JSX元素会导致无限循环(但不会抛出错误)：

//App.js
import React, { useEffect, useState, memo } from "react";
import { connect } from "react-redux";
import { getUser } from "../firebase/user";
import Dashboard from "./Dashboard";
import SignIn from "./SignIn";
import "../styles/Global.scss";
import "../styles/App.scss";

const AppComponent = ({ userId, getUser }) => {

    useEffect(() => { getUser() }, []);

    const [ content, setContent ] = useState("");

    const Content = () => {
        if (userId === undefined) {
            return null;
        }
        if (userId) {
            setContent("dashboard");

            return <Dashboard />;
        } else {
            setContent("sign-in");

            return <SignIn />;
        }
    };
    return (
        <div className={`content-wrapper ${content}`}>
            <Content /> //works fine
            {Content()} //throws error
        </div>
    )
};

const App = memo(AppComponent);

const mapStateToProps = ({
    user: { userId }
}) => ({
    userId
});

const mapDispatchToProps = {
    getUser
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

//Dashboard.js

import React, { useEffect, memo } from "react";
import { connect } from "react-redux";
import { getUserData } from "../firebase/user";
import { selectProject } from "../actions/projects";
import { getItem } from "../tools/LocalStorage";
import { getProjectDetails } from "../firebase/projects";
import { selectPages } from "../actions/pages";
import { getPagesDetails } from "../firebase/pages";
import Pages from "./Pages";
import Projects from "./Projects";
import Artboard from "./Artboard";

import "../styles/Dashboard.scss";

const cachedProject = JSON.parse(getItem("selectedProject"));
const cachedPages = JSON.parse(getItem("selectedPages"));

const DashboardComponent = ({
    userId,
    clientId,

    getUserData,

    selectedProject = cachedProject,
    selectedPages = cachedPages,
    pagesWithDetails,

    selectProject,
    selectPages,

    getProjectDetails,
    getPagesDetails
}) => {

    useEffect(() => {
        getUserData(userId);

        cachedProject && selectProject(cachedProject);
        cachedPages && selectPages(cachedPages);
    }, []);


    useEffect(() => {
        if (selectedProject && clientId) {
            getProjectDetails(
                clientId,
                selectedProject
            );
        }
    }, [selectedProject, clientId]);


    useEffect(() => {
        if (selectedPages && selectedProject && clientId) {

            const withoutDetails = selectedPages.filter(pageId => (
                !pagesWithDetails.includes(pageId)
            ));

            getPagesDetails(
                selectedProject,
                withoutDetails
            );
        }
    }, [selectedPages, selectedProject, clientId]);


    const Content = () => {
        if (!clientId) return null;

        if (!selectedProject) {
            return <Projects />;
        }

        if (!selectedPages) {
            return <Pages />;
        }

        return <Artboard />;
    };

    return Content(); //worked good
    return <Content /> //caused infinite loop
};

const Dashboard = memo(DashboardComponent);

const mapStateToProps = ({
    user: {
        userId,
        clientId
    },
    projects: {
        selectedProject
    },
    pages: {
        selectedPages,
        pagesDetails
    }
}) => ({
    userId,
    clientId,

    selectedProject,
    selectedPages,

    pagesWithDetails: Object.keys(pagesDetails)
});

const mapDispatchToProps = {
    getUserData,

    selectProject,
    selectPages,

    getPagesDetails,
    getProjectDetails
};

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard);

我认为包装器组件也是一个用memo()包装的函数，这是一个重要的信息，但我仍然不明白为什么会发生上述情况。这两个语法背后的工作原理是什么，为什么它们是不同的？

Answer 1

call.

输入

Content();
<Content />;

输出

Content();
React.createElement(Content, null);