1. Function Components: Function components are the simplest way to define a component in React. It is a JavaScript function that accepts props as an argument and returns a React element.
Example:
const MyComponent = (props) => {
return (
Hello {props.name}!
);
};
2. Class Components: Class components are JavaScript classes that extend the base React Component class. They provide more features and capabilities than function components, such as state and lifecycle methods.
Example:
class MyComponent extends React.Component {
render() {
return (
Hello {this.props.name}!
);
}
}
3. Pure Components: Pure components are components that extend the base React.PureComponent class. They are similar to class components in that they can have state and lifecycle methods, but they are optimized for performance by implementing shouldComponentUpdate() with a shallow prop and state comparison.
Example:
class MyComponent extends React.PureComponent {
render() {
return (
Hello {this.props.name}!
);
}
}
4. Stateless Functional Components: Stateless functional components are similar to function components in that they are JavaScript functions that accept props as an argument and return a React element. The difference is that they do not have state or lifecycle methods.
Example:
const MyComponent = (props) => {
return (
Hello {props.name}!
);
};