Hooks
Коли ми викликаємо setState(), React обʼєдгає новий стан із поточним.
state = {
firstname: '',
lastname: '',
}
...
this.setState({ lastname: 'Petia' })
Для будь-яких змінюваних даних у React-додатку має бути одне "джерело істини".
Тобто, якщо декілька компонентів повинні відображати одні й ті самі змінювані дані, у такому випадку піднімаємо спільний стан до найближчого спільного батьківського компонента.
class App extends Component {
state = { firstName: '', lastName: '' };
onChange = (e) => { ... };
render() {
const { firstName, lastName } = this.state;
return (
<Fragment>
<Form firstName={firstName} lastName={lastName} onChange={this.onChange} />
<Greeting firstName={firstName} lastName={lastName} />
</Fragment>
)
}
}
Хуки — дозволяють використовувати стан та інші можливості React без написання класів (у функціональних компонентах).
componentDidMount, componentDidUpdate та componentWillUnmount
Надає нашому функціональному компоненту внутрішній стан. React зберігатиме цей стан між рендерами.
const [state, setState] = useState(initialState);
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Ви клікнули {count} разів</p>
<button onClick={() => setCount(count + 1)}>Тисни</button>
</div>
);
}
Хук useEffect являє собою сукупність методів. componentDidMount,
componentDidUpdate та componentWillUnmount.
useEffect(callback) - запускати завждиuseEffect(callback, []) - запускати лише при mount і unmount (тобто ефект не залежить
ні від жодного параметра, а якщо не залежить, то його не потрібно перезапускати).
useEffect(callback, [arg1, ...]) - запускати цей ефект, якщо змінився хочаб якийсь параметри в масиві
(тобто із замикання він бере поточні, а з масиву попередні та порівнює).
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `click: ${count}`;
})
return (
<button onClick={() => setCount(count + 1)}>Click</button>
);
};
Переробити всі завдання із минулого заняття на Хуки.