react如何创建组件
创建React组件的几种方法
React提供了多种创建组件的方式，以下是常见的几种方法：
函数组件
函数组件是最简单的React组件形式，适用于无状态的展示型组件。使用ES6箭头函数或普通函数定义：
const MyComponent = (props) => {
return <div>Hello, {props.name}</div>;
};或
function MyComponent(props) {
return <div>Hello, {props.name}</div>;
}类组件
类组件是传统的React组件形式，适用于需要状态管理和生命周期方法的场景：
class MyComponent extends React.Component {
render() {
return <div>Hello, {this.props.name}</div>;
}
}使用Hooks的函数组件
React 16.8引入的Hooks允许函数组件拥有状态和生命周期特性：
import { useState, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
};高阶组件(HOC)
高阶组件是接收组件并返回新组件的函数，用于组件逻辑复用：
const withLogging = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component is mounted');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};组件组合
通过组合简单组件构建复杂UI：
const Button = (props) => {
return <button className="btn">{props.children}</button>;
};
const App = () => {
return (
<div>
<Button>Click Me</Button>
</div>
);
};使用React.memo优化性能
对于函数组件，可以使用React.memo进行性能优化：
const MemoizedComponent = React.memo(function MyComponent(props) {
/* 仅当props改变时重新渲染 */
return <div>{props.value}</div>;
});组件最佳实践
- 组件命名使用PascalCase
- 保持组件小而专注，遵循单一职责原则
- 合理划分容器组件和展示组件
- 使用PropTypes或TypeScript进行props类型检查
- 为组件添加必要的错误边界处理
