React自定义Hook调用报错：能否混用类与函数组件？报错原因解析

Hey there! Let's tackle your two questions clearly:

Absolutely! Mixing class and function components is totally normal in React development, especially in scenarios like:

• Legacy project updates: If you're working on an older codebase built with class components, you can gradually introduce function components with Hooks for new features without rewriting everything at once.
• Team familiarity: Some team members might be more comfortable with class components, while others prefer the newer function component + Hooks pattern. React fully supports both approaches side by side.

That said, the React team now recommends function components with Hooks as the primary approach for new code, since they offer a more concise and flexible way to handle state and side effects. But class components haven't been deprecated and are still valid to use—so don't worry about mixing them when it makes sense for your project.

The root cause is how you're rendering the CreateJalon component in your class-based App component. Let's break down the issue in your code:

In the form() function inside App's render() method, you're doing:

return CreateJalon()

This is a mistake! When you call a function component like a regular JavaScript function, React doesn't treat it as a proper component. Instead, it executes the function's code directly in the context of the class component's render method. Since CreateJalon uses the useJalonForm Hook, this means the Hook is being called outside the body of a function component—violating one of the core Hook rules.

The fix is simple: #

Render the component using JSX syntax instead of calling it as a function:

const form = () => {
  if (!jalons.length) {
    return <CreateJalon /> // Use JSX here instead of direct function call
  }
  return null
}

When you use <CreateJalon />, React properly initializes the function component, sets up its context, and ensures that Hooks are called in the correct environment (the top-level body of the function component). This will resolve the "Invalid hook call" error immediately.

Just to recap the key Hook rule you hit here: Hooks can only be called at the top level of a function component or another custom Hook. Directly invoking a function component as a regular function breaks this rule because the Hooks end up running inside a class component's render cycle instead of their own function component context.

内容的提问来源于stack exchange，提问作者Jean-Luc Aubert