Reactjs 什么是React组件-无效的挂钩调用

考虑以下几点：

function Welcome(props) {
  return <h1>Hello World</h1>;
}

ReactDOM.render(<Welcome />, document.getElementById('root'));
// React.createElement(Welcome, null)

现在我不是建议您这样做，但是我已经见过很多次以这种方式调用组件，例如

<div>
  {SomeComponentOrJSX()}
</div>

如果您直接调用该函数，它将不起作用

// Does not work
ReactDOM.render(Counter(), document.getElementById('root'));

它提供的错误是臭名昭著的

  Invalid hook call. Hooks can only be called inside of the body of a function component.

为什么会这样

这里最简单的答案是不要这样做。同意。然而，我想深入探讨一下为什么在这种情况下这种方法会失败

---

我过去认为React组件只是函数定义，但现在我不太确定了。根据这一点，React组件对我来说不仅是定义，而且是使用

React.createElement（）

创建元素，如

转换为

React.createElement（Hello，null）

和

React.createElement

依次返回一个神奇的对象，React知道如何管理（因此，任何

React.createElement

调用我们都可以配音“组件边界”）

---

React严格跟踪组件边界（记住，钩子规则只在组件边界内起作用）。钩子（比如类组件的生命周期方法！）是React渲染阶段出现的魔法；如果您直接调用

Hello（）

，您正在颠覆组件的生命周期，因此，钩子丢失的魔力就消失了，事情也就破裂了。（对于类组件，您可以执行

（新建类组件（someProps））.render（）

来执行相同的操作。）

组件“是什么”是一个很好的问题。强烈建议阅读：有组件、元素和实例。react组件是返回react元素的函数或类。您可以从函数返回jsx（元素），但除非您通过CreateElement将它们垂直放置，否则它们不会被制作成实例。这看起来正是我要寻找的。我会阅读并报告的！深入您的上一条语句，即使我不使用JSX，示例仍然失败——这很有意义，我仍然只是返回元素。你是说一个组件在传递给

React.createElement（）

之前不会成为一个实例吗？嗯，我想我说createElement使它成为一个实例是不正确的。从文章中可以看出，功能组件没有实例。在本例中，createElement似乎告诉钩子它们处于正确的上下文中。消息来源说这是因为没有“调度器”，但我不知道createElement使钩子工作的“原因”组件边界是什么意思？另外，你的“神奇”挥手对帮助我理解也没有太大帮助：/对不起！编辑答案，尝试更近一点解释组件边界--

有3个组件（一个Foo，两个条）<代码>{Bar（）}{Bar（）}只有一个组件（Foo）。你有关于“组件边界”的资源吗？我以前从未听说过这个术语。我想我理解你的意思，因为函数组件没有传递给React.createElement，所以没有创建边界，但是我从哪里可以了解到更多关于边界的信息，而不仅仅是它的魔力呢？我想我借用了React error bounders（）中的术语“boundary”，但我基本上是指任何被分隔的东西（树型）通过JSX标记。

// Works
ReactDOM.render(<Counter />, document.getElementById('root'));

// Does not work
ReactDOM.render(Counter(), document.getElementById('root'));

  Invalid hook call. Hooks can only be called inside of the body of a function component.