react如何定义函数
定义函数组件
在React中，函数组件是通过JavaScript函数定义的，接收props作为参数并返回React元素。以下是基本语法：
function MyComponent(props) {
return <div>Hello, {props.name}</div>;
}或使用箭头函数：
const MyComponent = (props) => {
return <div>Hello, {props.name}</div>;
};使用Hooks扩展功能
函数组件可以通过Hooks（如useState、useEffect）管理状态和副作用。例如：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}默认Props与PropTypes
可以为函数组件定义默认Props和类型检查（需安装prop-types）：
import PropTypes from 'prop-types';
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}
Greeting.defaultProps = {
name: 'Guest'
};
Greeting.propTypes = {
name: PropTypes.string
};导出函数组件
通常将组件导出以便在其他文件中使用：
export default function MyComponent() {
return <div>Exported Component</div>;
}或具名导出：
export function MyComponent() {
return <div>Named Export</div>;
}注意事项
- 函数名称必须以大写字母开头，以区分React组件和普通HTML标签。
- 避免在函数组件内部直接修改
props，遵循不可变原则。 - 使用Hooks时，确保在组件顶层调用，不能在条件或循环中嵌套。
