Skip to content

Instantly share code, notes, and snippets.

@sunmeat
Created June 9, 2025 05:54
Show Gist options
  • Save sunmeat/444e2025745e84679c8d8b53a7de3292 to your computer and use it in GitHub Desktop.
Save sunmeat/444e2025745e84679c8d8b53a7de3292 to your computer and use it in GitHub Desktop.
сравнение функционального и классового компонента
App.jsx:
import React, {useState} from 'react';
import './App.css';
const FunctionalButton = ({width, height, color, text}) => {
const [clickCount, setClickCount] = useState(0);
const handleClick = () => {
setClickCount(clickCount + 1);
};
return (
<div className="button-container">
<button
className="custom-button"
style={{width, height, background: `linear-gradient(135deg, ${color}, ${color}CC)`}}
onClick={handleClick}
>
{text}
</button>
<p className="click-text">Функциональный компонент: {clickCount}</p>
</div>
);
};
// классовый компонент
class ClassButton extends React.Component {
constructor(props) {
super(props);
this.state = {
clickCount: 0,
};
}
handleClick = () => {
this.setState({clickCount: this.state.clickCount + 1});
};
render() {
const {width, height, color, text} = this.props;
return (
<div className="button-container">
<button
className="custom-button"
style={{width, height, background: `linear-gradient(135deg, ${color}, ${color}CC)`}}
onClick={this.handleClick}
>
{text}
</button>
<p className="click-text">Классовый компонент: {this.state.clickCount}</p>
</div>
);
}
}
const App = () => {
return (
<div className="app-container">
<FunctionalButton
width="200px"
height="50px"
color="#4CAF50"
text="Функциональная кнопка"
/>
<ClassButton
width="200px"
height="50px"
color="#2196F3"
text="Классовая кнопка"
/>
</div>
);
};
export default App;
==========================================================================================
App.css (index.css должен быть пустым):
.app-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(to bottom, #e0e7ff, #f7f7f7);
font-family: 'Arial', sans-serif;
}
.app-heading {
font-size: 28px;
font-weight: 700;
color: #333;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.button-container {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.custom-button {
color: white;
font-size: 16px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.custom-button:hover {
transform: translateY(-2px);
box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.custom-button:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.custom-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: 0.5s;
}
.custom-button:hover::before {
left: 100%;
}
.click-text {
margin-top: 10px;
font-size: 14px;
color: #555;
font-weight: 500;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment