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

Content() is a regular function invokation, but <Content /> is a React.createElement call.

输入

Content();
<Content />;

输出

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

<component>和Component（）有什么区别？

1 个答案: