|
1 | 1 | # React |
2 | 2 |
|
3 | | -* Что такое React? |
4 | | -* Что такое React Element? Как его можно создать? Из чего он состоит? |
5 | | - * Что будет, если передать булевые, `null` или `undefined` значения в children? |
6 | | -* Что такое React Component? |
7 | | - * Что делают конструкторы в родительских классах реакт компонент? Когда надо вызывать `super`, а когда нет? |
8 | | -* Что такое JSX и зачем он нужен? |
9 | | - * Почему атрибуты в JSX пишутся, используя camelCase (например, `tabIndex`, а не `tabindex`)? Почему `className`, а не `class`? |
10 | | - * Почему название компоненты, которая используется в JSX, нужно писать с большой буквы? |
11 | | - * В чём проблема следующего кода `<p>{items.length && <El items={items} />}</p>`? |
12 | | - * Написать аналог с `React.createElement`: |
| 3 | +* useEffect |
| 4 | + * Нужно ли указывать функции в виде зависимостей эффектов? |
| 5 | + * Что выведется в консоли для следующего кода, если быстро нажать 5 раз на кнопку, и почему? |
13 | 6 | ```javascript |
14 | | - <OuterComponent color="black" disabled> |
15 | | - <InnerComponent hidden={false} /> |
16 | | - <div> |
17 | | - Div text content |
18 | | - </div> |
19 | | - </OuterComponent> |
| 7 | + function Counter() { |
| 8 | + const [count, setCount] = useState(0); |
| 9 | + |
| 10 | + useEffect(() => { |
| 11 | + setTimeout(() => { |
| 12 | + console.log(`You clicked ${count} times`); |
| 13 | + }, 3000); |
| 14 | + }); |
| 15 | + |
| 16 | + return ( |
| 17 | + <div> |
| 18 | + <p>You clicked {count} times</p> |
| 19 | + <button onClick={() => setCount(count + 1)}> |
| 20 | + Click me |
| 21 | + </button> |
| 22 | + </div> |
| 23 | + ); |
| 24 | + } |
20 | 25 | ``` |
21 | | -* Что такое Virtual DOM и зачем он нужен? |
22 | | -* Что такое `state` и `props` у компонента? |
23 | | - * Как обновить `state`? Почему не стоит это делать через прямую запись в `this.state`? |
24 | | - * Если передать в `setState` не все свойства, которые до этого уже были в стейте, то будут ли удалены те, что не переданы? |
25 | | - * В каких случаях стоит хранить значения в стейте компоненты, а в каких случаях в инстансе? |
26 | | - * Как правильно обновлять `state` на основе предыдущего значения `state`? Какие могут при этом возникнуть проблемы? |
27 | | - * Что такое top-down data flow? Что является основным механизмом синхронизации нескольких компонент? |
28 | | -* `props.children` |
29 | | - * Что это такое? |
30 | | - * Когда может быть полезным? |
31 | | - * Что позволяет делать `React.Children` API? |
32 | | -* Component Lifecycle |
33 | | - * Что это такое? |
34 | | - * Когда какие методы вызываются? В каком порядке? |
35 | | - * Как и в каких случаях использовать те или иные методы жизненного цикла? |
36 | | -* Что должен делать метод `render`? Почему необходимо держать этот метод чистым? |
37 | | -* Hooks |
38 | | - * Какие существуют правила при работе с хуками? |
39 | | - * Для чего предназначены хуки `useState`, `useReducer`, `useEffect`? Как с ними работать? |
40 | | - * Что может возвращать колбэк, передаваемый в `useEffect`? |
41 | | - * Что такое массив зависимостей? Рассказать как он влияет на работу хука на примере useEffect (в том числе на возвращаемое колбэком значение). |
42 | | -* Что такое HOC? Когда хоки могут быть полезны? |
43 | | -* Что такое React Fragment? Для чего он нужен? Как его использовать? |
44 | | -* Performance |
45 | | - * Когда передача инлайн-коллбека ухудшает производительность и почему? Пример: `<LoginButton onClick={(e) => this.handleClick(e, user)}>` |
46 | | -* refs |
47 | | - * Что это такое? Зачем нужны? Как их использовать? |
48 | | - * Как и для чего использовать хук `useRef`? |
49 | | - * Что делает и зачем нужен метод `React.forwardRef`? |
50 | | - * Почему refs стоит использовать умеренно? |
51 | | -* Controlled и uncontrolled компоненты |
52 | | - * Что это такое? Как происходит работа с инпутами? |
53 | | - * Как задать дефолтное значение для инпута в uncontrolled компоненте? |
54 | | -* Что такое Context и когда может быть полезен? |
| 26 | + * Как сделать так, что бы все 5 раз вывелось последнее значение, то есть цифра 5? |
| 27 | + * Что выведется в консоли для следующего кода, если несколько раз быстро нажать на кнопку? |
| 28 | + ```javascript |
| 29 | + function Example() { |
| 30 | + const [count, setCount] = useState(0); |
| 31 | +
|
| 32 | + useEffect(() => { |
| 33 | + console.log(count); |
| 34 | + if (count % 2 === 0) { |
| 35 | + return () => setTimeout(() => console.log("It was even render"), 1000); |
| 36 | + } else { |
| 37 | + return () => setTimeout(() => console.log("It was odd render"), 1000); |
| 38 | + } |
| 39 | + }); |
| 40 | +
|
| 41 | + return ( |
| 42 | + <div> |
| 43 | + <p>You clicked {count} times</p> |
| 44 | + <button onClick={() => setCount(count + 1)}>Click me</button> |
| 45 | + </div> |
| 46 | + ); |
| 47 | + } |
| 48 | + ``` |
| 49 | +* Как и для чего использовать хуки `useMemo` и `useCallback`? |
| 50 | + * Всегда ли следует оборачивать код в `useMemo`/`useCallback`? |
55 | 51 | * Portals |
56 | 52 | * Что это такое? Зачем нужны? Как использовать? |
57 | 53 | * Как будет работать контекст и event bubbling в случае с порталами? |
58 | 54 | * Что такое Error Boundaries? Зачем они нужны? Как ими пользоваться? |
59 | 55 | * Будут ли "пойманы" в `catch` блоке ошибки, возникающие при рендере `InnerComponent`? Почему? |
60 | | - ``` |
| 56 | + ```javascript |
61 | 57 | function OuterComponent() { |
62 | 58 | try { |
63 | 59 | return <InnerComponent />; |
|
70 | 66 | ### Ресурсы |
71 | 67 |
|
72 | 68 | * [React Documentation](https://reactJS.org/docs/getting-started.html) |
73 | | -* [Why Do We Write super(props)?](https://overreacted.io/why-do-we-write-super-props/) |
| 69 | +* [Полное руководство по useEffect](https://habr.com/ru/company/ruvds/blog/445276/) - объёмная, но очень классная статья по useEffect, которая поможет раскрыть глаза на многие вещи. Возможно придётся осилить в 2 подхода. |
| 70 | +* [Все ли вы знаете о useCallback](https://habr.com/ru/post/529950/) |
| 71 | +* [Интересная ветка обсуждения в комментариях статьи выше](https://habr.com/ru/post/529950/comments/#comment_22380330) |
0 commit comments