React函数组件的调用方式及区别

React函数组件的调用方式

在 React 中，函数组件可以以两种方式使用：作为 JavaScript 函数调用和作为组件调用（即 JSX 中的标签调用）

函数调用

import React from 'react';

const Child = (props: {name: string}) => {
	return <div>{props.name}</div>
}

const App = () => {
	return Child({
		name: 'Minn';
	})
}

组件调用

import React from 'react';

const Child = (props: {name: string}) => {
	return <div>{props.name}</div>
}

const App = () => {
	return <Child name={'Minn'} />
}

两者的区别

• 处理方式
  • 函数调用：视为简单的普通函数调用，React不会负责处理组件的渲染、生命周期等
  • 组件调用：JSX 中的组件调用，会让 React 负责处理该组件的渲染、更新和生命周期。
• 参数
  • 函数调用：可以传入任意参数
  • 组件调用：通过props传递参数
• 生命周期
  • 函数调用：没有生命周期（如componentDidMount、componentDidUpdate等）
  • 组件调用：可以利用react的生命周期和状态管理
• 返回值
  • 函数调用：可以返回任何值（字符串、数字、对象等）。
  • 组件调用：必须返回一个有效的 JSX 元素或 null。