时间戳

首页 > 解决方案 > ReactDOM.render 的第一个参数是什么？

javascript - ReactDOM.render 的第一个参数是什么？

问题描述

我最近正在自学 React，但我发现一个令人困惑的用法ReactDOM.render

function UniversityList(){
    return React.createElement(
        "ul",
        {id: "universities"}, 
        React.createElement("li", 
                            {id: "Waterloo", 
                             className: "University"}, 
                            "University of Waterloo"),
        React.createElement("li",
                            {id: "Laurier",
                             className: "University"},
                            "Laurier University"
                           ));
};

ReactDOM.render(React.createElement(UniversityList, null, null),
                document.getElementById("root"));

在上面的代码中，为什么我们将UniversityList函数字符串作为第一个参数传递给React.createElement(UniversityList, null, null).

  1. 我们不是总是把我们想要的html标签的类型作为第一个参数传递吗？（我刚开始学习组件，但我仍然不明白）
  2. 上面的代码中没有调用函数UniversityList的地方。具有类型的 React 元素如何"ul"返回UniversityList？
  3. 函数UniversityList没有被调用，但是ReactDOM.render页面是怎么渲染成功的呢？React.createElement(UniversityList, null, null)返回一个 React 对象，如：
{
    $$typeof: Symbol(react.element)
    key: null
    props: { children: null }
    __proto__: Object
    ref: null
    type: UniversityList()
    _owner: null
    _store: {validated: false}
}

我想在这个 React 对象中呈现的列表项在哪里？

标签： javascriptreactjs

解决方案

我认为好好阅读 react 文档会帮助你理解很多。

React.createElement

React.createElement(
  type,
  [props],
  [...children]
)

创建并返回React element给定类型的新的。type 参数可以是标签名称字符串（例如'div'或'span'）、 React component类型（类或函数）或React fragment 类型。

问题 1

我们不是总是把我们想要的html标签的类型作为第一个参数传递吗？（我刚开始学习组件，但我仍然不明白）

您可以指定 html 元素或其他反应组件。

问题2

上面的代码中没有调用函数UniversityList的地方。具有类型的 React 元素如何"ul"返回 UniversityList？

这在 React 中很典型，您不直接调用函数，而是将它们传递给 React 框架以呈现和处理所有组件生命周期函数，例如挂载、更新和卸载。

例如，一个功能组件可以这样写：

const MyComponent = ({ count }) => <div>{count}</div>;

但是您永远不会真正调用函数 like MyComponent({ count: 3 })，而是在 JSX 中将其编写为<MyComponent count={3} />.

第二个文本块对此进行了一些解释：

编写的代码JSX将转换为使用React.createElement(). React.createElement()如果您使用 JSX，通常不会直接调用。请参阅React Without JSX以了解更多信息。

问题 3

函数 UniversityList 没有被调用，但是 ReactDOM.render 是如何成功渲染页面的呢？

与问题 2 相同的原因，组件被传递给 React 框架来处理它的渲染和生命周期。React.createElement(UniversityList, null, null)创建一个新的元素/组件 ,UniversityList以渲染到 DOM 中，并传递 noprops或children. 如果您查看函数定义，它将作为道具UniversityList传递并创建两个元素作为子元素。{id: "universities"}li

推荐阅读