Сделали колбэк с кнопками и именами
This commit is contained in:
+13
-8
@@ -1,21 +1,26 @@
|
||||
import styles from './styles/App.module.scss'
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState, useCallback } from 'react'
|
||||
|
||||
function Parent() {
|
||||
const [count,setCount] = useState(0);
|
||||
//const handleCallback = () => setCount(count + 1)
|
||||
const increment = React.useCallback(() => setCount(count + 1));
|
||||
const names = ['Alex','Bob','Deniel'];
|
||||
const handleNameClick = useCallback( name => {
|
||||
alert(`Вы нажали на ${name}`);
|
||||
},[]);
|
||||
return (
|
||||
<>
|
||||
<div>{count}</div>
|
||||
<Child onClick={increment} />
|
||||
<h2>Проверка React.useCallback</h2>
|
||||
{names.map(name => (
|
||||
<Child key={name} name={name} onClick={handleNameClick} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const Child = React.memo(({ onClick }) => {
|
||||
const Child = React.memo(({ name, onClick }) => {
|
||||
console.log('child rendered');
|
||||
return <button onClick={onClick}>Нажми меня</button>
|
||||
const handleClick = useCallback(()=>onClick(name),[name, onClick]);
|
||||
|
||||
return <button onClick={handleClick}>{name}</button>
|
||||
})
|
||||
|
||||
function App() {
|
||||
|
||||
Reference in New Issue
Block a user