react组件如何定义
定义React组件的方式
React组件可以通过函数组件和类组件两种方式定义。以下是具体实现方法：
函数组件（Functional Component）
函数组件是使用JavaScript函数定义的组件，适用于无状态或使用Hooks的场景。语法简洁，推荐在React 16.8+版本中使用。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}或使用箭头函数：
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
};类组件（Class Component）
类组件通过继承React.Component实现，适用于需要状态管理或生命周期方法的场景。
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}组件命名的注意事项
- 首字母必须大写：React通过首字母区分组件和原生DOM标签（如
<div>）。 - 避免动态生成组件名：组件名应在代码中显式声明，动态名称可能导致渲染问题。
组件属性的传递（Props）
属性通过props对象传递，函数组件通过参数接收，类组件通过this.props访问。
// 函数组件
const Button = (props) => {
return <button onClick={props.onClick}>{props.label}</button>;
};
// 类组件
class Button extends React.Component {
render() {
return <button onClick={this.props.onClick}>{this.props.label}</button>;
}
}使用ES6模块导出组件
组件通常单独文件定义并通过export导出：
// Welcome.js
import React from 'react';
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
export default Welcome; // 默认导出组件组合
组件可以嵌套使用，形成父子关系：
function App() {
return (
<div>
<Welcome name="Alice" />
<Welcome name="Bob" />
</div>
);
}现代实践建议
- 优先使用函数组件：配合Hooks（如
useState、useEffect）可覆盖绝大多数场景。 - 类组件保留场景：需要错误边界（
componentDidCatch）或尚未迁移的旧代码。
