Сделали хуки и калбэки
This commit is contained in:
+15
-37
@@ -1,49 +1,27 @@
|
|||||||
import styles from './styles/App.module.scss'
|
import styles from './styles/App.module.scss'
|
||||||
import React from 'react'
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
function Person({ name, age }) {
|
function Parent() {
|
||||||
|
const [count,setCount] = useState(0);
|
||||||
|
//const handleCallback = () => setCount(count + 1)
|
||||||
|
const increment = React.useCallback(() => setCount(count + 1));
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<>
|
||||||
<p>Имя: {name}</p>
|
<div>{count}</div>
|
||||||
<p>Возраст: {age}</p>
|
<Child onClick={increment} />
|
||||||
</div>
|
</>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function ProductCard({title, price, background}) {
|
const Child = React.memo(({ onClick }) => {
|
||||||
return (
|
console.log('child rendered');
|
||||||
<div style={{
|
return <button onClick={onClick}>Нажми меня</button>
|
||||||
backgroundColor: background,
|
})
|
||||||
border: '1px solid gray',
|
|
||||||
padding: '10px',
|
|
||||||
borderRadius: '10px',
|
|
||||||
width: '250px',
|
|
||||||
marginTop: '15px',
|
|
||||||
}}>
|
|
||||||
<h3>{title}</h3>
|
|
||||||
<p>Цена: {price}</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [price1, setPrice1] = React.useState(1000);
|
|
||||||
const [bgColor2, setBgColor2] = React.useState('#ffe6e6');
|
|
||||||
|
|
||||||
const changePrice1 = () => setPrice1(cur => cur + 100);
|
|
||||||
const changeBgColor2 = () => {
|
|
||||||
const colors = ['#ffe6e6','#00e6e6','#ffefe6','#00f6f6'];
|
|
||||||
const random = colors[Math.floor(Math.random() * colors.length)];
|
|
||||||
setBgColor2(random);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h2>Практика Props</h2>
|
<Parent />
|
||||||
<button onClick={changePrice1}>Изменить цену товара 1</button>
|
|
||||||
<button onClick={changeBgColor2}>Изменить цвет товара 2</button>
|
|
||||||
<ProductCard title="Товар 1" price={price1} background="#ffffff" />
|
|
||||||
<ProductCard title="Товар 2" price={500} background={bgColor2} />
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user