Created
June 9, 2025 05:54
-
-
Save sunmeat/444e2025745e84679c8d8b53a7de3292 to your computer and use it in GitHub Desktop.
сравнение функционального и классового компонента
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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